فوتوشاپ

مدرسه وردپرس:طراحی قالب های وردپرس با فوتوشاپ(درس12)

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

مقدمه

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

از جمله مباحثی که در آینده آموزش داده میشه عبارتند از:

  • آموزش ابتدایی کد های HTML و CSS
  • کاربرد HTML و CSSدر وردپرس
  • طراحی قالب های وردپرس بدون کد
  • شخصی سازی قالب های وردپرس با css
  • قدم به قدم با طراحی فوتر،هیدر و….
  • و…

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

خب شروع درس دوازدهم: طراحی قالب وردپرس با فوتوشاپ

1)مرحله اول : ایجاد پروژه

ابتدا پروزه جدیدی رو در فوتوشاپ باز می کنید و اندازه ی پروژتونو طبق شکل زیر نتظیم می کنید.زنگ پس زمینه رو روی #dcdcdc  تنظیم کنید.(البته این رنگ ها دلخواهن.ولی پروژه نهایی آموزش ما با این رنگ تنظیم شده)

1EDIT

 

2)مرحله دوم : رسم باکس های اصلی

در مرحله بعدی  باید از ابزار Rectangle یا مستطیل خودمون استفاده کنیم.هر کدوم از مستطیل های ایجاد شده رنگ و ابعاد خاصی بهشون اضافه شده.این ابعاد استاندارد در تهیه سایته.ابعاد و زنگ ها در شکل زیر مشخص شده:

2EDIT

 

3)مرحله سوم : رسم جزئیات

خب شما تنه ی کارو الان ایجاد کردید و نوبت می رسه و ایجاد بخش های موردنظرتون روی تنه…در واقع الان می خوایم تنه رو آرایش کنیم.

در این بخش شما قصد داریم بالای سایت رو ادیت کنیم.در واقع هیدر شما با این بخش طراحی میشه.خب برای این کار باید از ابزار تایپ استفاده کنید.این ابزار با نام T در منوی کناری فوتوشاپتون مشخص شده.(درفوتوشاپ CS5 و CS6 قطعا در منوی کناری قرار داره).در این مرحله  عنوان سایت و نام طراحشو اضافه می کنیم .ابتدا “WordPress Theme” و پس نام طراح اون  به صورت ““design by trendyTUTS” قرار داده شده.کافیه شما لایه ی جدیدی رو باز کنید و به ترتیب در بخش های  DROP SHADOW ،GRADIENT و STROKE تنظیمات رو عینا مطابق شکل های زیر اعمال کنید.

3EDIT

4EDIT

5EDIT

6EDIT

 

4)تنظیم استایل هدر

برای خود قالب هم (ونه بخش بالایی) یه لایه ی جدید باز کنید واستایل لایه رو طبق شکل های زیر تنظیم کنید:

7EDIT

 

8EDIT

5)تنظیمات منو قسمت هدر

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

9EDIT

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

6)مرحله ششم

ساده ترین بخش کار ما قسمت نمایش  سایته  یا FEATUREA AREA که کاملا دلخواهه.دراین پروژه که  تم طراحی شده مخصوص فروش قالب هستش  در فضای سمت راست تعدادی عکس و نمونه کار و سمت چپ توضیحات تبلیغاتی به دلخواه قرار داده شده.جزییاتشو در شکل زیر میبینید.فونت به کاربرده شده و سایز ها  مشخصه:

10-EDIT

 

7)مرحله هفتم

بخش بعدی ما زیر قسمت قبلی یعنی محتوای سایت هست.برای این کار از ابزار RECTANGLE استفاده شده.

11EDIT

 

8)مرحله هشتم

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

12EDIT

9)مرحله نهم

برای ایجاد این سایه از یه لایه ی ماسک ایجاد کید.توضیحات در شکل زیر:

13EDIT

10)مرحله دهم

سپس از بازار GRADIENT استفاده می کنیم.توجه داشته باشید که پالت شما باید روی حالت سیاه سفید تنظیم باشه.این قسمتو براتون مسخص کردم و قرار دادم:

14EDIT 11)مرحله یازدهم : در نهایت باید شما شکل زیر رو داشته باشید:

15EDIT

12)مرحله دوازدهم

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

16EDIT

 

 

13)مرحله سیزدهم

اسپس برای ادامه کار ابتدا مسیر زیر رو در فوتوشاپ طی کنید:

Filter>Blur>Gaussian Blur

در قسمت gaussian blur  سایز 3.5 پیکسل رو انتخاب کنید

این تنه ی محتوای مارو می سازه.نتیجه باید این شکلی باشه:

17EDIT

 

14)مرحله چهاردهم

حالا میخوام در بخش محتوا مطلب دلخواهمو درج کنم.محتوا دلخواهه و هرجور که دوست دارید بنویسید!

خب با ابزار Rectangle شکلی رو میخوام ایجاد کنم که ابعادش به صورت  291×285 هست .بعدش لایه ی استایل ر ایجاد کنید و طبق  شکل اونارو تنظیم کنید:

18EDIT

 

19EDIT

 

20EDIT

 

گام آخر:

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

21EDIT

 

 

………………………………………………………………………………………………

شاید بپرسید پس تکلیف فوتر چی میشه!؟

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

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

البته این یه آموزش فوق ابتدایی هست و تا حرفه ای شدن راه بسیاری باقیست!

بیگ تم مرجع آموزش وردپرس ، قالب وردپرس و افزونه وردپرس

 

دیدگاهتان را بنویسید

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