وب سایت آموزشی و فناوری اطلاعات

آموزش ابزار Slice Tool در فتوشاپ

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

1. فتوشاپ را اجرا کرده و یک تصویر را به دلخواه وارد فتوشاپ کنید . برای باز کردن تصویر از کلیدهای Ctrl+O استفاده کنید .

Slice-Tool-1

2. فرض کنید کار این قالب در فتوشاپ تمام شده و حالا باید تبدیل به یک پوسته وب سایت شود . ابزار Slice Tool را انتخاب کرده و از همان بالای قالب شروع به تکه برداری می کنم .من معمولا مرحله به مرحله تصاویر را ذخیره میکنم بدلیل اینکه ممکن است کمی قالب را در ادامه بخواهم تغییر بدهم .

Slice-Tool-2

3. یک کادر دور لوگو با ابزار Slice Tool میکشم .

Slice-Tool-3

4. حالا با فشردن کلیدهای SHIFT+CTRL+ALT+S تنظیمات مربوط به ذخیره تصویر را فعال میکنم . بعد از چند لحظه صفحه زیر نمایش داده می شود . برای باز کردن صفحه زیر می توانید به صورت مستقیم از منوی File>Save For web را انتخاب کنید .

Slice-Tool-4

Slice-Tool-5

5 . در صفحه تنظیمات باید نوع فرمتی که می خواهید تصویر را ذخیره کنید انتخاب کنید .
اگر تصویر دارای پس زمینه نمی باشد PNG را انتخاب نمائید ولی به این نکته هم دقت کنید که این پسوند فقط برای تصاویر کوچک مثل لوگو و آیکون مناسب می باشد چون در تصاویر بزرگ حجم صفحات وب را بالا می برد .
اگر تصاویر شما زیاد دارای قسمت های رنگی نمی باشد فرمت Gif را انتخاب کنید .
اگر تصاویر شما دارای یکنواختی رنگ می باشد از فرمت JPG استفاده کنید .

Slice-Tool-6

Slice-Tool-7

6. قبل از اینکه بر روی کلید Save کلیک کنید مطمئن شوید که قسمت مورد نظر از حالت انتخاب خارج نشده باشد . اگر رنگ قسمت برید شده روشن تر از سطح تصویر نبود بر روی آن کلیک کنید .

Slice-Tool-8

7. غیر از قسمت هایی که توضیح داده ام تنظیمات پیش فرض را تغییر نداده و بر روی کلید Save کلیک کنید . بعد از چند ثانیه یک صفحه همانند تصویر زیر نمایش داده می شود که باید محل ذخیره تصویر را مشخص کنیم و یک نام مناسب ، دقت کنید که نام تصویر بسیار مهم می باشد پس یک نام که به تصویر و سایت شما مرتبط باشد برای آن انتخاب کنید به عنوان مثال LOGO ASARAYAN
در صفحه ذخیره تصاویر 2 قسمت بسیار مهم می باشد . اول نام تصویر و قسمت آخر گزینه Slices
اگر بخواهید تمام قسمت هایی که انتخاب کرده اید به صورت یکجا در پوشه تصاویر ذخیره شود باید از منوی کشویی Slices گزینه All Slices را انتخاب کنید . اگر بخواهید فقط یک قسمت از قالب که انتخاب شده است در پوشه تصاویر ذخیره شود باید گزینه Selected Slices را انتخاب نمایید .
امیدوارم این آموزش مفید بوده باشد . نظرات و انتقادات خودتان در پایین همین آموزش مطرح کنید .

Slice-Tool-9

منبع:آسارایان

اشتراک گذاری در whatsapp
اشتراک گذاری در telegram
اشتراک گذاری در pinterest
اشتراک گذاری در linkedin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب مرتبط

فرم ورود کاربر

ابتدا باید وارد حساب کاربری خود شوید