آموزش طراحی قالب (فصل سوم) : تکه تکه کردن طرح (slice)

- visibility ۶٢ mode_comment

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

slice کردن قالب با ابزار crop

با استفاده از ابزار crop می توان طرح را slice کرد، البته تصاویری که داریم رو نخواد slice کنید و فقط گرادینت ها و طرح های گرافیکی را slice می کنیم.

1.هدر

برای دقت بیشتر ابتدا بر روی هدر زوم کنید و منو رو مخفی کنید

ابزار crop را انتخاب کنید و از بالا تا پایین هدر به عرض 2 الی 3px بکشید و Enter رو بزنید

پس از زدن enter تصویر برش می شود حال از منوی file گزینه save as رو انتخاب کنید و فایل را با فرمت png و نام header-bg ذخیره کنید  و در پیغامی که برای شما می آید گزینه none را انتخاب کرده ok کنید

حال از منوی windows گزینه history رو انتخاب کنید تا تاریخچه تغییرات نمایان شود.

در قسمت تاریخچه بر روی index.psd کلیک کنید تا قالب به حالت اولیه بر گردد

حال دوباره ابزار crop را انتخاب کنید و لوگو را برش بزنید

info نکته :

برای انتخاب دقیقتر پس از کشیدن مستطیل دور لوگو، با نگه داشتن CTRL اضلاع محدوده برش را تنظیم کنید

پس از زدن Enter می بینید که پس زمینه هدر نیز زیر لوگو وجود دارد، برای برداشتن آن

لایه header-bg را مخفی کنید، اما باز پس زمینه قالب زیر لوگو وجود دارد، لایه background را نیز مخفی کنید، تا زیر لوگو زمینه شطرنجی نمایان شود.

حال تصویر را save as کنید، نام آن را نیز logo قرار دهید.

دوباره از تاریخچه بر روی index.psd کلیک کنید تا طرح به حالت قبل برگردد.

باز با ابزار crop دور "یک سایت دیگر با وردپرس " را برش دهید، دو لایه ی header-bg و background را مخفی کنید و سپس با نام title آن را save as کنید.

دقت کنید که فرمت همه تصاویر برش داده شده png خواهد بود.

2.منو

منو فقط پس زمینه آن که از گرادینت استفاده کرده ایم نیاز به برش دارد و بقیه اجزا همگی با استفاده از html و css قابل ایجاد هستند،

آن را مانند پس زمینه هدر از بالا تا پایین به عرض 3px برش بزنید و آن را با نام menu-bg ذخیره کنید

3.ستون های کناری

در این قسمت shape پایین عنوان بلوک ها را برش بزنید

سپس لایه هایی که زیر ان قرار دارند را مخفی کنید

و تصویر را با نام block-title و با فرمت png ذخیره کنید.

در سمت چپ تصاویر تبلیغات را داریم که نیاز به برش دارند (سایه خاکستری رنگ زیر تصاویر لازم نیست)

تبلیغات کوچک را با نام ads-150 و تبلیغات بزرگ را با نام ads-300 ذخیره کنید

4.مطلب

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

حال در تاریخچه بر روی index.psd کلیک کنید تا طرح به قالب قبل برگردد و در اخر طرح را  “SAVE” کنید.

تصاویری که برش داده ایم را به پوشه images در کنار سایر تصاویر قالب انتقال دهید.

حال باید در پوشه images، هفده تصویر png داشته باشید مانند تصویر زیر:

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

اگر توی برش دادن تصاویر مشکل داشتین میتونید تصاویر رو از لینک زیر دانلود کنید.

comment دیدگاه کاربران
Peyman

سلام . واقعا زحمت کشیدی . خیلی خوب بود .

آموزش تبدیل به wordprees رو کی شروع می کنید ؟ ❗

سجاد دریس

از لینک زیر قابل دسترسی هست :

laya25

سلام من این اموزشو دیروز تموم کردم قالبم با firefox درست بود ولی با explorer درهم برهم بود این اشکالاتی رو هم که تو این جلسه گقتین مینوشتم قالبم درست که نمیشد تو firefox هم بهم میریخت جالبش اینجاست که من امروز که فایل هارو باز کردم کلا فالبم تو firefox بهم ریخته نمیدونم چرا
فایل css خودمو با فایل css شما مقایسه کردم فرقی نمیکنه ولی وقتی فایل شما رو با مال خودم جا بجا میکنم کار میکنه ولی با فالی خودم نه میشه نگاه کنید ببینید مشکلم کجاست؟
یک دنیا ممنون
http://upir.ir/1393.2/ghaleb_d0453.zip

سجاد دریس

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

masood

سلام دوستان.ممنون از آموزشهای خوبتون.من میخوام این سری آموزشی رو شروع کنم و بعد از آن هم قالب وردپرس.میخواستم ببینم اگر من از نظر گرافیکی قالب که شما آن را در قسمتهای اول آموزش میدید قالب رو به سلیقه خودم متفاوت طراحی کنم باید کدهارو هم تغییر بدم؟و به مشکل برمیخورم بانه؟و اگر جواب شما آری است با بلد بودن css میتونم کدهارو خدم تغییر بدم براساس قالبم؟ممنون

لقمان آوند

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

پوریا

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

سجاد دریس

از فایل index.html کپی بگیرید و فایل رو طبق نیازتون ویرایش کنید

sadaf ebadi

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

میشه لطف کنید و اون قسمتی که به عنوان css reset نوشتین رو توضیح بدین؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3