Ahmadreza007
Member
باسلام خدمت همگی دوستان
این اولین پست من در قسمت آموزش ها است.....امیدوارم که خوشتون بیاد.....
راستش چند وقت پیش یکی از دوستان آموزش ساخت قالب سایت توسط فتوشاپ رو گذاشته بود که فکر کنم نیمه تموم موند
اون آموزش فقط طراحی قالب بود و به 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 بکنید. اما بازم میگم هیچی به اندازه دستی نوشتن کد لذت بخش نیست ....
منبع1:خـــودم
منبع2: http://blog.datisdesign.com
این اولین پست من در قسمت آموزش ها است.....امیدوارم که خوشتون بیاد.....
راستش چند وقت پیش یکی از دوستان آموزش ساخت قالب سایت توسط فتوشاپ رو گذاشته بود که فکر کنم نیمه تموم موند
اون آموزش فقط طراحی قالب بود و به 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 بکنید. اما بازم میگم هیچی به اندازه دستی نوشتن کد لذت بخش نیست ....
منبع1:خـــودم
منبع2: http://blog.datisdesign.com
