در این آموزش می خواهیم به شما نشان دهیم که چگونه می توانید به کمک نسخه آخر فوتوشاپ یک طرح بلاگ زیبا و تمیز درست کنید . در این آموزش می خواهیم از موارد جدید شامل Character Styles جدید و Paragraph Styles استفاده کنیم .

در اینجا یک پیش نمایش از کار نهایی نشان داده شده است .

 

برای اینکه از این آموزش پیروی کنید به منابع زیر نیاز دارید :

Free Font Sansation از  Bernd Montag.

26 Repeatable Pixel Pattern از  PSDfreemium.

Free Social Media Icons از  Daniele Selvitella.

Hand Cursor Icon از  PSDfreemium.

Stock photo: Harvest 1 از  mordoc.

Stock photo: New York Streets 3 از  lonniehb.

Stock photo: Daisy Age از  SteveFE.

Stock photo: A tree on the horizon از  Ydiot.

Stock photo: Sales figures از  wagg66.

Stock photo: Time is Money! از  knox_x.

آماده سازی کار

مرحله اول :

در این طراحی ما از 960 gs به عنوان فریم کاری خود استفاده می کنیم. می توانید قالب را از صفحه اصلی و از درون فایل زیپ دانلود کنید به دنبال فایل فوتوشاپ بگردید .فایل  ’12 Column Grid’ را در فوتوشاپ باز کنید .

بر روی چشم لایه 12 Col Grid کلیک کنید تا آن را پنهان کنید برای حالا به آن نیاز داریم.

قدم 2 :

محیط کاری که پیش رو داریم خیلی کوچک است . بر روی Image > Canvas Size کلیک کنید و یا Ctrl + Alt + C را فشار دهید. یک سایز بزرگتر اضافه کنید و اطمینان حاصل کنید که نقطه لنگری آن را در مرکز قرار داده اید .

قدم 3:

Ctrl + R را فشار دهید تا خطکش را آشکار کنید. View > New Guide را کلیک کنید تا یک راهنمای جدید درست کنید که به ما کمک می کند بهتر و دقیق تر طراحی کنیم. عمودی را انتخاب کنید و در مکان 185 px یک راهنمای 185 px از بالای سمت چپ کار درست کنید .

قدم 4:

یک خط راهنمای عمودی دیگر در موقعیت 150 px, 1095 px و 1130 px بکشید .

در زیر راهنمای نهایی خودمان را در کار مشاهده می کنید .

آماده سازی رنگ قالب

قدم 5 :

برای این طراحی ، می خواهیم از یک رنگ آمیزی ترکیبی زیبا از Colorlouver استفاده کنیم. بر روی لینک پیش نمایش کلیک کنید تا ترکیب رنگی را در یک فایل jpeg باز کند .

ترکیب رنگ را ذخیره کنید و آن را درون فایل فوتوشاپ قرار دهید . با قرار دادن تصویر درست درون کار ، به سادگی می توانیم به سرعت رنگ آن را تنظیم کنیم.

 

آماده سازی پشت زمینه

قدم6:

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

 

بر روی رنگ دوم کلیک  کنید ، تا #948371 را انتخاب کنید .

قدم 7 :

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

قدم 8 :

بگذارید شکل به صورت انتخاب شده باقی بماند . در نوار آپشن ، Fill Color box را باز کنید و بر روی آیکن چرخ رنگی کلیک کنید . هنگامی که جعبه Color Picker dialog باز شد ، بر روی اولین رنگ کلیک کنید تا انتخاب شود . برای رنگ Stroke آن None را انتخاب کنید .

قدم 9 :

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

حالت ترکیبی آن را به Screen  و شفافیت آن را به 37% برسانید .

قدم 10 :

یک لایه جدید درست کنید و نامش را سایه بگذارید .

یک ناحیه انتخابی مستطیلی در پایین پشت زمینه دوم همانند زیر رسم کنید . بر روی Edit: Fill. Set Use to Black کلیک کرده . بر روی OK کلیک کرده تا ناحیه انتخابی را رنگ مشکی پر کنید .

قدم 11 :

با استفاده از Gaussian Blur آن را نرم تر کنید . Filter > Blur > Gaussian Blur را کلیک کنید .

قدم 12 :

کلید ALT را نگه دارید و سپس نشان گر موس را بین سایه و لایه پشت زمینه قرار دهید . بدون اینکه که کلید Alt را رها کنید ، بر روی کانورت کلیک کنید تا Clipping Mask کنید . با کانورت کردن آن به Clipping Mask ، حالا سایه به درون پشت زمینه بالایی می رود .

قدم 13:

شفافیت سایه را به 50% کاهش دهید تا مناسب تر شود . در زیر می توانید کل تغییرات را مشاهده کنید .

قدم 14:

