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

[moji5]

قدیمی‌ترها که از ما سوال می‌کردند می‌خواهی چکاره شوی؟ می‌گفتیم پزشک یا خلبان و از این دست؛ امروزه روز اگر از کودکی سوال کنی که می‌خواهی چکاره شوی، در میان جواب‌هایش اگر شنیدید که گفت “طراح وب سایت” تعجب نکنید!

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

در بخش اول می‌بایست وب سایت شما از جهت شکل و ظاهر بسته به نوع محتوایی آن طراحی گرافیکی شود. ابتدا ساختار اصلی آن را بر روی کاغذ ترسیم کنید تا یک شمای کلی از طرح در دست داشته باشید. این مطلب وب سایت ittutorial (http://www.ittutorial.ir/) با عنوان اصول و پیش نیازهای طراحی (http://www.ittutorial.ir/?p=458) وب سایت می‌تواند پیش مقدمه‌ی ِ خوبی برای خواندن مطلب آموزشی ذیل باشد.

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

http://pariyana.com/wp-content/uploads/2009/12/webthemepariyanaint.jpg


در این مقاله، در مرحله اول، به نحوه طراحی یک قالب وبسایت در فتوشاپ بصورت قدم‌به‌قدم و در مرحله دوم، کدنویسی به زبان html , css برای قالب طراحی شده را بررسی می‌کنیم. بدیهی‌ست مراحل تکراری پروژه جزء این مقاله نمی‌باشد و فقط به بیان تکنیک‌ها و روش‌های موجود می‌پردازیم. در پایان فایل پی‌اس‌دی قالب در اختیار کاربران قرار می‌گیرد. درصورت استفاده از همین قالب و ایجاد تغییرات جزئی، ذکر نام طراح قالب الزامیست.
روز اول : طراحی قالب وبسایت در فتوشاپ


http://pariyana.com/wp-content/uploads/2009/12/1.jpg

همانطور که در عکس بالا می‌بینید، چهار مرحله پیش رو داریم.
مرحله اول: طراحی عکس پس‌زمینه
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
مرحله سوم: طراحی سرصفحه
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله اول: طراحی عکس پس‌زمینه

برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها می‌پردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
http://pariyana.com/wp-content/uploads/2009/12/2.jpg
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
http://pariyana.com/wp-content/uploads/2009/12/3.jpg
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
http://pariyana.com/wp-content/uploads/2009/12/4.jpg
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره می‌شود و می‌توانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، می‌توانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پس‌زمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن می‌تواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکس‌های زیر اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/5.jpg
http://pariyana.com/wp-content/uploads/2009/12/6.jpg
http://pariyana.com/wp-content/uploads/2009/12/7.jpg
همانطور که در عکس‌ها می‌بینید، کد رنگ‌های استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده می‌کنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.
http://pariyana.com/wp-content/uploads/2009/12/8.jpg
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکت‌های زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/11.jpg
http://pariyana.com/wp-content/uploads/2009/12/9.jpg
http://pariyana.com/wp-content/uploads/2009/12/10.jpg
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/11-2.jpg
http://pariyana.com/wp-content/uploads/2009/12/12.jpg
http://pariyana.com/wp-content/uploads/2009/12/13.jpg
http://pariyana.com/wp-content/uploads/2009/12/14.jpg
http://pariyana.com/wp-content/uploads/2009/12/15.jpg
در این مرحله می‌توانید منو‌های مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متن‌ها، منو‌ها و فرم ها (جعبه جستجو) با استفاده از اچ‌تی‌ام‌ال ایجاد می‌شوند و نیازی به ایجاد در فتوشاپ نیست!
http://pariyana.com/wp-content/uploads/2009/12/16.jpg
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله سوم: طراحی سرصفحه
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/17.jpg
http://pariyana.com/wp-content/uploads/2009/12/18.jpg
http://pariyana.com/wp-content/uploads/2009/12/19.jpg
http://pariyana.com/wp-content/uploads/2009/12/20.jpg
http://pariyana.com/wp-content/uploads/2009/12/21.jpg
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.
http://pariyana.com/wp-content/uploads/2009/12/22.jpg
مطابق آنچه در قبل گفته شد، می‌توانید عکس و متن‌ها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکان‌های اجزای صفحه، برای کد نوشتن به زبان اچ‌تی‌ام‌ال‌ است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.
http://pariyana.com/wp-content/uploads/2009/12/23.jpg
برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.
http://pariyana.com/wp-content/uploads/2009/12/24.jpg
http://pariyana.com/wp-content/uploads/2009/12/25.jpg
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی می‌توانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که می‌بینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل می‌دهد.
http://pariyana.com/wp-content/uploads/2009/12/26.jpg
لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی‌ در زبان اچ‌تی‌ام‌ال هست، لذا طراحی این جدول‌ها در “روز دوم: کد نویسی به زبان اچ‌تی‌ام‌ال برای قالب وبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترین راه‌ها، برای طراحی یک قالب مطلوب استفاده شود. در ادامه این سری از مقالات با متد‌های پیشرفته‌تر و جذاب‌تر آشنا خواهید شد که لازمه آن، مسلط بودن بر مباحث این مقاله هست.
مشاهده قالب در ابعاد بزرگ (http://pariyana.com/wp-content/uploads/2009/12/webtemplate-pariyana.com_.jpg)
http://pariyana.com/wp-content/plugins/wp-downloadmanager/images/rar.gif قالب نهایی کار(PSD) (http://pariyana.com/download/9/) (328 bytes, 136 hits)