طراحی یک قالب بلاگ زیبا در فوتوشاپ CS6

طراحی یک قالب بلاگ زیبا در فوتوشاپ CS6
  • 1391/11/18
  • مهرداد ارجمندی
  • 6

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

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

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

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

دیدگاه خود را وارد کنید
تعداد دیدگاه ها : 6 دیدگاه
  1. خیلی ممنون
    ولی از بس که پست طولانی بود و عکس داشت ، بیخیالش شدم D:
    ولی در هر صورت ممنون [گل]

  2. سلام خسته نباشید

    عالی و بیسته تا اخر خوندم و بهره بردم شدید تشکر از اینجور مطالب بیشتر بذارید
    عاشق وب و مخلفاتشم

  3. سلام.
    خداقوت از این همه انرژی وکار.ممنون که وقت گذاشتید همشهری.یه سوال اینکه اونایی که جزء مواد اولیه کاربودن وقبل از توضیحات گذاشتید رو باید چطوری استفاده واضافه کرد؟؟بازم ممنون.

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

  5. درود
    وبسایت شخصی هم طراحی میکنید ؟
    چیزی شبیه این
    http://www.pezeshkashna.com/

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *