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

گام 8 : ایجاد آیکون ابر برای دکمه call to action

حال یک آیکون ابر میسازیم. اگر میخواهید آیکون را از یک ست آیکون بسازید میتوانید این مرحله را رد کنید

ساخت آیکون ابر نسبتا ساده است در در این مرحله آن را انجام می دهیم

ابتدا با ابزار Elipse Tool تعداد 4 یا 5 دایره بسازید. در هنگام ساختن دایره ها دکمه Shift نگهدارید. با این روش به جای 4 یا 5 دایره  و لایه تنها یک لایه و یک شکل خواهید داشت.

حال گزینه Fill را برای لایه آیکون ابری بر روی %0 قرار دهید. این تنظیمات را در پنل لایه ها انجام دهید.

سپس به لایه آیکون یک افکت لایه stroke اضافه کنید و یک حاشیه به صخامت 2 پیکسل و به رنگ سبز تیره به آیکون بدهید.

گام 9 : ایجاد دنباله روبان مانند دکمه call to acion

همان تکنیکهایی را که برای ساخت لوگو بکار بردیم استفاده کنید.یک شکل به رنگ سبز روشن در پشت دکمه call to action ایجاد کنید.

گزینه شفافیت شکل سبز روشن را کم کنید تا پس زمینه از پشت آن معلوم باشد. بر روی آن متنی بنویسید. میتوانید عبارت 100% free را تایپ کنید.

گام 10: ساخت بخش ویژه

حال بخش ویژه را طراحی می کنیم.

ابزار Rectangle Tool (U) را انتخاب کنید و یک مستطیل به عرض 220 پیکسل و ارتفاع 214 پیکسل ایجاد کنید.

در پایین مستطیل یک مستطیل دیگر به رنگ سبز #91c04c و ارتفاع 5 پیکسل ایجاد کنید.

از هر پکیج دلخواه آیکون یک آیکون انتخاب کنید و در بالا و در وسط مستطیل بزرگتر قرار دهید.

ابزار  Horizontal Type Tool (T) را با فونت Source Sans Pro انتخاب کنید. رنگ عنوان را خاکستری تیره #262626 و رنگ متن را خاکستری روشن #9c9c9c قرار دهید.

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

فونت nevis را با سبک Bold و سایز 18pt انتخاب کنید. متنی را تایپ کنید. رنگ خاکستری که استفاده می کنیم همان رنگی است که برای پاراگرافها در گام قبل استفاده کردیم

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

در اخرین بخش Contact Us چند متن قرار دهید. زیرا بصورت یک لینک خواهد بود. در پنل Character ( اگر نمی توانید پنل Character را ببیند از   منو Window > Character را انتخاب کنید. گزینه زیر خط دار را انتخاب کنید تا عبارت Contact Us بصورت زیر خط دار شود

به متن یک افکت لایه Drop Shadow اعمال کنید.

همان رنگ خاکستری را انتخاب کنید و یک پارگراف در زیر متن عنوان تایپ کنید . آیکون کیف پول را از ست آیکونهای خود انتخاب کنید و همان رنگی را که برای بقیه آیکونها استفاده کردید بکار ببرید.

سپس یک افکت لایه Drop Shadow با رنگ سبز مانند تصویر زیر به آن بدهید

گام 11 : ساخت فوتر

ابزار Rectangle Tool (U) را انتخاب کنید و یک مستطیل به عرض 1200 پیکسل و ارتفاع 280 پیکسل ایجاد کنید. یک رنگ خاکستری روشن #d0d0d0 به آن بدهید.  این مستطیل به عنوان پس زمینه فوتر بکار میرود

ابزار Horizontal Type Tool (T) را با همان فونتی که قبلا بکار بردیم انتخاب کنید و چند عنوان مانند تصویر زیر تایپ کنید

فوتر را به سه قسمت تقسیم می کنیم و هر بخش یک عنوان خواهد داشت.

همانطور که در تصویر زیر می بینید عنوان اولین بخش More About Us است  یک افکت لایه Drop Shadow با شفافیت %1 به عنوان اعمال کنید.

از همان فونت قبلی برای نوشتن پاراگراف متنی نمایشی استفاده کنید. به این متن یک رنگ روشنتر #7a7a7a اختصاص دهید

از ابزار Line Tool (U) استفاده کنید و یک خط خاکستری بعنوان جداکننده هریک از بخشها بکشید.

بخش بعدی فوتر در طراحی وبسایت بخش Newsletter است. محل درج متن بخش newsletter را با استفاده از ابزار Rounded rectangle tool و با شعاع گوشه 3 پیکسل بکشید.

یک رنگ خاکستری روشن #f5f5f5 به پس زمینه newsletter اختصاص دهید و یک افکت Drop Shadow ظریف به آن اعمال کنید. یک افکت لایه stroke خیل ظریف به ضخامت 1 پیکسل به مستطیل اضافه کنید. ابزار Horizontal Type Tool (T) ر انتخاب کنید و متنی در داخل مستطیل بنویسید.

آخرین بخش در فوتر بخش Contact Us است. ساخت این بخش ساده است. بخصوص اگر آموزش را تا اینجا دنبال کرده باشید. ساخت این بخش بسیار شبیه به بخشهای قبلی است بجز آیکون که از پک دلخواه آیکون انتخاب می کنید. همچنین یک متن با رنگ تیره تر برای ایمیل ، آدرس و شماره تلفن در نظر میگیریم.

خلاصه آموزش

در این آموزش طراحی سایت چیدمان یک صفحه فرود سایت کاربردی و ساده را با استفاده از فتوشاپ طراحی کردیم.

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

نتیجه نهایی طراحی را در زیر مشاهده می نمایید