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

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

پیش نمایشی از طرح کامل شده را در زیر می بینید

گام 1 : تنظیمات پایه فایل فتوشاپ

برای طراحی این صفحه فرود از سیستم شبکه 960 کمک خواهیم گرفت. از سیستم شبکه ای محبوب 690 استفاده می کنیم. استفاده از این سیستم شبکه ای طراز بندی المانهای صفحه فرود را آسانتر خواهد کرد.

فایل zip سیستم شبکه 960 را از سایت رسمی آن دانلود کنید. محتوای آن را از حالت فشرده خارج کنید و فایل فتوشاپ 12 ستونه را در فتوشاپ باز کنید.

نام این فایل 960_grid_12_col.psd است و در پوشه templates\photoshop واقع است

حال اندازه عرض و ارتفاع فایل فتوشاپ را تغییر میدهیم تا فضای بیشتری برای طراحی داشته باشیم.

از منو Image > Canvas Size را انتخاب کنید و عرض را برابر 1200 پیکسل و ارتفاع را برابر 1330 پیکسل انتخاب کنید.

245 پیکسل از بالای صفحه را برای تصویر هدر سایت در نظر بگیرید.

به فضای باقیمانده صفحه را رنگ خاکستری #f0f0f0 اختصاص بدهید. این کار را میتوانید به روشهای مختلف انجام دهید. یکی از این روشها استفاده از ابزار Rectangle Tool است

از پانل Tools ابزار Rectangle Tool را انتخاب کنید. دقت کنید که گزینه Shape layers در نوار Options انتخاب شده باشد و گزینه Color را بر روی  #f0f0f0 قرار دهید. یک مستطیل انتخاب بر روی کل صفحه بجز 245 پیکسل بالای صفحه ایجاد کنید.

لایه را بنام Base نامگذاری کنید

گام 2 : تصویر سربرگ

تصویر بزرگی را بعنوان پس زمینه سربرگ سایت انتخاب کنید و وارد فتوشاپ نمایید. دقت کنید که تصویر حداقل 1200 پیکسل عرض و 245 پیکسل ارتفاع داشته باشد.

تصویر را در بالای صفحه قرار دهید. 

به تصویر یک افکت بلور اعمال خواهیم کرد. این کار را به روشهای مختلفی میتوان انجام داد. اما در این تمرین از ساده ترین راه استفاده خواهیم کرد.

از منو Filter > Blur > Gaussian Blur را انتخاب کنید. گزینه Radius بر روی 4 پیکسل تنظیم کنید.

گام 3 : ساخت نوار راهبری بالای صفحه

با ابزار Rectangle Tool (M) یک مستطیل در بالای صفحه به ارتفاع 20 پیکسل ایجاد کنید بطوریکه سرتاسر بالای صفحه را بپوشاند.

شفافیت لایه را %25 تنظیم کنید. تصویر زیر چگونگی نوار راهبری را در بالای صفحه نشان میدهد.

ابزار Horizontal Type Tool (T) را انتخاب کنید.

یکی از فونتهای رایگان گوگل بنام Source Sans Pro انتخاب می کنیم. میتوانید این فونت را از گوگل دانلود کنید

در نوار Options میتوانید تنظیمات Horizontal Type Tool را بصورت زیر انجام دهید

• font family: Source Sans Pro

• font style: Bold

• font size: 16px

• text color: #aed572 (یک رنگ سبز)

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

در این طراحی از چند آیکون نیز استفاده می کنیم. هر آیکونی که به کارتان میاید میتوانید استفاده کنید.رنگ آیکونها را میتوانید سفید #ffffff انتخاب کنید.

بعد از طراحی متنها و آیکون ها به آنها افکت Drop Shadow نسبت دهید.

نتیجه کار بصورت زیر خواهد بود

گام 4 : ایجاد لوگوی روبانی شکل

از منو View > Show > Guides را انتخاب کنید و شبکه خطوط راهنمای سیستم 960 را روشن کنید. این سیستم شبکه ای به ما کمک می کند تا المهانها را طراز بندی کنیم. مانند لوگوی روبانی شکلی که در این مرحله طراحی می کنیم.

برای ایجاد شکلی شبیه به آنچه در گوشه بالای تصویر می بیینید میتوانید چند خط راهنمای دیگر به صفحه اضافه کنید. با استفاده از خطوط راهنما شکل لوگو را ترسیم کنید. یک رنگ سبز روشن #79b02f به لوگو اختصاص دهید.

حال به لوگوی روبانی شکل سبکی اضافه می کنیم.

این کار را با یکی از ویژگیهای قدرتمند و محبوب فوتوشاپ یعنی  Layer Style انجام خواهیم داد.

کار را با اضافه کردن یک افکت لایه  Inner Shadow روشن با شفافیت %35 شروع کنید.

همچنین با اضافه کردن افکت لایه Bevel and Emboss یک جلوه برجستگی به لوگو میدهیم. برای گزینه Highlight Mode شفافیت را بر روی %0 تنظیم کنید زیرا نیازی به افکت هایلایت نداریم. برای گزینه Shading mode شفافیت را بر روی %15 تنظیم کنید

همچنین یک افکت لایه Gradient Overlay نرم به شکل اعمال می کنیم. Blend mode را بر روی Soft Light قرار دهید و شفافیت را برای این شکل خاص %50 تنظیم کنید

