وبلاگ داتیس دیزاین

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

آماده کردن قالب

من در این آموزش از همون قالبی که در آموزشهای قبلی استفاده کردم، استفاده میکنم. شما باید برای آماده کردن قالب با ابزاری به نام Slice آشنا باشید و بتونید با اون راحت کار کنید، روش کار این ابزار بدین صورته که شما باید قالب خودتون رو به قول معروف تیکه تیکه کنید، مثلا منوها را جدا کنید، Header، قسمت متن اصلی ، قسمت Footer و …

به شکل Slice شده این قالب نگاه کنید :

نکته مهم : برای Slice کردن یه Shortcut خیلی خوب وجود داره به اسم New Layer Based Slice. کار این میانبر اینه که میاد از لایه انتخاب شده شما به همان اندازه و دور همون لایه یک Slice درست میکنه، من برای ساخت منوها از این ابزار استفاده کردم. برای راحتی میتونید از کلیدهای Alt+Shift+Ctrl+C استفاده کنید یا تو منوی layer انتخابش کنید.

حالا قالب آماده تبدیل شدن به فایل HTML و CSS هستش.

Save for Web

از منوی File گزینه Save for Web & Devices رو انتخاب کنید، یه پنجره جدید باز میشه، در این پنجره شما می تونید برای هر Slice یه تنظیمات خاص در نظر بگیرید، نوع فایل خروجی کیفیت آن، نام گذاری برای هر Slice و … من برای همه Slice ها JPG با کیفیت 80 رو انتخاب کردم شما میتونید هر جور که به نظرتون مناسب میرسه این کار رو انجام بدید، فقط حتما هنگام انتخاب نوع فایل و کیفیت آن به حجم خروجی و زمان تقریبی دانلود آن که در پایین پنجره نمایش داده میشه دقت کنید که زیاد حجم بالایی نداشته باشه.

حتی در این قسمت ما میتونیم Link هارو تعریف کنیم و به Image ها Alt Tag هم بدهیم. برای این کار کافیست روی هر Slice دوبار کلیک کنید که پنجره جدیدی باز میشه، تو این پنجره شما می تونید Link ها و Alt Tag ها رو وارد کنید.

بعد از اینکه Link ها رو ساختید، گزینه Save رو بزنید، پنجره جدیدی باز میشه. در این پنجره یک نام برای فایل خود انتخاب کنید، در قسمت Save as Type گزینه HTML and Images رو انتخاب کنید. حال در قسمت Settings گزینه Other رو انتخاب کنید، دوباره پنجره جدیدی باز میشه. در منوی Dropdown گزینه HTML رو انتخاب کنین و جلوی XHTML تیک بزنید.

حال دوباره از منوی Dropdown گزینه Slices رو انتخاب کنین و در پایین گزینه Generate CSS رو انتخاب کنید و Referenced رو روی By ID قرار دهید. حال OK کنید و Save کنید، اکنون فایل HTML شما آماده است. به همین سادگی !

بازم دیدید که فتوشاپ چقدر قویه ! با چند تا کلیک ساده یک وب سایت آماده شد، شما اگه با HTML و CSS مقداری آشنایی داشته باشید به راحتی می تونید کد این فایل رو بر حسب نیازتون دستکاری و Customize بکنید. اما بازم میگم هیچی به اندازه دستی نوشتن کد لذت بخش نیست

در انتها من فایل هارو هم اینجا میذارم… موفق باشید.

دریافت فایل (حجم 275 کیلوبایت)