همیشه می تواند ایده خوبی باشد که این لایه ها را در یک گروه قرار دهید . برای این کار تمامی لایه ها را انتخاب کنید و سپس Ctrl + G را فشار دهید .

هدر

قدم 15:

یک مستطیل در بالای کار همانند زیر بکشید .

قدم 16:

در نوار آپشن رنگ استروک را به #af9f8e تنظیم کنید .

قدم 17:

برای پر کردن آن ، یک گرادیان خطی از #d0c4b9 تا #a89c91 بکشید .

در زیر می توانید 100% تغییرات را مشاهده کنید .

نام سایت :

قدم 18 :

نام سایت را در سمت چپ طراحی اضافه کنید . در زیر می توانید نتیجه را مشاهده کنید . برروی متن دابل کلیک کنید و Drop Shadow را اضافه کنید . برای فونت آن هم می توانید از Sansation استفاده کنید .

منو

قدم 19   :

می توانید منو ها را در طرف دیگر نوار منو بکشید . می توانید از فونت Sansation 14 pt استفاده کنید . یک بار دیگر می توانید به تغییرات توجه فرمایید .

قدم 20 :

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

قدم 21:

ابزار Polygon را فعال کنید و گوشه هایش را به 3 تنظیم کنید .یک مثلث بکشید و آن را با #3d3123 پر کنید و Stroke: None .

Layer Style > Drop Shadow. را هم اضافه کنید  .

قدم 22:

اجازه دهید با اضافه کردن یک خط در زیر آن منوی فعال را مشخص تر کنیم . ابزار خط را فعال کنید و مقدار آن را 5 px برسانید. برای پر کردن آن از#f76b6a بدون Stroke استفاده کنید .

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

استفاده از کارکتر استایل

قدم 23:

اجازه بدهید که تنظیمات کارکتر را به صورت کارکتر استایل ذخیره کنیم. این ویژگی یک نسخه ساده شده از کارکتر استایل در InDesign است . برای ذخیره آن ، متن را فعال کرده و سپس بر روی آیکن ‘New Character Style’ کلیک کنید .

بر روی کارکتر استایل نیو دابل کلیک کنید و از تنظیماتی که در ادامه آمده است ، استفاده کنید .

قدم 24:

منو را انتخاب کنید و سپس برروی Character Style کلیک کنید تا آن را اجرا کنید . اگر یک علامت به اضافه در کنار  Character Style وجود داشت این بدین معنی است که کارکتر تنظیمات متفاوتی دارد . برای اینکه آن را تحت کنترل آورید ، بر روی آیکن نشانه گرد کلیک کنید.

قدم 25 :

قدم های مراحل قبل را تکرار کنید تا یک کارکتر استایل جدید برای منوی فعال درست کنید .

قدم 26:

خوب ، نکته استفاده از Character Styles چه بود ؟ Character Styles به ما کمک می کند تا تنظیمات کارکتر را مرکزی کنیم و در اختیار خود در آوریم. به سادگی می توانیم Character Style را به هر متنی که از آن استایل استفاده می کند ، ویرایش کنیم . در زیر می توانید مثال را مشاهده کنید . اگر نوع فونت درون کارکتر استایل منوی تاپ را ویرایش کنیم –از Normal به  Corbel ، تمامی منوهای عادی به Corbel تغییر پیدا می کنند .

قدم 27 :

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

قدم 28 :

با استفاده از Ctrl + D ناحیه انتخابی را حذف کنید .با اضافه کردن Gaussian Blur نرمش کنید با استفاده از , Filter > Blur > Gaussian Blur   .

نوار لغزنده :

قدم 29 :

یک شکل مستطیل با عرض 10 ستون ( مانند زیر ) بکشید .

برای پر کردن رنگ آن از کد #dfd1c2 استفاده کنید . برای استروک آن از #c8baac با سایز 10 pt استفاده کنید. بر روی نوار کناری جهتی کوچک کلیک کنید تا خط را مشاهده کنید و اطمینان حاصل کنید که Align Inside انتخاب شده است .

قدم 30 :

یک تصویر در بالای فریم قرار دهید . آن را با فشار دادن کلید های Ctrl + Alt + G به Clipping Mask تبدیل کنید .به طور اتوماتیک تصویر درون نوار فریم می رود . اگر نیاز بود ، می توانید بدون اینکه بر روی فریم اثر بگذارید ، تصویر را جابجا کنید و یا تغییر اندازه دهید .

قدم 31:

یک مستطیل دیگر در پشت اسلایدر با همان رنگ بکشید . اطمینان حاصل کنید که به خط راهنما چسبیده باشد . با استفاده از pixel pattern از PSDfreemium ، Layer Style > Pattern Overlay را اضافه کنید . شفافیت آن را کم کنید تا دقیق تر شود .

 

