کد خبر : 10441 تاریخ انتشار : جمعه 20 بهمن 1391 - 19:52

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

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

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

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

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

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

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

قدم ۲ :

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

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

قدم ۳:

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

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

قدم ۴:

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

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

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

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

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

قدم ۵ :

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

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

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

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

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

قدم۶:

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

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

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

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

قدم ۷ :

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

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

قدم ۸ :

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

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

قدم ۹ :

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

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

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

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

قدم ۱۰ :

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

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

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

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

قدم ۱۱ :

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

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

قدم ۱۲ :

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

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

قدم ۱۳:

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

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

قدم ۱۴:

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

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

هدر

قدم ۱۵:

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

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

قدم ۱۶:

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

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

قدم ۱۷:

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

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

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

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

نام سایت :

قدم ۱۸ :

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

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

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

منو

قدم ۱۹   :

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

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

قدم ۲۰ :

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

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

قدم ۲۱:

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

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

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

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

قدم ۲۲:

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

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

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

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

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

قدم ۲۳:

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

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

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

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

قدم ۲۴:

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

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

قدم ۲۵ :

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

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

قدم ۲۶:

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

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

قدم ۲۷ :

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

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

قدم ۲۸ :

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

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

نوار لغزنده :

قدم ۲۹ :

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

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

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

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

قدم ۳۰ :

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

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

قدم ۳۱:

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

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

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

قدم ۳۲

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

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

قدم ۳۳:

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

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

قدم ۳۴:

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

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

قدم ۳۵:

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

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

قدم ۳۶:

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

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

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

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

قدم ۳۷ :

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

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

قدم ۳۸ :

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

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

قدم ۳۹ :

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

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

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

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

قدم ۴۰ :

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

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

قدم ۴۱:

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

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

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

قدم ۴۲:

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

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

قدم ۴۳:

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

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

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

قدم ۴۴:

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

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

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

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

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

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

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

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

قدم ۴۵:

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

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

قدم ۴۶:

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

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

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

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

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

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

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

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

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

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

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

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

قدم ۴۷:

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

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

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

قدم ۴۸  :

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

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

عنوان قسمت

قدم ۴۹ :

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

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

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

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

قدم ۵۰ :

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

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

پست بلاگ

قدم ۵۱ :

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

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

قدم ۵۲ :

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

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

قدم ۵۳:

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

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

قدم ۵۴:

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

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

قدم ۵۵:

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

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

قدم ۵۶:

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

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

قدم ۵۷:

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

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

قدم ۵۸ :

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

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

قدم ۵۹:

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

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

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

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

قدم ۶۰ :

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

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

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

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

قدم ۶۱:

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

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

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

قدم ۶۲ :

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

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

قدم ۶۳:

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

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

قدم ۶۴:

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

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

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

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

قدم ۶۵:

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

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

قدم۶۶: فوتر

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

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

قدم ۶۷ :

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

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

قدم ۶۸ :

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

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

قدم ۶۹ :

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

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

قدم ۷۰ :

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

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

قدم ۷۱:

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

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

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

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

قدم ۷۲ :

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

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

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

قدم ۷۳  :

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

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

شبکه اجتماعی

قدم ۷۴:

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

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

قدم ۷۵ :

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

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

قدم ۷۶:

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

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

نتیجه نهایی :

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

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

دسته بندی : مجله خبری بازدید 219 بار
دیدگاهتان را بنویسید
css.php