وب سایت آموزشی و فناوری اطلاعات

طراحی قالب وب سایت خبری در فتوشاپ

امروزه کمتر شرکت یا موسسه ای وجود دارد که دارای یک وب سایت شخصی نباشد .
هر چقدر تعداد وب سایتها بیشتر می شود ، رقابت بین شرکت های طراحی وب سایت نیز بیشتر و بیشتر می شود .
طراحی یک قالب زیبا در عین حال سبک از ویژگیهای یک طراح خوب هست که باید نکات و خصوصیات رنگ و تصویر را به خوبی بداند تا بتواند از عناصر نام برده شده در طراحی خود استفاده کند.

سعی می کنم بخش طراحی قالب در فتوشاپ و بعد ها تبدیل قالب ها در HTML را به صورت کامل توضیح بدهم . امیدوارم از این آموزش لذت ببرید .

1. برای شروع یک صفحه به ابعاد 1650×1200 با رزولیشن 72 ایجاد کنید .

tem-design(asarayan.com)ch2-1

 

2.یک لایه جدید ایجاد کرده ، ابزار Paint Bucket Tool را از جعبه ابزار انتخاب کرده و رنگ پس زمینه را با دردصد رنگی 3E2E1F تغییر دهید .

tem-design(asarayan.com)ch2-2

 

3. از نوار ابزار بالای صفحه فیلتر Filter>Noise>Add Noise را با تنظیمات مشخص شده در تصویر زیر بر روی پس زمینه اعمال کنید .

tem-design(asarayan.com)ch2-3

4. از نوار ابزار بالای صفحه فیلتر Filter>Blur>Gaussian blur را با تنظیمات مشخص شده در تصویر زیر بر روی پس زمینه اعمال کنید .

tem-design(asarayan.com)ch2-4

tem-design(asarayan.com)ch2-5

5. یک لایه بدون پس زمینه با ابعاد 27×27 ایجاد کنید .ابزار Rectangle Tool را انتخاب کنید و یک کادر مستطیل شکل همانند تصویر زیر بکشید. برای تغییر اندازه و چرخش کادرهای کشیده شده از ابزار Freetransform استفاده کنید .شورتکات =Ctrl+T

tem-design(asarayan.com)ch2-6

6. کلید Ctrl را پایین نگه دارید حالا هر سه لایه را انتخاب کنید .(مستطیل های کشیده شده)کلید های CTRL+E را بزنید تا لایه ها یکی شوند.

6.1. از نوار ابزار بالای صفحه منوی Edit>Define Pattern را انتخاب و یک اسم برای پترن ساخته شده انتخاب کنید .
6.2. یک لایه جدید ایجاد کنید .
6.3.حالا از نوار ابزار بالای صفحه Edit>Fill را انتخاب کرده و در قسمت Content>Use را برابر با پترن ساخته شده قرار بدهید . کافیست بر روی OK کلیک کنید .

tem-design(asarayan.com)ch2-7

 

7.گزینه Fill لایه دوم را برابر با 10% قرار بدهید .

tem-design(asarayan.com)ch2-8

 

8. ابزار Rounded Rectangle Tool (U) (Radius – 15px انتخاب کرده و یک کادر مشکی رنگ با Fill 25% ایجاد کنید .

tem-design(asarayan.com)ch2-9

 

9. ابزار Rounded Rectangle Tool (U) (Radius – 15px را انتخاب و یک کادر پایین تر از کادر اولی با درصد رنگی ECE9E3 ترسیم کنید .

tem-design(asarayan.com)ch2-10

 

tem-design(asarayan.com)ch2-11

tem-design(asarayan.com)ch2-12

tem-design(asarayan.com)ch2-13

10.ابزار Horizontal Type Tool را انتخاب و نام شرکت را بالای صفحه تایپ کنید . درصد رنگی زرد :f5a705

tem-design(asarayan.com)ch2-14

 

11. یکبار دیگر با ابزار تایپ اسم صفحات را در نوار ابزار همانند تصویر زیر تایپ کنید .برای ایجاد نقطه نیز می توانید 5 نقطه بکشید و کمی آن را با ابزار Freetransform بچرخانید .
tem-design(asarayan.com)ch2-15
12. برای ایجاد کادر جستجو ابزار Rounded Rectangle Tool (U) (Radius – 15px را انتخاب کنید و یک کادر کوچک روبروی منوسایت بکشید .برای ایجاد سایه هم بر روی لایه دابل کلیک کرده و تنظیمات آن را همانند تصویر زیر تغییر دهید .

tem-design(asarayan.com)ch2-16

tem-design(asarayan.com)ch2-17

tem-design(asarayan.com)ch2-18

13. یک کادر زیر لایه متن جستجو با ابزار Rounded Rectangle Tool (U) (Radius – 15px با درصد رنگی f5a705 ایجاد کنید .

tem-design(asarayan.com)ch2-19

 

14. ابزار Rounded Rectangle Tool (U) (radius 10 px را انتخاب و چند کار همانند تصویر زیر با درصد رنگی F7F5F2 میکشیم .

tem-design(asarayan.com)ch2-20

15. با ابزار Horizontal Type Toolعنوان را بالای کادرهای کشیده شده تایپ می کنیم .

tem-design(asarayan.com)ch2-21

 

16. حالا شروع به نوشتن متن ها در کادرهای مشخص شده می کنیم .

tem-design(asarayan.com)ch2-22

 

17. با ابزار Rounded Rectangle Tool (U) (radius 10 px چند تا کادر دیگه وسط تصویر میکشم و شروع به تایپ متن میکنم .دقت داشته باشید که شما می توانید هر فونتی را به دلخواه برای طراحی انتخاب کنید اما تبدیل قالب فتوشاپ به قالب HTML  هر فونتی را پشتیبانی نمی کند .

tem-design(asarayan.com)ch2-24

منبع:آسارایان

اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در pinterest
اشتراک گذاری در linkedin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب مرتبط

فرم ورود کاربر

ابتدا باید وارد حساب کاربری خود شوید