آموزش طراحی قالب (فصل دوم - جلسه سوم) : طراحی محتوا و پانوشت

- visibility ۳۷ mode_comment

در جلسه قبل از این آموزش، تا قسمت Sidebar سایت پیش رفتیم در این جلسه قسمت Content یا همان مطالب و پانوشت footer را طراحی خواهیم کرد. پس با ما همراه باشید.

قسمت content

در ابتدا تصاویر مورد استفاده در این جلسه را دانلود کرده و در پوشه images قالب قرار دهید.

فایل psd طرح را باز کنید تا کار را شروع کنیم :

1.ابتدا با استفاده از ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید و آن را در وسط بین دو بلوک قرار دهید.

2.گروه block را باز کرده و بر روی لایه block-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید :

3.سپس بر روی لایه مطلب (shape 7) کلیک راست کنید و paste layer style رو انتخاب کنید

4. یک لایه متنی جدید ایجاد کنید با عنوان " عنوان مطلب " فونت b nazanin ، اندازه ی 24px و رنگ سیاه.

5. با ابزار rounded rectnangle tool یک مربع با ابعاد 150 * 150 ایجاد کنید و آن را در پایین عنوان مطلب قرار دهید

info نکته :

اگر لایه ای که ایجاد کردید دارای استایل است بر روی لایه کلیک راست کنید و clear layer style رو انتخاب کنید

رنگ لایه را به #cdcdcd تغییر دهید .

6. یک لایه متنی جدید ایجاد کنید با عنوان " بدون تصویر بند انگشتی" رنگ و آن را #546995، فونت entezare zoohor 3 و اندازه 36px درون لایه قرار دهید.

7. یک لایه متنی جدید دیگر با عنوان " متن مطلب در این جا قرار می گیرد" ، با رنگ سیاه فونت Tahoma و اندازه 14px ایجاد کنید و آن را در سمت چپ تصویر بند انگشتی قرار دهید.

8. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید :

سپس استایل زیر را به آن بدهید :

9. یک لایه متنی دیگر ایجاد کنید با فونت b naznin و رنگ #7b7b7b و اندازه 24px و با عنوان "ادامه مطلب" و ان را درون لایه ای که ر مرحله قبل ایجاد کردیم قرار دهید.

10. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

سپس رنگ ان را #d2d2d2 قرار دهید .

11. سه تصویر date , auther و comments را وارد فایل کنید و آن ها را با فاصله تقریبا 150px از هم در لایه ای که در مرحله قبل ایجاد کردیم قرار دهید :

12. سپس در کنار آیکون ها یک لایه متنی جدید با فونت Tahoma و اندازه 14px و رنگ # 255497 با عناوین زیر ایجاد کنید :

مقداری آیکون نظرات و نوشته آن را به سمت چپ بکشید

13. همه لایه هایی که در این جلسه ایجاد کرده اید را با نگه داشتن SHIFT انتخاب کنید و آن ها را در یک گروه جدید با نام post قرار دهید.

قسمت footer

1.با ابزار rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

2. رنگ لایه را به #366995 تغییر داده و آن را در زیر قسمت content قرار دهید

3. یک لایه متنی با فونت b nazanin و اندازه 24px و رنگ سفید مانند تصویر زیر ایجاد کنید

4.این دولایه را با هم در یک گروه جدید با نام footer قرار دهید.

بسیار خب کار ما به پایان رسید، فایل را ذخیره کنید و از نرم افزار خارج شوید،

در جلسه بعد به تکه تکه (slice) کردن قالب خواهیم پرداخت، و تصاویر مورد نیاز را از قالب خارج خواهیم کرد.

comment دیدگاه کاربران
hajian1

سلام
درصورت امکان راهنمایی کنیدکه چطورازووردpdfتهیه کنیم
باتشکر

سجاد دریس

سلام.
از منوی file گزینه save as رو انتخاب کنید و در پنجره ای که باز میشه، save as type رو PDF قرار بدین.

amn

سلام ممنون از اموزش های عالی و خوبتون
آقا سجاد pdf این قسمت رو دانلود کردم ولی عکس هارو باز نمی کنه؟
می خواستم ببینم مشکل چیه؟؟؟

سجاد دریس

سلام.
مشکل از پلاگینیه که فایل های pdf رو ایجاد میکنه.
فعلا دانلود نکنید تا مشکلش رو برطرف کنیم.