یک افکت لایه Pattern Overlay برای اعمال یک طرح زیبا بر روی لوگو استفاده میکنیم. میتوانید الگوهای آماده را از اینترنت دانلود کنید همیچنین می توانید از الگوهای آماده فتوشاپ استفاده کنید . برای آشنایی بیشتر به طرز کار الگوها میتوانید دستورالعملها و راهنمای Photoshop pattern را مطالعه کنید.

در افکت pattern Overlay گزینه Opacity را بر روی %5 تنظیم کنید.

با استفاده از ابزار  Horizontal Type Tool متنی در بالای لوگو بنویسید. در این تمرین میتوانید از فونت Nevis برای متن استفاده کنید. font style را بر روی Bold و سایز فونت را 36 پیکسل انتخاب کنید و حروف DM را تایپ کنید.

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

گام 5 : ایجاد عنوانها در سربرگ 

فونت  Source Sans Pro انتخاب کنید و font style را بر روی Bold تنظیم کنید و عنوانها را تایپ کنید. سایز عنوانهای بزرگتر را 24 پیکسل و سایز عنوانهای کوچکتر را که در زیر عنوانهای بزرگتر نوشته می شوند 18 پیکسل انتخاب کنید

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

گام 6 : گرافیک های دایره ای 

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

برای ایجاد دایره ها از ابزار Ellipse Tool و برای کشیدن خط از ابزار Line Tool استفاده کنید. گزینه Weight  را 5 پیکسل انتخاب کنید تا یک خط به ضخامت 5 پیکسل از میان دایره ها عبور دهید.

فونت  Bebas Neue را انتخاب کنید و چند متن در وسط هریک از دایره ها تایپ کنید. سایز فونت را 10pt انتخاب کنید.

گام 7 : ایجاد دکمه call to action

در زیر دایره ها دکمه call to action را طراحی می کنیم. با ابزار Rounded Rectangle Tool شکل اصلی دکمه call to action را می سازیم. دقت کنید که در نوار Option گزینه  Shape layers  انتخاب شده باشد. گزینه Radius را بر روی 3 پیکسل و گزینه Color را بر روی یک رنگ سبز روشن  #96c64 تنظیم کنید.

سپس یک مستطیل به طول 35 پیکسل و عرض 7 پیکسل ایجاد کنید. به مستطیل یک افکت لایه Drop Shadow اعمال نمایید.

همچنین یک افکت لایه Inner Shadow به مستطیل اعمال کنید. گزینه Distance را بر روی 1 پیکسل و Opacity را بر روی %30 تنظیم نمایید.

یک افکت لایه Bevel and Emboss به دکمه Call to Action اعمال کنید.

این افکت باید به سختی قابل مشاهده باشد از این رو در تنظیمات این افکت محبوب زیاده روی نکنید. اگر بخواهیم به دکمه های وبسایت عمق بدهیم افکت Bevel and Emboss برای این منظور مناسب است . برای اینکه این افکت ظریف و به سختی قابل مشاهده باشد شفافیت را برای گزینه HHighlight Mode بر روی %0 و برای گزینه Shadow Mode بر روی %7 تنظیم کنید 

حال یک افکت لایه Gradient Overlay بر روی دکمه اعمال می کنیم. Blend mode را بر روی Soft Light و Opacity را بر روی %60 تنظیم کنید.

حال به دکمه یک بافت تویز میدهیم.

روشهای زیادی برای انجام این کار وجود دارد اما ساده ترین روش این است که در فتوشاپ بافت سفارشی مورد نظر را بسازیم.

پروسه ایجاد بافت سفارشی در فتوشاپ بصورت زیر است

1. یک سند جدید در فتوشاپ ایجاد کنید
2. یک لایه جدید ایجاد کنید و لایه پس زمینه لایه را پاک کنید.
3. از منو Select > All را انتخاب کنید تا یک انتخاب مربع شکل بدور کل صفحه ایجاد شود و تمام صفحه انتخاب شود
4. از منو Edit > Fill را انتخاب کنید تا لایه با یک رنگ پر شود
5. از منو  Select > Deselect انتخاب کنید تا همه چیز از انتخاب خارج شود
6. از منو Filter > Noise > Add Noise را انتخاب کنید و یک نویز قابل مشاهده را به لایه اعمال کنید
7. کل صفحه را مجددا با انتخاب Select > All انتخاب کنید
8. از منو Edit > Define Pattern را انتخاب کنید و الگو را ذخیره کنید.

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

حال به فایل فتوشاپ اصلی باز گردید و یک افکت Patten Overlay به دکمه اعمال کنید و الگویی را که قبلا ساختید بر روی دکمه بیاندازید

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

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

برای انجام این کار ابزار Line Tool را انتخاب کنید و یک خط عمودی به ارتفاع 10 پیکسل ایجاد کنید. یک افکت لایه Gradient Overlay بر روی خط اعمال کنید.

از فونتی که برای عنوان منوی راهبری استفاده کردیم (Nevis) استفاده کنید و متنی بر روی دکمه بنویسید. میتوانید عبارت Download it Now را بر روی دکمه بنویسید.

به متن یک رنگ قهوه ای تیره بدهید #4d7500 . یک افکت Drop Shadw با رنگ Shadow سفید #ffffff و شفافیت %30 بر روی متن اعمال کنید