آموزش طراحی قالب سایت – جلسه ششم

خانه » ابزارهای تولید محتوا » ادوبی فتوشاپ » آموزش طراحی قالب سایت – جلسه ششم
۱۴ مهر ۱۳۹۱ چاپ

در پنج درس گذشته از سری آموزشی طراحی قالب ، مراحل کار رو در فتوشاپ بررسی کردیم و طرح یک قالب ساده رو ایجاد کردیم ( دریافت طرح قالب ) . حالا نیاز داریم تا این طرح رو به یک قالب HTML تبدیل کنیم . برای اینکه بتونیم فایل فتوشاپ ( PSD ) رو به یک قالب HTML تبدیل کنیم لازم هست ابتدا عناصر گرافیکی به کار رفته در قالب فتوشاپ رو جداسازی کنیم و به صورت تصاویر مجزا ذخیره کنیم و سپس با استفاده از HTML و CSS قالب رو برای نمایش در مرورگرهای اینترنتی آماده کنیم . در این جلسه نحوه ی جداسازی عناصر گرافیکی قالب رو بررسی خواهیم کرد و کار با ابزار Slice رو در فتوشاپ یادخواهیم گرفت .

در صورتی که از ابتدا با ما همراه بوده باشید ، باید فایلی با عنوان template.psd رو روی سیستم خودتون داشته باشید ، اگر هم این فایل رو ندارید یا از دست دادید ، با استفاده از لینک بالا ( در سطر دوم همین مطلب ) اون رو دریافت کنید و سپس در فتوشاپ باز کنیدش .

برای جداسازی عناصر گرافیکی از ابزار Slice Tool استفاده میکنیم که این ابزار رو با شکل slice tool - ابزار کاردک در فتوشاپ در جعبه ابزار فتوشاپ میتونید پیدا کنید . ولی قبل از اینکه به سراغ کار با ابزار کاردک ( Slice Tool ) بریم لازم هست توجه داشته باشیم که دقیقا به کدوم عناصر نیاز داریم .

به منظور جلوگیری از زیاد شدن حجم نهایی کار ، تا جای ممکن باید از استفاده از گرافیک چشم پوشی کنیم و بجاش از CSS استفاده کنیم و تنها جاهایی رو که نمیتونیم با css ایجاد کنیم از گرافیک و تصاویر بهره بگیریم . این کار چند مزیت داره ، یکی سریعتر لود شدن قالب ( و افزایش سرعت سایت یا وبلاگ ) و دومی جلوگیری از اتلاف منابع سرور سایت یا وبلاگتون .

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

آموزش طراحی قالب سایت - جلسه ششم

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

ابزار کاردک رو انتخاب کنید و بخش های مشخص شده رو باهاش انتخاب کنید و دقت کنید که دقیقا همون بخشی رو که میخواهید انتخاب کنید . اگر با کار کردن با این ابزار مشکلی دارید ویدئوی آموزشی ای رو براتون آماده کردیم که میتونید در انتهای مطلب اون رو دانلود کنید .

در مرحله بعد ، بعد از اینکه تمام قسمت های مورد نظر رو با ابزار کاردک انتخاب کردید ( برش دادید ) ، از منوی File بر روی گزینه ی Save for web & Devices کلیک کنید :

منوی فایل در فتوشاپ

بعد از اینکه بر روی گزینه ی Save for Web & Devices کلیک کردید ، یک پنجره برای شما نمایش داده میشه که در اون پنجره میتونید تنظیمات مربوط به بهینه سازی تصویر و بخش های انتخاب شده رو مشاهده کنید . اگر بخواهیم این بخش رو به صورت تصویری و مرحله به مرحله برای شما نمایش بدیم حجم تصاویر و مراحل زیاد خواهد شد ، برای همین این مراحل رو به صورت یک فایل ویدئویی دیگر برای شما تهیه کردیم که میتونید دانلود کنید .

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

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

گفتگو پیرامون آموزش طراحی قالب سایت – جلسه ششم

(منتشر شده: 12 | در انتظار تایید: 0)
فاطمه

صفحه ی بعد؟منظورتون مطلب بعدیه؟ 😐

پاسخ دهید
عصرعلم

در پاسخ به فاطمه

بعد از آخرین پاراگراف نوشته شده صفحه :۱ ۲
البته در تلاشیم تا تمام مطالب به صورت یک صفحه ای ارائه بشوند و ممکنه بزودی این مطلب هم ویرایش بشه و تک صفحه ای بشه.
در حال حاضر صفحه ی دوم وجود داره (قبل از مطالب پیشنهادی و بعد از آخرین پاراگراف مطلب)

پاسخ دهید
miley

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

پاسخ دهید
عصرعلم

در پاسخ به miley

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

پاسخ دهید
حسام

ثواب ماتأخر میدونی ینی چی مهندس؟! ینی همین. ینی من از شما یاد بگیرم و کسب درآمد کنم ثواب شاغل بودن من برسه به شما! از اون طرف هزارتا در دیگه رو به شما باز شه. مرسی!!!

پاسخ دهید
فرهاد

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

پاسخ دهید
حمیدرضا

سلام
یه سوال اینکه من وقتی میخوام اقدام به ذخیره تصاویر بکنم تازه میبینم که اون گریدهای صورتی رنگ هنوز موجود هستن ولی تو آموزشی که شما دادین نباید باشه
چیکار کنم اونا نباشن؟

پاسخ دهید
عصرعلم

در پاسخ به حمیدرضا

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

پاسخ دهید
حسام

از جواب سريع و خوبتون خيلي ممنون

پاسخ دهید
حسام

بازم سلامو خسته نباشيد
يك سوال
اين قسمت ها كه ميگيد بايد جدا بشه چه فرقي دارن؟مثلا چون منهني هستن؟يا دو رنگ هستن؟يا آيكون متفاوتي هستن؟دليلش اينه؟خب من فقط از اون منهني و منوي كناري دورنگ استفاده كردم و بقيه رو از اين ۵تا رنگ اصلي هست.پس فقط همين ۲تارو برش بدم؟
در ضمن من از منوي سايدبار ۶تا دارم
۶تاش باشه يا يكيش كافيه؟
ممنون

پاسخ دهید
عصرعلم

در پاسخ به حسام

سلام
بله، تمام تصاویری که نیاز داریم رو برش میدیم. در اینجا ۴ قسمت رو برش دادیم، در برخی طرحها هستند که تا ۵۰ تا هم لازم داریم برش بدیم و این به طرح بستگی داره. اگر مثلا شما نمیخواهید آیکنی کنار عناوین مطالب نمایش داده بشه میتونید از بریدن اون قسمت صرف نظر کنید. هدف ما از برش دادن این هست که تصویر مورد نظر رو برای استفاده در کد css داشته باشیم.
برای منوی سایدبار یا هر کجای دیگه یک بار برش تصویر کافیه (به شرطی که تصاویر یکسان باشند) ، ما با استفاده از css بقیه رو انجام خواهیم داد و مثلا ۶ بار این تصویر رو در جاهای مختلف تکرار خواهیم کرد که در جلسات بعدی در عمل میتونید اونها رو مشاهده کنید.

پاسخ دهید
nayyer

خیلی عالی توضیح دادین … منتظر ادامه این بحث
موفق باشید

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین