آموزش طراحی قالب با فتوشاپ

بازدید: 1869 بازدید

با یکی دیگر از آموزشهای طراحی قالب با فتوشاپ در خدمت شما هستم . امروز میخواهم قالبی که نام آن را صلح جهانی گذاشته ام را در فتوشاپ طراحی کرده و در مرحله بعدی پوسته قالب را تبدیل به یک وب سایت استاتیک کنم .(دقت داشته باشید که تمام متن های تایپ شده فقط برای نمایش بهتر یک موقعیت بوده و از لحاظ مفهومی درست نمی باشد). شما می توانید رنگ ، فونت ، اندازه کادر را به دلخواه تغییر بدهید . هدف از انجام این آموزش نحوه طراحی پوسته قالب می باشد .
روش کار به این صورت هست که ابتدا یک صفحه با ابعاد 1440×1500 با رزولیشن 72 ایجاد میکنم و در مرحله بعدی با ابزار خط کش قسمت های مختلف قالب را اندازه گیری و یک خط جهت مشخص کردن قسمت مورد نظر قرار میدهم .
سپس با استفاده از ابزارهای مختلف شروع به کشیدن اجزایی که قرار است در قالب قرار بگیرد کرده و هر قسمت را با توجه به طرح اصلی طراحی میکنم .

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

Design-PSD-them-Rahyab1

2. در مرحله اول با استفاده از ابزار خط کش باید یک فاصله 150 مگاپیکسلی از طرف بالای کادر به طرف داخل بکشید . برای انجام اینکار در نوار ابزار بالای صفحه بر روی منوی Veiw >New Guide کلیک کنید . یک صفحه همانند تصویر زیر نمایش داده می شود . گزینه Horizontal را انتخاب و عدد 150PX را در کادر وارد کرده و در پایان بر روی کلید OK کلیک کنید .

template-global-solution1 template-global-solution2

template-global-solution3

3. یکبار دیگر از طرفین کادر ، از بیرون به طرف داخل باید یک خط به عرض 220 پیکسل ترسیم کنیم .  برای انجام اینکار در نوار ابزار بالای صفحه بر روی منوی Veiw >New Guide کلیک کنید . یک صفحه همانند تصویر زیر نمایش داده می شود . گزینه Vertical را انتخاب و عدد 220PX را در کادر وارد کرده و در پایان بر روی کلید OK کلیک کنید .

template-global-solution4 template-global-solution5

template-global-solution6

4. بالای قالب که منو اصلی همراه با لوگو قرار میگیره دارای رنگ سفید هست . ابزار تایپ Horizontal Type Tool را انتخاب کرده و با درصد رنگی 1f1f1f و فونت Koodak یک سری کلمه به عنوان منوی اصلی بالای صفحه تایپ میکنم  . درصد رنگ فونت نارنجی : fe8f00

template-global-solution7

5. درصد رنگ متن آبی لوگو برابر است با 019ae6 و اندازه آن 36

template-global-solution8

6. ابزار Rectangle Tool را انتخاب کرده و یک کادر همانند تصویر زیر با درصد رنگی eeeced بکشید .

template-global-solution9

template-global-solution10

7. در مرحله بعدی با استفاده از ابزار Rounded Rectangle Tool سه کادر با انحنا Radius :20px ترسیم میکنم . برای تغییر رنگ و افکت سایه از تصاویر زیر کمک بگیرید  .

template-global-solution11

template-global-solution12

بعد از ترسیم هر کادر باید بر روی لایه آن دابل کلیک کرده و گزینه هایی که با کادر قرمز در تصاویر زیر مشخص کرده ام را تغییر بدهید

template-global-solution13

template-global-solution14

template-global-solution15

کادر زرد

template-global-solution16

template-global-solution17

template-global-solution18

کادر طوسی رنگ 30 درصد بزرگتر می باشد .

template-global-solution19

template-global-solution20

8. کمی ابعاد کادرها را بزرگتر کرده ام . بعد از کشیدن هر سه کادر ابزار تایپ Horizontal Type Tool را انتخاب کرده و متنی را داخل آنها تایپ می کنم .

template-global-solution21

9. ابزار Rounded Rectangle Tool را انتخاب کرده و با Radius :20px چهار کادر با درصد رنگی f8f8f8 برای منوی سمت راست و 1 کادر سفید برای متن وسط صفحه ایجاد میکنم .

template-global-solution22

10. در مرحله بعدی باید برای هر یک از منو ها یک عنوان تایپ کنم . درصد رنگ عنوان 1b1b1b . رنگ زیر منو ها 96b41e

template-global-solution23

11. برای متن وسط صفحه هم همانند مرحله 10 یک متن همراه با یک تصویر تایپ میکنم .رنگ متن 353535 | رنگ عنوان 404040 | رنگ آبی لینک : 0271c6

template-global-solution24

12. نوبت میرسه به طراحی فوتر . ابتدا یک کادر با ابزار Rectangle Tool با درصد رنگی cdcfce میکشم .

template-global-solution25

13. مرحله 12 را با درصد رنگی 3a3b3f تکرار میکنم

template-global-solution26

14. کادر آخر هم با درصد رنگی 333438

template-global-solution27

15.قسمت فوتر را می توانیم به سه بخش کوچک تقسیم کنیم . من معمولا یک قسمت را به عنوان لینکدونی و قسمت های دیگر را برای درباره ما و تماس با ما قرار میدهم .
رنگ عنوان : 96b41e | رنگ متن درباره ما : efefed

template-global-solution28

 16. 4 تصویر همراه با یک سری لینک در دو بخش دیگر قرار داده و یک جمله به عنوان کپی رایت در پایین فوتر تایپ میکنم

template-global-solution29

مطالعه بیشتر