قدم 32

یک شکل مستطیل در بالای شکل بکشید و آن را با  #b3aca5 و بدون استروک پر کنید . Ctrl + T را بزنید و سپس آن را به اندازه 45 درجه بچرخانید . لایه شکل را به Clipping Mask تبدیل کنید .

قدم 33:

شکل را دابلیکیت کنید و تغییر اندازه دهید . رنگش را با یک رنگ تیره تر پر کنید . لایه شکل را به Clipping Mask تبدیل کنید .

قدم 34:

همین مراحل را تکرار کنید تا یک پیکان دیگر در سمت دیگر بکشید .

قدم 35:

بر روی فریم اسلاید کنترل کلیک کنید تا یک ناحیه انتخابی درست کنید . یک لایه جدید درست کنید و آن را به Clipping Mask تبدیل کنید . با رنگ مشکی آن را پر کنید .

قدم 36:

با استفاده از کلید های (Ctrl + D) آن را از حالت انتخاب خارج کنید و سپس آن را به کمک ابزار Gaussian Blur نرم کنید .

 

همچنین می توانید درصورتی که مایل باشید شفافیت سایه را هم کم کنید  .

قدم 37 :

یک مستطیل با گوشه های گرد در گوشه نوار لغزنده بکشید و آن را #c8baac پر کنید .

قدم 38 :

یک دایره درون شکل بکشید . استروک آن را به مشکی تنظیم کنید و سایزش را به 1 pt و Fill را حذف  کنید .

قدم 39 :

با استفاده از ابزار Path Selection مسیر دایره را انتخاب کنید . Shift + Alt-drag مسیر را اجرا کنید تا آن را دابلیکیت کنید.

همین کار را تکرار کنید تا دایره های بیشتری را بکشید .

قدم 40 :

یکی از مسیر های دایره را انتخاب کنید . Ctrl + Shift + J را فشار دهید تا آن را به یک لایه جدید برش دهد  .

قدم 41:

در نوار آپشن ، Stroke را حذف کنید و Fill را به گرادیان شعاعی از #e38989 تا #bb5c5c تغییر دهید . Layer Style > Outer Glow و همچنین Drop Shadow را هم اضافه کنید .

 

قدم 42:

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

قدم 43:

با استفاده از (Ctrl + D) آن را از حالت انتخاب خارج کنید و با استفاده از Gaussian Blur آن را نرم کنید .

پشت زمینه پایینی

قدم 44:

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

مثل همیشه ، در مورد مکان بسیار دقت کنید . می خواهیم تمامی کار را مشخص کنیم.

Layer Style > Pattern Overlay را هم اضافه کنید .

در زیر نتیجه این تغییرات را مشاهده می کنید .

قدم 45:

سطح بالایی آن را با استفاده از ابزار Rectangular Marquee انتخاب کنید .

قدم 46:

یک لایه جدید درست کنید ، آن را در پشت شکل قرار دهید . Fill  آن را با مشکی پر کنید . Ctrl + T را بزنید ، راست کلیک کنید و Perspective را انتخاب کنید .

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

یک بار دیگر راست کلیک کنید و Scale را انتخاب کنید . دسته بالایی را پایین بکشید .

راست کلیک کنید و Warp را انتخاب کنید . بخش درونی را به سمت راست و چپ بکشید .

به کمک Gaussian Blur آن را ملایم کنید .

شفافیت آن را به 20% کاهش دهید  .

قدم 47:

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

 

به اندازه 10 پیکسل از چپ قاصله بگیرید . راست و قسمت بالای پشت زمینه . فاصله گرفتن و پیدا کردن فاصله  باید ساده باشد چرا که در قدم های قبلی راهنما را مشخص کردیم . Layer Style > Outer Glow را اضافه کنید .

قدم 48  :

یک راهنمای دیگر به اندازه 25 پیکسل از بالای شکل اضافه  کنید .

عنوان قسمت

قدم 49 :

یک کارکتر استایل جدید برای صفحه عنوان و توضحاتش اضافه کنید .

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

قدم 50 :

یک خط در زیر توضیحات سایت به اندازه 5 پیکسل بکشید و آن را با Fill  #938270  و Stroke: None کامل کنید .

پست بلاگ

قدم 51 :

یک کارکتر استایل دیگر برای عنوان پست درست کنید .

قدم 52 :

یک عنوان پست اضافه کنید و کارکتر استایل های قبلی را اجرا کنید .

قدم 53:

یک شکل مستطیل با عرض 4 ستون در زیر عنوان بکشید . برای Fill آن از سفید استفاده کنید و برای استروک آن از #bebebe استفاده کنید . Layer Style > Stroke را اضافه کنید .

قدم 54:

یک تصویر در بالای شکل بچسبانید . آن را با فشردن  (Ctrl + Alt + G). به  Clipping Mask تبدیل کنید .

