جمعه ۳۱ فروردین ۱۴۰۳ |  عضویت / ورود






[ بخش اصلی آموزشها | افزودن آموزش | داری بیشترین امتیاز | دارای بیشترین بیننده | جدیدترین نظرات ]

آشنایی با کاربرد ابزار Slice در فتوشاپ (چند تکه کردن یک عکس)


Thursday, 2011 April 21   نویسنده: Hamid   تعداد بازدید: 64643 بار  #آموزش‌های مرتبط با ابزارهای فتوشاپ (Photoshop Toolbar)‏   امتیاز متوسط: امتیازی داده نشده است

آیا با کاربر ابزار Slice در فتوشاپ آشنا هستید؟

http://tutorials.aftab.cc/photoshop/slice_tool/photoshop_slice1.png

کار اصلی این ابزار، تکه تکه (slice) کردن یک تصویر است. به طور مثال به این صورت:

http://tutorials.aftab.cc/photoshop/slice_tool/photoshop_slice2.png

 

که وقتی کنار هم چیده می‌شوند، به این صورت خواهند بود:

 

 

اگر نیاز دارید که عکس بالا را داشته باشید و گام به گام با آموزش پیش بروید، روی لینک زیر کلیک راست کنید و گزینه Save Target/Link As را انتخاب کنید و بعد از ذخیره کردن عکس، آن‌را در فتوشاپ باز کنید:

http://tutorials.aftab.cc/photoshop/slice_tool/human_face.jpg


چرا باید یک عکس را تکه تکه کنیم؟

دلایل مختلفی وجود دارد که شما بخواهید یک عکس را تکه تکه کنید:

مثلاً در بحث طراحی وب و یا در پروژه‌های چند رسانه‌ای (Multimedia) خیلی از اوقات پیش می‌آید که بخواهید بخش‌های مختلف یک عکس را به جاهای مختلف لینک بدهید.

مثلاً من عکس بالا را چند تکه کرده‌ام و هر قسمت از صورت را به صفحه‌ای لینک داده‌ام که در مورد آن قسمت توضیح می‌دهد. (روی چشم‌ها یا گوش‌ها و بینی و دهان کلیک کنید تا متوجه شوید)

و یا ممکن است به طور مثال چندین عکس 3x4 را یک‌جا در اسکنر بگذارید و همه را با هم اسکن کنید. حالا نیاز دارید که یکی یکی عکس‌ها از هم جدا شوند. می‌توانید از این ابزار استفاده کنید.

یک موضوعی هم که قبلاً در طراحی وب مد شده بود این بود که اگر شما عکس بزرگی دارید که می‌خواهید روی یک صفحه نمایش دهید، بهتر است آن را چند تکه کنید و نمایش دهید تا سریع‌تر لود شود! که البته این ایده بعدها رد شد و حتی این روزها معتقدند کل عکس‌های کوچک سایتتان را به هم بچسبانید و یک عکس کنید و با CSS بخش مورد نظرتان را نمایش دهید، در این صورت تعداد درخواست‌ها (Request ها) به سرور کمتر می‌شود و عکس سریع‌تر لود می‌شود و سرور هم کمتر اشغال می‌شود. (برای توضیحات بیشتر در این مورد، این آموزش را ببینید)

روش استفاده از Slice Tool:

خیلی ساده است، ابزار را انتخاب کنید و دور تا دور محوطه‌هایی که قرار است جدا شوند را انتخاب کنید.

یک نکته مهم: بهتر است قبل شروع کار، از منوی View در زیرمنوی Snap To گزینه Slices را فعال کنید تا دقیق‌تر قطعات را ایجاد کنید.

ویرایش اسلایس‌ها:

اگر احساس کردید که اسلایس‌هایتان نیاز به ویرایش دارند، در حالی که ابزار Slice انتخاب است، کلید Ctrl را پایین نگاه دارید و روی محوطه‌ها کلیک کنید، سپس اندازه آن‌ها را کم و زیاد کنید... (در عکس زیر، محوطه 7 انتخاب و آماده تغییر اندازه است)

