amirsport
Member
اغلب گرافیست‌های وب از برنامه فتوشاپ استفاده می‌کنند. ما نیز این مطلب آموزشی که آماده سازی یک قالب psd وب بود را با برنامه فتوشاپ طراحی کردیم و در پایین مرحله به مرحله به شما مراحل کار را نشان خواهیم داد.
روز اول : طراحی قالب وبسایت در فتوشاپ
همانطور که در عکس بالا می‌بینید، چهار مرحله پیش رو داریم.
مرحله اول: طراحی عکس پس‌زمینه
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
مرحله سوم: طراحی سرصفحه
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله اول: طراحی عکس پس‌زمینه
برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها می‌پردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره می‌شود و می‌توانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، می‌توانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پس‌زمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن می‌تواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکس‌های زیر اعمال کنید.
همانطور که در عکس‌ها می‌بینید، کد رنگ‌های استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده می‌کنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکت‌های زیر را اعمال کنید.
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
در این مرحله می‌توانید منو‌های مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متن‌ها، منو‌ها و فرم ها (جعبه جستجو) با استفاده از اچ‌تی‌ام‌ال ایجاد می‌شوند و نیازی به ایجاد در فتوشاپ نیست!
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله سوم: طراحی سرصفحه
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.
مطابق آنچه در قبل گفته شد، می‌توانید عکس و متن‌ها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکان‌های اجزای صفحه، برای کد نوشتن به زبان اچ‌تی‌ام‌ال است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.
برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی می‌توانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که می‌بینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل می‌دهد.
لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی در زبان اچ‌تی‌ام‌ال هست، لذا طراحی این جدول‌ها در “روز دوم: کد نویسی به زبان اچ‌تی‌ام‌ال برای قالب وبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترین راه‌ها، برای طراحی یک قالب مطلوب استفاده شود.
در این مقاله، در مرحله اول، به نحوه طراحی یک قالب وبسایت در فتوشاپ بصورت قدم‌به‌قدم و در مرحله دوم، کدنویسی به زبان html , css برای قالب طراحی شده را بررسی می‌کنیم. بدیهی‌ست مراحل تکراری پروژه جزء این مقاله نمی‌باشد و فقط به بیان تکنیک‌ها و روش‌های موجود می‌پردازیم. در پایان فایل پی‌اس‌دی قالب در اختیار کاربران قرار می‌گیرد. درصورت استفاده از همین قالب و ایجاد تغییرات جزئی، ذکر نام طراح قالب الزامیست.روز اول : طراحی قالب وبسایت در فتوشاپ
همانطور که در عکس بالا می‌بینید، چهار مرحله پیش رو داریم.
مرحله اول: طراحی عکس پس‌زمینه
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
مرحله سوم: طراحی سرصفحه
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله اول: طراحی عکس پس‌زمینه
برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها می‌پردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره می‌شود و می‌توانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، می‌توانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پس‌زمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن می‌تواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکس‌های زیر اعمال کنید.
همانطور که در عکس‌ها می‌بینید، کد رنگ‌های استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده می‌کنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکت‌های زیر را اعمال کنید.
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
در این مرحله می‌توانید منو‌های مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متن‌ها، منو‌ها و فرم ها (جعبه جستجو) با استفاده از اچ‌تی‌ام‌ال ایجاد می‌شوند و نیازی به ایجاد در فتوشاپ نیست!
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله سوم: طراحی سرصفحه
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.
مطابق آنچه در قبل گفته شد، می‌توانید عکس و متن‌ها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکان‌های اجزای صفحه، برای کد نوشتن به زبان اچ‌تی‌ام‌ال است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.
برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی می‌توانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که می‌بینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل می‌دهد.
لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی در زبان اچ‌تی‌ام‌ال هست، لذا طراحی این جدول‌ها در “روز دوم: کد نویسی به زبان اچ‌تی‌ام‌ال برای قالب وبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترین راه‌ها، برای طراحی یک قالب مطلوب استفاده شود.
بزن اون لایک (تشکر) قشنگرو.