قدم 55:

یک مستطیل گرد با Fill : #8e8380 و Stroke: None بکشید . آن را به Clipping Mask تبدیل کنید .

قدم 56:

یک Character Styles برای فرا داده های  بلاگ درست کنید .

قدم 57:

متن فرا داده را در بالای شکل قرار دهید و Character Style را که قبلا داشتیم اجرا کنید .

قدم 58 :

ابزار تایپ را فعال کنید و click-drag کنید تا یک جعبه متن درست شود . پهنای آن را 4 ستون در نظر بگیرید . Type > Paste Lorem Ipsum را کلیک کنید تا به وسیله Lorem Ipsum فوتوشاپ که به صورت خودکار است پر کنید .

قدم 59:

یک Paragraph Style برای محتوای کارکتر درست کنید . بر روی آیکن جدید در پنل پاراگراف استایل کلیک کنید .

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

قدم 60 :

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

برای طراحی وب ، Hyphenation را غیر فعال کنید .

قدم 61:

یک مستطیل گوشه گرد با Fill: #8e8380 و Stroke: None بکشید . Layer Style > Pattern Overla را اجرا کنید و برای سازگاری از الگویی مشابه برای اسلایدر استفاده کنید .

قدم 62 :

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

قدم 63:

دکمه قبلی برای حالت عادی بود . آن را دابلیکیت می کنیم و رنگش را به #f76b6a تغییر می دهیم . همچنین نوع برچسب را هم بولد کنید .

قدم 64:

پست را در یک گروه قرار دهید و کلید های کنترل+J را فشار دهید تا آن را دابلیکیت کنید . Alt-drag را فشار دهید تا گروه را هم دابلیکیت کنید .

همین مراحل را تکرار کنید تا تعداد پست های بیشتری درست کنید . به یاد داشته باشید که تصویر و عنوان هر پست را تغییر دهید .

قدم 65:

دکمه Read More را دابلیکیت کنید و برچسب را به شماره تغییر دهید . ما از این برای راهنمای صفحه ها استفاده خواهیم کرد .به یاد داشته باشید که یکی از دکمه ها را برای حالت شناور تنظیم کنید .

قدم66: فوتر

خوب برویم سراغ کار  فوتر . یک عنوان ویجت و توضیحاتش را اضافه کنید .

قدم 67 :

لینک اضافه کنید و یک خط 1 پیکسل در زیر آن بکشید . Fill: None و Stroke: #8e8380 را تنظیم کنید .

قدم 68 :

بر روی دکمه More Options کلیک کرده و خط dashed را انتخاب کنید .

قدم 69 :

لینکهای بیشتری به ویجت اضافه کنید .

قدم 70 :

ویجت را دابلیکیت کنید .

قدم 71:

همچنین باید شرایط شناور را هم اضافه کنیم . یکی از لینک ها را به صورت بولد درآورید .

در زیر لینک فعال خط بکشید ، یک خط با اندازه 5پیکسل اضافه کنید . رنگ آن را به #f76b6a تنظیم کنید . برای سازگاری بیشتر ، ظاهر لینک شبیه منوی فعال در نوار منو است .

قدم 72 :

یک مستطیل دیگر در ناحیه پایین بکشید . Fill آن را به #3d3123 تنظیم کنید  .

اطلاعات مربوط به قسمت پایین ( فوتر )

قدم 73  :

به کمک ابزار تایپ قسمت  اطلاعات فوتر را اضافه کنید . به آن یک Drop Shadow تیره بدهید تا نسبت به پشت زمینه دارای کانتراست مناسبی باشد .

شبکه اجتماعی

قدم 74:

مقداری آیکن های رسانه های اجتماعی از Daniele Selvitella اضافه کنید . Layer Style > Outer Glow را اضافه کنید .

قدم 75 :

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

قدم 76:

آیکن نشانگر فری هند را بگیرید و کوچکترین نشانگر دست را در بالای لینک فعال یا بالای آن قرار دهید .

نتیجه نهایی :

این نتیجه نهایی ماست . مشاهده کردید که نسخه جدید و آخر فوتوشاپ امکانات و ابزار های بسیار زیادی را در اختیار شما قرار می دهد تا بتوانید هرچه بهتر کارتان را انجام دهید . به خصوص طراحان که کارشان با این نسخه آسانتر شده است .ویژگی های  Character Styles و Paragraph Styles پیشرفتهای واضحی برای هر طراحی محسوب می شود تا با رضایت بیشتری با فوتوشاپ کار کنند .

 از اینجا می توانید فایل های منبع را دانلود کنید

از اینحا می توانید به صورت دمو کار را مشاهده کنید

در پایان منتظر نظرات ، انتقادات و پیشنهادات شما دوستان هستیم