به کار نهایی من دقت کنید:

http://tutorials.aftab.cc/photoshop/slice_tool/photoshop_slice3.png

خروجی گرفتن از عکس:

- حالا برای این که عکس به صورت تکه تکه ذخیره شود، از منوی File گزینه Save For Web را انتخاب کنید. (یا کلیدهای Ctrl+Alt+Shift+S را فشار دهید)

- از سمت راست، فرمت png را انتخاب کنید و بسته به اینکه چه کیفیتی نیاز دارید، Colors را بین 8 تا 256 رنگ انتخاب کنید. (هر چه عدد بزرگ‌تر، عکس‌ها با کیفیت‌تر و البته حجیم‌تر! اگر برای وب می‌خواهید طبیعتاً باید به حجم، دقت بیشتری کنید)

http://tutorials.aftab.cc/photoshop/slice_tool/photoshop_slice4.png

 

- روی دکمه Save کلیک کنید.

- در پنجره بعد، پوشه دلخواهی را انتخاب کنید. سپس از بخش Format گزینه HTML and Images را انتخاب کنید و بقیه موارد را اگر خواستید، طبق تنظیمات تصویر زیر تغییر دهید و اگر نخواستید، بدون تغییر بگذارید:

http://tutorials.aftab.cc/photoshop/slice_tool/photoshop_slice5.png

- در نهایت اگر روی Save کلیک کنید، یک صفحه وب و یک پوشه پر از عکس‌های تکه تکه شما ایجاد شده است. ;)

 

پاک کردن Sliceها:

اگر کارتان با Sliceهای روی تصویر تمام شد، می‌توانید برای حذف آن‌ها از منوی View گزینه Clear Slices را کلیک کنید.

 

موفق باشید؛
حمید رضا نیرومند


.

ارسال سؤال یا نظر


1- علی درویش:
بوسیله: , در: Wednesday, 2011 April 27-کد: 3213
سلام

دوست عزیز بسیار اموزند بود


2- امید:
بوسیله: , در: Saturday, 2011 April 30-کد: 3218
سلام
دوست عزیز با این آموزش کمک خیلی بزرگی به من کردین امیدوارم همیشه موفق و پیروز باشید


3- lind:
بوسیله: , در: Tuesday, 2011 May 17-کد: 3237
واقعا عالی بود دمت گرم
اگر می خواهی نتیجه کارت را ببینی به
www.mehrteb.ir
تشریف بیار


4- MOHAMAD:
بوسیله: , در: Thursday, 2011 October 06-کد: 3541
behtarini kheyli khob bod merC


5- mosi:
بوسیله: , در: Wednesday, 2012 January 11-کد: 3827
mishod az in behtaram tozi dad . bazam mer30 . hamishe moama ke hal shavad asan shavad


6- ali:
بوسیله: , در: Tuesday, 2012 March 06-کد: 4058
agha dast marizad. hal dadi :*


7- درسا:
بوسیله: , در: Tuesday, 2012 May 29-کد: 4361
این روزها معتقدند کل عکس‌های کوچک سایتتان را به هم بچسبانید و یک عکس کنید و با CSS بخش مورد نظرتان را نمایش دهید


لينك معرفي شده به آموزش فوق مربوط به ساخت منو است ؟!!!!!


8- نگار:
بوسیله: , در: Thursday, 2012 July 12-کد: 4602
ممنون خیلی خوب بود


9- sanaz:
بوسیله: , در: Tuesday, 2012 July 24-کد: 4655
merc khoda kheiretoon bede k inghad ba hosele neveshtid


10- سعید:
بوسیله: , در: Sunday, 2012 November 11-کد: 5304
آقا خیلی ممنون از آموزشت خیلی خیلی بدردم خورد

مشاهده ادامه نظرات
Tutorials ©