Shahin-Sorkh

سلام سجاد جان خسته نباشی
اقا یه نظر کلی درباره این بده مرسی:
http://upload7.ir/images/77176094368743588237.jpg

سجاد دریس

سلام.
خوبه، اما زیاد از طیف های رنگی استفاده کردی که باعث خستگی چشم میشه.

babakh

عالی

Abbas412

سلام دوستان
من توی کار با فتوشاپ یه مشکل کوچولو دارم
متن رو وقتی روی یه لایه دیگه مثلا content میذارم، خوب و عالیه؛ ولی وقتی روی مثلا footer میذارم متن رو نشون نمیده
توی جاهای دیگه هم این مشکل رو داشتم
مشکل از کجاست؟
عکس ها رو ببینید:
http://upload7.ir/images/53790972478853249998.jpg
http://upload7.ir/images/14313978720527847020.jpg

ممنونم

سجاد دریس

سلام.
احتمالا مشکل از ترتیب لایه هاست
ترتیب لایه ها باید مانند تصویر زیر باشه.

Abbas412

ممنون سجاد جان، درست شد
فقط دوتا سوال دیگه دارم، ببخشید که خیلیییی مبتدیانه هستن 😕

1. وقتی یه متن میخوام بنویسم، دورش یه کادر اندازه گیری میفته، اونو چجوری غیرفعال/فعال کنم؟؟
http://upload7.ir/images/83279451403806690673.jpg

2. الان طرحم کاملا شبیه طرح شماست فقط لایه content رو که با ابزار rectangle tool و اندازه های 1024 و 800 باید درست میکردم، فکر کنم ارتفاعش رو کم گرفتم، آخه فوتر من از پایین بکگراند خیلی فاصله داره، حالا این لایه رو چطوری باید بزرگش کنم؟؟ هرکاری کردم نتوسنتم ارتفاعش رو زیاد کنم

ممنون

سجاد دریس

سلام.
1. وقتی میخوای یه متنی رو بنویسی بعد از انتخاب کردن ابزار type، جایی که میخوای متنت قرار بگیره کلیک کن و شروع کن به نوشتن، در این صورت این کادراندازه گیری ظاهر نمیشه.
اما وقتی مثلا میخوای که متنت در یک عرض و ارتفاع معینی قرار بگیره، با کشیدن و رها کردن، یک عرض و ارتفاع برای کادر متنی ایجاد میکنی. که در این صورت باعث نمایش این کادر میشه.
2.مهم نیست که دقیقا شبیه طرح من بشه. در ادامه با css اندازه ها دقیق درمیاد.

هومن

سلام یه سئوال الان من دارم با آموزش های شما جلو میرم
فقط یه چیزی مگه قالب با کد های css کار نداره پس این کاری که ما داریم میکنیم با فوتوشاپه که

آخرش به قالب تبدیل میشه یا نه

کیوان علی محمدی

سلام،بله آخرش تبدیل میشه.

یاسر

سلام .. لطفا pdf هارو اصلاح کنین .. خیلی نیاز دارم .. عکس هارو نشون نمیده ..
لطفا سریع تر درستش کنین
مرسی

سجاد

سلام من می خوام پست هام فقط توی ادامه مطلب باشن باید چیکار کنم

کیوان علی محمدی

شما باید در قسمت حلقه فقط تصویر و عنوان مطلب رو نمایش بدین،یا مثلا فقط عنوان مطلب رو نمایش بدین.برای حذف کردن خلاصه مطالب این کد the_excerpt(); و برای برداشتن متن کامل مطلب the_content رو حذف کنید.

laya25

سلام یه سوال دارم شاید ابتدایی باشه ولی ممنون میشم جواب بدین
من تصویرارو که وارد فایل میکنم تو یه صفحه جدا باز میشه من اونارو cut میکنم بعد تو صفحه اصلی paste میکنم آیا کار من درسته یا روش دیگه ای داره؟
و اینکه چجوری تصویرارو با فاصله 150px بزارم یعنی فاصلشو چجوری تعیین کنم
ممنون

سجاد دریس

سلام.
1. مشکلی نیست، این روش هم درسته.
2. زیاد فرقی نمیکنه، کمتر یا بیشتر شد بعدا تو html کردن درستش میکنیم. اما واسه دقیقتر شدن می تونید از ابزار خط کش استفاده کنید.

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.

1 2