login_logo2-4

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

همانطور که می دانید برای طراحی یک قالب سایت باید ابتدا همان قالب را در نرم افزار فتوشاپ طراحی کرده سپس ابعاد دقیق قالب را محاسبه و شروع به طراحی صفحات باCSS نمود.

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

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

1. یک صفحه با ابعاد 700×766 با رزولیشن 72 ایجاد کنید .File>New

tem-design(asarayan.com)1

 

2. ابزار سطل رنگ Paint Bucket Tool را انتخاب کنید و رنگ پس زمینه را با درصد رنگی 0F1715 تغییر بدهید

tem-design(asarayan.com)2

3. تصویر زیر را ابتدا دانلود کنید . سپس با زدن کلیدهای Ctrl+O تصویر دانلود شده را در فتوشاپ باز کنید.
از نوار ابزار بالای صفحه منوی Edit>Define Pattern را انتخاب کرده و یک اسم دلخواه برای پترن مورد نظر تایپ و ذخیره کنید.
یک لایه جدید ایجاد ، ابزار سطل رنگ را انتخاب و تنظیمات سطل رنگ را برابر با Pattern قرار داده و بر روی لایه جدید اعمال کنید .

2

 

tem-design(asarayan.com)3

4. می خوام کمی قسمت بالای صفحه تیره تر باشه نسبت به قسمت پایین.طبق مراحل زیر تمرین را دنبال کنید :
4.1. یک لایه ماسک به لایه پترن خودتون اضافه کنید

tem-design(asarayan.com)4

4.2. ابزار Brush را از جعبه ابزار انتخاب کنید .
اندازه قلم را برابر با 60 قرار بدید

tem-design(asarayan.com)5

4.3.کمی ناحیه بالا را محو کنید .بعد از انجام دو مرحله بالا مد لایه را برابر با Blending mode-Soft Light قرار بدید .

tem-design(asarayan.com)6

tem-design(asarayan.com)7

5. ابزار Rectangle Tool را از جعبه ابزار انتخاب و یک کادر پایین صفحه با درصد رنگی 0F1715 می کشیم .

tem-design(asarayan.com)8

6. باابزار Rectangle Tool یک کادر دیگه بالای صفحه به عنوان منو اصلی سایت می کشیم و بعد با دابل کلیک کردن بر روی لایه آن ، رنگشو تغییر می دهیم .

tem-design(asarayan.com)9

 

tem-design(asarayan.com)10

tem-design(asarayan.com)11

7. ابزار Rounded Rectangle Tool را با Redius=10px انتخاب کنید و یک کادر همانند تصویر زیر بکشید تا بعد از آن رنگشو تغییربدهیم .

tem-design(asarayan.com)12

 

8. برای پاک کردن قسمت بالای کلید منو ، ابزار Rounded Rectangle Tool را انتخاب و کلید Alt را از روی صفحه کلید پایین نگاه داشته روی قسمت بالا را درگ کنید .

tem-design(asarayan.com)13

 

9.برای تغییر رنگ کلید بر روی لایه مورد نظر دابل کلیک کرده و تنظیمات آن را همانند تصویر زیر تغییر دهید

tem-design(asarayan.com)14

 

tem-design(asarayan.com)15

10. ابزار Line Tool (U) (weight 2 px را با ضخامت مشخص شده انتخاب کنید و سه خط دیگر درست برابر با منوی کشیده شده بکشید .

tem-design(asarayan.com)16

11. برای تغییر رنگ خطهای کشیده شده آیکون fx را در حالیکه کلید Altرا پایین نگاه داشته اید بر روی خطهای کشیده شده ببرید و رها کنید .آیکون fx در تصویر زیر مشخص شده است

tem-design(asarayan.com)17

 

12.اینبار 3 خط به صورت عمودی با رنگ سفید و opacity=50% بکشید

tem-design(asarayan.com)18

 

13. ابزار تایپ Horizantal Type Tool را انتخاب کنید و نام صفحات خودتان را با یک فونت دلخواه تایپ نمایید .درصد رنگی فونت 945b26

tem-design(asarayan.com)19

 

14. یک مستطیل با ابزار Rectangle Toolکشیده .fill را برابر با صفر قرار دهید ، بر روی لایه دابل کلیک کرده و تنظیمات گزینه Strok را همانند تصویر زیر تغییر دهید

tem-design(asarayan.com)21

 

tem-design(asarayan.com)20

15. عکس آفتابگردان را دانلود و کلید Ctrl+O را بزنید .عکس را وسط کادر کشیده شده قرار دهید . اگر کمی بزرگتر هست با زدن کلیدهای Ctrl+T اندازه تصویر را کوچکتر نمایید.

really_beautiful_sunflower2

 

tem-design(asarayan.com)22

16.ابزار Horizantal Type Tool را انتخاب کنید و متن دلخواه خودتان را تایپ نمایید . رنگ سبز :98a800 متن :a19e9c
من برای اینکه دقیقا متن کشیده شده در یک راستا قرار بگیرد یک کارد با ابزار Horizantal Type Tool درست زیر تصویر با درگ کردن میکشم سپس متن خودمو را تایپ میکنم.

tem-design(asarayan.com)23
home
منبع:آسارایان
اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در pinterest
اشتراک گذاری در linkedin

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

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

مطالب مرتبط

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

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