در این آموزش می خواهیم به شما نشان دهیم که چگونه می توانید به کمک نسخه آخر فوتوشاپ یک طرح بلاگ زیبا و تمیز درست کنید . در این آموزش می خواهیم از موارد جدید شامل 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.

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

مرحله اول :

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

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

قدم ۲ :

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

قدم ۳:

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

قدم ۴:

یک خط راهنمای عمودی دیگر در موقعیت ۱۵۰ px, 1095 px و ۱۱۳۰ px بکشید .

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

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

قدم ۵ :

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

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

 

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

قدم۶:

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

 

بر روی رنگ دوم کلیک  کنید ، تا #۹۴۸۳۷۱ را انتخاب کنید .

قدم ۷ :

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

قدم ۸ :

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

قدم ۹ :

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

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

قدم ۱۰ :

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

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

قدم ۱۱ :

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

قدم ۱۲ :

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

قدم ۱۳:

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

قدم ۱۴:

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

هدر

قدم ۱۵:

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

قدم ۱۶:

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

قدم ۱۷:

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

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

نام سایت :

قدم ۱۸ :

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

منو

قدم ۱۹   :

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

قدم ۲۰ :

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

قدم ۲۱:

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

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

قدم ۲۲:

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

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

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

قدم ۲۳:

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

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

قدم ۲۴:

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

قدم ۲۵ :

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

قدم ۲۶:

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

قدم ۲۷ :

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

قدم ۲۸ :

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

نوار لغزنده :

قدم ۲۹ :

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

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

قدم ۳۰ :

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

قدم ۳۱:

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

 

قدم ۳۲

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

قدم ۳۳:

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

قدم ۳۴:

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

قدم ۳۵:

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

قدم ۳۶:

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

 

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

قدم ۳۷ :

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

قدم ۳۸ :

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

قدم ۳۹ :

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

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

قدم ۴۰ :

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

قدم ۴۱:

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

 

قدم ۴۲:

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

قدم ۴۳:

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

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

قدم ۴۴:

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

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

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

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

قدم ۴۵:

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

قدم ۴۶:

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

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

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

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

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

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

قدم ۴۷:

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

 

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

قدم ۴۸  :

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

عنوان قسمت

قدم ۴۹ :

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

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

قدم ۵۰ :

یک خط در زیر توضیحات سایت به اندازه ۵ پیکسل بکشید و آن را با Fill  #۹۳۸۲۷۰  و Stroke: None کامل کنید .

پست بلاگ

قدم ۵۱ :

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

قدم ۵۲ :

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

قدم ۵۳:

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

قدم ۵۴:

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

قدم ۵۵:

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

قدم ۵۶:

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

قدم ۵۷:

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

قدم ۵۸ :

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

قدم ۵۹:

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

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

قدم ۶۰ :

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

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

قدم ۶۱:

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

قدم ۶۲ :

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

قدم ۶۳:

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

قدم ۶۴:

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

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

قدم ۶۵:

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

قدم۶۶: فوتر

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

قدم ۶۷ :

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

قدم ۶۸ :

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

قدم ۶۹ :

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

قدم ۷۰ :

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

قدم ۷۱:

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

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

قدم ۷۲ :

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

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

قدم ۷۳  :

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

شبکه اجتماعی

قدم ۷۴:

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

قدم ۷۵ :

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

قدم ۷۶:

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

نتیجه نهایی :

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

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

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

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: