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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۰۹ تیر ۱۳۹۲

در این جلسه از آموزش طراحی قالب، آموزش تکه تکه کردن قالب را به شما آموزش خواهیم داد. پس برای شروع فایل 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 را انتخاب کنید و لوگو را برش بزنید

نکته :

برای انتخاب دقیقتر پس از کشیدن مستطیل دور لوگو، با نگه داشتن 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 است که ان را در جلسه بعدی شروع خواهیم کرد. پس با ما همراه باشید.

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نظرات کاربران

حسین(مسیحا)

سلام من تازه سایت باحالتون کشف کردم و واقعا راضی هستم فقط یه مشکل اونم( فصل چهارم-جلسه اول )نداره این کجاست؟؟

سجاد دریس

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

sara

ممنون که پاسخ دادین آقای آوند . اما مشکل من اینه که میخوام حجم عکسارو پایین بیارم که این پسوند حجمش بالاست.من میخوام عکسا transparent باشه که وقتی تو سایت ازش استفاده میکنم این خط slice شده ی تصویر معلوم نشه چون کیفیتش با پس زمینه تغییر میکنه و یه خط بینشون میفته وقتی با jpg ذخیره میکنم که حجمش پایین تره.ممنون میشم اینم توضیح بدید….

لقمان آوند

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

sara

سلام خسته نباشید. چرا با پسوند png ذخیره کردین؟ مگه پسوند png حجم عکس رو بالا نمیبره؟ میشه بگین در چه مواقعی از گزینه save for web استفاده میکنیم؟ آخه من وقتی از این گزینه استفاده میکنم تا کیفیت عکسامو پایین میارم که حجمش کم شه رنگ هاش باهم متفاوت میشن و اینکه دگه transparent هم نیستن 🙁 خواهش میکنم جواب بدید. آخه من چندبار تو انجمن سوال مطرح کردم جواب ندادین 🙁

لقمان آوند

زمانی که عکسی رو در صفحه ی وب بخواید بکار ببرید از این گزینه استفاده می کنید .
وقتی transparency لازم داشته باشید از png (یا گیف – کیفیت png بهتره معمولا) استفاده می کنید و در غیر این صورت jpg با درجه ی کیفیتی متفاوت می تونید استفاده کنید .

ابراهیم

عالی بود ممنون 🙂

هومن

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

https://7learn.com/wp-content/uploads/2013/06/f3-p8.png

الان من قاطی کردم لوگو کدومه

سجاد دریس

سلام.
چک کردم مشکلی نبود و همه تصاویر نمایش داده میشن
احتمالا از سرعت اینترنتتونه!

meyti pugo

خب یک سایت دیگر با وردپرس رو چرا crop کردی؟؟
اونو بهش فونت b yekan رو میدادیم تو css

لقمان آوند

بستگی به طراحی تون داره .
اینکارم می تونید بکنید .

کریمی

درود بر شما من هر کاری میکنم این ارور رو میده:
could n ot copmlete your request because the file-format module cannot parse the file
حتی فایل خودتون رو هم دانلود کردم باز همین ارور رو میده البته یه چیز هم بگم فتوشاپ من حتی فایلهای png رو هم که گذاشته بودید باز نکرد نمی دونم عیب از فتوشاپ یا چیز دیگه؟

سجاد دریس

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

babakh

عالی

ali200reza

با سلام وتشکر از دوست عزیز بابت آموزش بسیار عالی
چند نکته رو دیدم هم یادآوری هم درخوسات راهنمایی می خوام.
1-لینک عکس ها در pdf های سوم به بعد مشکل داره و در واقع نیاز به اتصال به سایت برا دیدن عکس ها داره
2-تعداد عکس های png بعد از آماده شدن 18 تا میشه نه 17 تا.
3- بعد از برش عکسهای شما دارای اندازه دقیقی هستن که تو آموزش نگفتید و آیا نیاز هست که دقیق باشه یا نه؟
و اینکه میخواستم قالب خودم رو آپ کنم تا کنم تا بررسی کنید اگه امکانش باشه.

سجاد دریس

سلام.
ممنونم.
1. به مدیریت اطلاع میدم، حالا نمیدونم کلا اینجوری شده، یا فقط این چندتا پست..
2. درسته من یکی از تصاویر (block-content) رو حساب نکرده بودم.
3. دقیق دقیق که نه، مکشلی نداره.
4. آپ کنید.

hajian1

سلام
سجادعزیزمن یکجامحاسبه کردم درکل حرف شماکاملاًصحیح است واززحمات شما تشکرمی کنم

hajian1

سلام
سجادعزیزمن درفتوشاپ باچندمشگل برخوردکردم که موفق نشدم 17برش راداشته باشم درفایل دانلودضمیمه نیز7برش بیشتروجودنداشت درصورت امکان هفده برش راجهت دانلودلطفاًقراردهید
باتشکر

سجاد دریس

سلام.
ما در این جلسه 17 برش انجام ندادیم. گفتم که کلا 17 تصویر خواهیم داشت.
10 تصویر از قبل که اگه به جلسات قبل برگردید، لینک دانلود تصاویر وجود داره،
و در این جلسه نیز 7 تصویر دیگه رو برش دادیم که کل تصاویرمون(که در پوشه images قرار دارن) میشه 17تا.

سجاد دریس

1.خیر
2.برای استفاده در صفحات html، آموزش رو دنبال کنید، بهتر متوجه می شید.

نیاز به لاگین

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