طراحی بدنه قالب در فتوشاپ (بخش 1) + فیلم آموزشی

body design photoshop1

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

در این جلسه از چه ابزارهایی استفاده کردیم؟

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

مقاله پیشنهادیمعرفی سایت flaticons – دانلود آیکون های کاملا رایگان!

در مقاله بالا میتونید با سایت فلت آیکون بیشتر آشنا بشید و همچنین دارای ویدئوی آموزشی هم هست.

بدنه سایت
فایل طراحی بدنه سایت در فتوشاپ

 در این جلسه چه کارهایی انجام میدیم؟

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

در مرحله دوم با ابزار Rectabgle یک باکس برای مقالات طراحی کردم و داخل باکس یک تصویر گذاشتم (تصویر و میتونید از سایت های مختلف دانلود کنید ولی من در این آموزش از سایت https://dribbble.com/ استفاده کردم.) پس از یک ابزارک متن برای عنوان مقالات و باز هم از ابزار متن برای توضیحات کوتاه استفاده کردم.

چون باکس ها باید شبیه به هم باشن دیکه جدا جدا لازم نیست هر باکس رو طراحی کنید، فقط کافیه که از باکس طراحی شده با کلید های ترکیبی Ctrl + J یک کپی تهیه کنید و در جای مورد نظر قرار دهید.

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

ویدئوی آموزش طراحی بدنه سایت در فتوشاپ

طراحی سربرگ قالب در فتوشاپ + فیلم آموزشی

header design in photoshop

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

نکته مهم

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

طراحی سربرگ قالب در فتوشاپ

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

هدر قالب طراحی شده
سربرگی که در فتوشاپ طراحی کردیم

تصویر بالا هدر یا سربرگی هستش که من خودم طراحی کردم و همینجوری به ذهنم رسید و همچین چیزی رو پیاده کنم، و در زیر هم میخوام تمامی بخش ها رو که طراحی کردم رو شرح بدم.

مراحل انجام کار به چه صورت است؟

کلا از ابزارک Rectangle یا همون ابزارک مربع زیاد توی طراحی قالب استفاده میشهو بسیار ابزارک پر کاربری توی نرم افزار فتوشاپ است، در اولین مرحله لوگوی سایت رو سمت چپ قرار دادم و منوی سایت رو در وسط سربرگ قرار دادم و در آخری بخش هم یک دکمه در سمت راست هدر قرار دادم (طبق طرحی که رو کاغذ طراحی کردم).

در مرحله دوم هم با ابزارک Rectangle یک شیپ ایجاد کردم برای جعبه جستجوی وب سایت، که بارنگ مشخص شده توشو پر کردم و از سایت Flaticon هم یک آیکون جستجو انتخاب و دانلود کردم و در داخل جعبه جستجو قرار دادم و یک متنی هم برای باکس جستجو نوشتم.

در مرحله سوم باز هم با ابزارک Rectangle یک شیب با رنگ سفید و یک سایه ایجاد کردم و میخوام که توش یک متنی رو بنویسیم، بعد از این که شیب رو ایجاد کردم با ابزارک متن یک متنی رو به عنوان مثال داخل جعبه قرار دادم و شما هم میتونید به سایت http://loremsaz.com/ برید و متن های دلخواه خودتون رو کپی و در محتوا قرار بدید.

فیلم آموزشی طراحی سربرگ سایت در فتوشاپ

ساخت طرح اولیه قالب وردپرس رو کاغذ (Wireframe)

wireframe design

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

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

رسم wireframe
تصویر نهایی

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

منظور از رسم روی کاغذ (Wireframe) چیه؟

همانطور گه از اسمش پیداست، منظور از وایر فریم یا Wireframe اینه که ما طرح اولیه قالب رو یا سایتی که میخواهیم طراحی کنیم رو در یک کاغذ یا با ابزارهای آنلاین یا به نحوی توی نورم افزار های دیگه پیاده و رسم کنیم تا با همین الگو طراحی قالب وردپرس در فتوشاپ رو شروع کنیم و حضور ذهنی قوی از طرح داشته باشیم.

مثال : 

هر طرحی یا هر بنایی یا هر چیزی که طراحی و درست میشه اولش بر روی یک کاغذ بوده و سپس تبدیل شده به یک با یا هر چیزی، اگر شما یک برج رو در نظر بگیرید قبل از هر کاری باید نقشه برج کشیده بشه تا معمار بتونه بر اساس اون نقشه برج رو درست کنه و این نقشه هم باید توسط مهندسان مجرب رسم بشه.

چرا باید طرح رو روی کاغذ بکشیم؟

سوال اینه که چرا ما باید طرح رو اول هز همه رو کاغذ پیاده کنیم؟ سوال بجا و خوبیه، دلیل این که ما طرح Wireframe رو میکشیم اینه که کلا یک طرح و یک قالب و ساختار کلی از قالبی که میخواهیم طراحی کنیم داشته باشیم، اگر شما میخواهید یک طراح قالب شوید اولین کاری که می کنید اینه که باید یک طرح اولیه به مشتری بدید و بعد رضایت باید پروژه رو شروع کنید. این طرح نامش هست Wireframe.

نمونه طرح روی کاغذ
نمونه طرح wirefram قالب

آیا باید حتما رو کاغذ بکشیم؟

شاید من زیاد گفتم که طرح روی کاغذ، شاید فکر کنید که حتما باید روی کاغذ بکشید! نه دوستان عزیز من این طور نیست و اتفاقا ابزارهای آنلاین (همانند https://www.mockflow.com ) بسیار زیادی وجود دارد که میتوانید این کار رو انجام بدید و حتی میتوانید از نرم افزار Paint در ویندوز استفاده کنید و یا از نرم افزار هایی همانند فتوشاپ و … .

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

ویدئوی آموزش طراحی Wireframe

جمع بندی

یک تصویر از طرح اولیه برای هر کاری لازمه و باید حتما یک طرح یا ماکت از طرح بسازی، در طراحی قالب وردپرس هم این کار Wireframe نام داره و منظور اینه که یک طرح اولیه از قالبی که میخواهیم طراحی کنیم رو رو یک کاغذ رسم میکنیم و سپس با استفاده از این طرح قالب مورد نظر خودمون رو توی فتوشاپ یا هر نرم افزار دیگه ای تبدیل به قالب PSD میکنیم.