نحوه ی استفاده از برخی امکانات فتو شاپ برای web

[Behzad AZ]

نحوه ساخت یك گالری وب
ویژگی Web Photo Gallery فتوشاپ یكی از بزرگترین روش*ها برای ایجاد یك صفحة وب است كه شامل عكس*های كوچكی است كه در یك پوشه قرار دارند و هر كدام به یك عكس بزرگ لینك شده*اند. هر شخصی كه می*خواهد پوشه*ای از عكس*های خود را به وب منتقل كند می*تواند از این شیوه استفاده كند. این شیوه در واقع تكنولوژی Actions فتوشاپ را بكار می*گیرد. كاربران تصاویر را داخل یك پوشه قرار می*دهند، پارامترهای مربوطه را تعیین می*كنند و كار را شروع می*كنند. اسكریپت اجرا شده و همه چیز در یك چشم به هم زدن درست می*شود. ایجاد كد مربوطه، بهینه سازی تصاویر و كوچك كردن و ایجاد تمامی لینك*های مربوطه و مورد نیاز در این قسمت انجام می*شود.

انتخاب Web Photo Gallery



در فتوشاپ گزینه File\Automate\Web Photo Gallery را انتخاب كنید تا كادر محاوره*ای Web Photo Gallery باز شود. یك محیط طرح بندی صفحه را از منوی كشویی Styles انتخاب كنید. عكس*های كوچك را در طرف راست كادر محاوره*ای مشاهده كرده و نتایج را ارزیابی نمائید.

تعیین منبع و مقصد فایل*ها


در قسمت Folders بر دكمهBrowser كلیك كنید. سپس به دنبال پوشه*ای بگردید كه عكس*های اولیه شما در آن قرار دارند. گزینه Choose را برای بستن كادر محاوره*ای Select Image Directory كلیك كنید. اكنون در دكمه Destination كلیك كرده و به دنبال پوشه مقصدی كه فایل*های حاصله در آن كپی خواهند شد بگردید. برای انتخاب شدن این پوشه دكمة Choose را كلیك كنید.


نام و تاریخ سایت



از منوی Options گزینه Banner را انتخاب كرده و در قسمت پائین كادر محاوره*ای، فیلدهای مناسب را پر كنید. از جمله نام سایت، تاریخ و اطلاعات مربوط به عكاس. همچنین می*توانید نوع و شیوه نمایش تاریخ، نوع فونت و اندازه فونت مورد نظرتان را نیز تعیین كنید.


تغییر اندازه تصاویر


از منوی Options گزینه Large Images را انتخاب كنید تا گزینه*های بیشتری مشاهده شوند. در صورتی كه مایلید تصاویر اصلی كه در نتیجه انتخاب عكس كوچك باز می*شوند تغییر اندازه یابند، گزینة Resize Images را انتخاب كنید. در حالیكه این كادر فعال است می*توانید از منوی كشویی مجاور، اندازه تصویر را انتخاب كرده و مقدار فشرده سازی JPEG را نیز در منوی كشویی JPEG Quality تعیین كنید. برای وارد كردن یك مقدار فشرده سازی معین از منوی JPEG Quality یك مقدار را انتخاب كنید.

تعیین طرح بندی صفحه




از منوی كشویی Options گزینه Thumbnails را انتخاب كنید. برای آنكه از نام فایل یا متن نگهداری شده در قسمت File Info بصورت یك عنوان استفاده شود، گزینة مربوطه را انتخاب كنید. پارامترهای فونت و پارامترهای مربوط به تعداد ستون*ها و ردیف*های صفحة ایجاد شده را نیز تعیین نمائید.

ساخت یك گالری آزمایشی




دكمة OK را برای ایجاد گالری كلیك نمائید. فتوشاپ فایل*ها را باز می*كند، فشرده سازی را به آنها اعمال كرده و در نهایت فایل*ها را به پوشه مقصد تعیین شده در مرحله دوم كپی می*كند. پس از اتمام عملیات ساخت گالری، فتوشاپ آنرا در یك مرورگر باز می*كند تا نتیجه نهایی را مشاهده كنید. برای آزمایش لینك*ها و اطمینان از آنكه همه چیز بدرستی كار می*كند بر روی هر یك از عكس*ها كلیك كنید.

*توجه *
ساختار فایل


فتوشاپ چندین فایل و پوشه را در داخل پوشه مقصدی كه در مرحلة 2 تعیین كردید، ایجاد می*كند. تمامی تصاویر در یك پوشه به نام Images نگهداری می*شوند و عكس*های كوچك نیز در پوشه*ای با نام Thumbnails ذخیره می*شوند. یك صفحه HTML جداگانه نیز برای هر تصویر ایجاد شده و در یك پوشه با نام Pages ذخیره می*شوند. صفحه آلبوم عكس اصلی نیز با نام Index.htm می*باشد. هنگام ارسال صفحات آلبوم به سرور دقت كنید تا تمامی این فایل*ها و پوشه*ها به سرور كپی شوند.

سفارشی كردن رنگ*ها


از منوی Options گزینه Custom Colors را انتخاب كنید تا رنگ متن، لینك، پس زمینه و متن مربوط به banner تعیین شود. برای اجرای پنجره انتخابگر رنگ بر روی هر یك از نمونه*ها كلیك كرده و سپس رنگ مورد نظرتان را انتخاب كنید. گزینة Only Web Colors را در انتخابگر رنگ برای اطمینان از انتخاب رنگی كه مناسب صفحات وب است، فعال كنید.

[Behzad AZ]

نحوه ساخت تصاویر جاوا اسكریپت حساس به وضعیت ماوس


انیمیشن*های دو حالته فایل*های گرافیكی هستند كه در هنگام جابجایی نمایشگر ماوس بر روی نقطه معینی از طرح تغییر می*یابند. این انیمیشن*ها برای ایجاد جذابیت در لینك*ها بخصوص در قسمت*های گرافیكی كه بطور واضح مشخص نشده*اند مفید می*باشد. ویژگی دو حالته شامل یك مرحله وضعیت عادی، یك وضعیت جابجایی ماوس و یك وضعیت كلیك است. در این كار عملی برای هر یك از این وضعیت*ها یك تصویر ایجاد خواهیم كرد. برای بررسی در خصوص افكت دو حالته، در این كار عملی یك دكمه اولیه ایجاد می*كنیم، سپس وضعیت آن را تغییر می**دهیم. بعد از آنكه دكمه هر سه وضعیت مربوط به آن ایجاد شدند باید كد HTML آن، بعلاوه گرافیك*های مربوط به آن را ذخیره كنید و سپس كد تولید شده را در صفحة مورد نظر خود قرار دهید.

ایجاد یك فایل جدید در Image Ready



در برنامه Image Ready گزینه File\New را انتخاب كنید تا كادر محاوره*ای New Document نمایان شود بطوریكه بتوانیــد یك فایل جدید ایجاد كنید. در این كار عملی، سندی با نام Rollover Test ایجاد كرده و مقادیر عرض و ارتفاع آن را 100 تعیین كنید. سپس دكمه رادیویی White را برای تعیین پس*زمینه سفید انتخاب كرده و OK را كلیك نمائید.

ایجاد دكمه



رنگ پیش زمینه*ای كه می*خواهید در تصویر دكمه از آن استفاده كنید را انتخاب نمائید. سپس ابزار Elliptical Marquee را انتخاب كنید و در حالیكه كلید Shift را پائین نگه داشته*اید در داخل تصویر یك دایره ترسیم كنید. از ابزار سطل رنگ (Paint Bucket) برای پر كردن شكل دكمه با رنگ تعیین شده در قسمت پیش زمینه استفاده كنید.

افزودن افكت لایه



برای ایجاد حالت سه بعدی گزینه Layer\Layer Style\Bevel and Emboss را انتخاب كنید. پارامترهای مورد نظرتان را در پالت Bevel and Emboss ای كه نمایان می*شود تعیین كنید. در صورت تمایل می*توانید برای ایجاد یك شكل طبیعی*تر از دكمه، از افكت Outer Glow استفاده كنید. تنها كافی است بر روی گزینه Outer Glow كه در سمت چپ كادر محاوره*ای Layer Style قرار دارد كلیك كنید و گزینه*ها را انتخاب كنید. همانند شكل زیر:

كپی از لایه موجود



از منوی پالت Layers گزینه Duplicate Layer را انتخاب كنید تا دكمه و افكت**های آن در لایه جدیدی كپی شوند. گزینه Duplicate Layer را مجدداً انتخاب كنید بطوریكه سه لایه ایجاد شود كه هر یك همان دكمه را نشان می**دهند.

رنگ آمیزی دكمه*ها




در پالت Layers، اولین لایه كپی شده را انتخاب كنید و سپس كادر محاوره*ای Inner Glow Layer را باز كنید. رنگ سبز روشن را به آن اضافه كرده وOK را كلیك نمائید. به پالت Layers برگشته و دومین لایه كپی شده را انتخاب كنید. سپس مطابق شکل زیر تنظیمات مربوطه را در آن اعمال کنید.

ایجاد وضعیت*های دو حالته




برای باز كردن پالت Rollovers گزینه Window\Actions را انتخاب كنید. از منوی پالت Actions، گزینه New Rollover State را انتخاب كنیدو سپس دکمه Play را در پالت Ations انتخاب کنید تا وضعیت های Over State و Down State ایجاد شود. در این مرحله شما باید سه وضعیت داشته باشید: Normal ، Over و Down (البته برنامه Image Ready بدون نیاز شما به كدنویسی كدهای جاوا اسكریپت مربوطه را ایجاد می*كند).

ضمیمه كردن لایه*ها به وضعیت*ها




در پالت Actions وضعیت Normal را انتخاب كنید. در پالت Layers، لایه*ای را كه مایلید در وضعیت عادی دكمه نشان داده شود، انتخاب كنید. این مرحله را برای وضعیت Over و Down نیز تكرار كنید. برای ذخیره فایل گزینه File\Save Optimized را انتخاب كنید. توجه داشته باشید كه Format\HTML and Images انتخاب شده باشد.

[Behzad AZ]

نحوه ساخت انیمیشن*های GIF با استفاده از فیلتر
Photoshop و Image Ready به شما امكان ایجاد فایلهای انیمیشن جذابی را با استفاده از امكانات پیشرفته مختلف، فیلترهای متنی یا فیلترهای تحریف كننده می*دهند (شما می*توانید همانند لایه*ها، فریم*ها را در فتوشاپ ایجاد كنید. اما تنها در Image Ready می*توانید انیمیشن ایجاد كنید). با ایجاد كپی*هایی از یك لایه و سپس اعمال یك فیلتر، به آنها به آسانی می*توانید با شدت*های مختلف فیلتر را متحرك كنید. در این كار عملی بر روی تصویری از یك گل كار خواهیم كرد و فیلتری با نام Twirl را به لایه*های متوالی اعمال می*كنیم تا انیمیشن جالبی ایجاد شود. هر چند می*توانید در شروع كار هر فایلی یا هر قالبی را انتخاب كنید، اما توجه داشته باشید كه فایل*های انیمیشن حتماً باید در قالب GIF ذخیره شوند.

باز كردن فایل در Image Ready



در برنامه Image Ready گزینه File\Open را انتخاب كرده و سپس فایلی كه قصد ایجاد انیمیشن با آن را دارید، انتخاب نمائید.

كپی برداری از لایه*ها




گزینه Window\Layers را انتخاب كنید تا پالت Layers فعال شود. از منوی پالت، گزینه Duplicate Layer را چندین مرتبه انتخاب كنید تا برای ایجاد انیمیشن مورد نظر چندین لایه مختلف در اختیار داشته باشید. برای این مثال سه بار این مرحله را تكرار كنید.

اعمال فیلتر به لایه*ها




اولین لایه موجود در پالت Layers را انتخاب كرده و سپس فیلتر مورد نظرتان را انتخاب كنید (در این مثال ما گزینه Filter\Distort\Twirt را انتخاب كردیم). یك فیلتر با مقدار متوسط انتخاب كنید و OK را كلیك كنید. همین كار را برای بقیة لایه*ها تكرار كنید و در هر بار اعمال فیلتر، شدت آنرا افزایش دهید.

باز كردن پالت Animation



گزینه Window\Animation را برای باز كردن پالت Animation انتخاب كنید.

ایجاد فریم




گزینه New Frame را از منوی پالت Animation انتخاب نمائید تا یك فریم جدید انیمیشن ایجاد شود. این مرحله را برای ایجاد یك فریم متناظر با هر لایه فیلترگذاری شده*ای كه در مرحله 3 ایجاد كرده*اید تكرار كنید. برای مثال اگر شما یك لایه اصلی داشته و 3 لایه در مراحل بعدی ایجاد كرده*اید، باید 4 فریم انیمیشن ایجاد كنید.

ضمیمه كردن لایه*ها به فریم*ها




در حالیكه دو پالت Layers و Animation فعال هستند ، در اولین فریم انیمیشن كلیك كرده و لایه اول متناظر با آن را انتخاب كنید. آیكون*های مربوط به مشاهده یا مخفی بودن لایه*ها (آیكون چشم) را كلیك كنید بطوریكه تنها لایه انتخاب شده قابل مشاهده باشد. سپس فریم بعدی انیمیشن را كلیك كرده و لایه فیلترگذاری شده در پالت Layers بعدی را انتخاب كنید. دقت كنید كه تنها لایه انتخاب شده مشاهده شود. این مراحل را تكرار كنید تا هر لایه به یك فریم ضمیمه شود.

اجرای انیمیشن در Image Ready




دكمه Play ای را كه در پائین پالت Animation قرار دارد كلیك كنید تا انیمیشن اجرا شود. همترازی تصاویر فریمها، نرمی تصویر و مدت زمان نمایش هر فریم را كنترل كنید. انیمیشن بطور متناوب تكرار می**شود. دكمه Stop را برای متوقف كردن اجرای آن كلیك كنید.

تعیین دفعات اجرای انیمیشن




از منوی كشویی Loop Count برای تعیین دفعات اجرای انیمیشن استفاده كنید.به عبارت دیگر اینكه آیا انیمیشن پس از یك بار اجرا متوقف شود یا آنكه به دفعات معین پخش شود، در این قسمت تنظیم می*شود. گزینه Once یا Forever را از منوی كشویی انتخاب كنید. همچنین می*توانید گزینه Other را انتخاب كرده و تعداد دفعات تكرار را در كادر محاوره*ای كه نمایان می*شود، مشخص كنید.

تعیین زمان و مدت فریم




برای افزودن طول مدت نمایش هر فریم در منوی كشویی Timing فریمی كه می*خواهید تغییر دهید كلیك كرده و سپس زمان مورد نظرتان را تعیین كنید. برای مثال ممكن است بخواهید زمان طولانی*تری به فریم اول اختصاص دهید تا روی فریم مزبور تاكید شود.

تعیین بهینه سازی GIF




گزینه Window\Optimize را برای باز كردن پالت Optimize انتخاب نمائید. نحوه بهینه سازی انیمیشن*ها بصورت یك فایل GIF در كار عملی 2 توضیح داده شده است.

پیش نمایش در یك مرورگر



گزینه File\Preview in را انتخاب كرده و مرورگری كه مایلید فایل ایجاد شده را در آن ببینید از زیر منوی Preview In انتخاب كنید. فایل انیمیشن در مرورگر تعیین شده باز می*شود و اطلاعاتی در خصوص اندازه، نوع و شیوه فشرده سازی فایل در پائین پنجره مشاهده می*شود.

ذخیره فایل در قالب GIF




تنظیمات قالب بندی GIF را در پالت Optimize وارد كرده و سپس از منوی File\Save Optimized برای ذخیره تصویر بصورت فایل GIF استفاده كنید. برای درك جزئیات بیشتر در خصوص ذخیره فایل*های GIF، به كار عملی 2 همین بخش مراجعه نمائید.

*توجه *
شروع كار در فتوشاپ


با توجه به اینكه در برنامه Photoshop فیلترهای بیشتری نسبت به برنامه ImageReady وجود دارد می*توانید مراحل 1 تا 3 را در برنامه فتوشاپ اجرا كرده و فیلترهای مورد نظرتان را به تصویر اعمال كنید.
پس از بدست آوردن نتیجه مطلوب گزینه Jump To را كه در پایین جعبه ابزار قرار دارد كلیك كنید تا فایل تصویری به همراه لایه*های فیلترگذاری شده آن در برنامه Image Ready باز شود. سپس می*توانید مراحل ایجاد فریم و ضمیمه كردن هر لایه به یك فریم را در این برنامه انجام دهید.

بهینه سازی و ذخیره فایل


هر چند فایل تصویر در مرحله 10 این كار عملی بهینه سازی شده، اما باید در مرحلة 12 نیز بصورت یك فایل GIF ذخیره شود. بهینه سازی فایل بصورت GIF در واقع تعداد رنگ*های فایل را تعیین می*كند و ربطی به ذخیره فایل ندارد. برای ذخیره فایل در حالت انیمیشن حتماً باید قالب بندی GIF89a انتخاب شود.

كم نگه داشتن تعداد فریم*ها تا حد امكان


فریم*های انیمیشن حجم فایل را افزایش می*دهند و در نتیجه زمان دریافت آنها افزایش می*یابد. سعی كنید حتی الامكان تعداد فریم*ها را در حداقل ممكن نگه دارید تا بارگذاری صفحات وب به سرعت و به راحتی امكان پذیر باشد.

ایجاد انیمیشن*های متنی با Text


برای ایجاد جذابیت و زیبایی انیمیشن*های متنی از ابزار Warp Text استفاده كنید. ابتدا متن را با ابزار Type ایجاد كنید، فریم انیمیشن را ساخته و افكت*های Warp Text را بتدریج به هر فریم اعمال كنید. Warp Text یك آیكون است كه در گوشه بالای نوار Options ابزار Text قرار دارد.

[Behzad AZ]

نحوه ساخت نقشه*های تصویر

نقشه*های تصویر به شما امكان می*دهند تا نقاط قابل كلیكی را در تصاویر وب ایجاد كنید كه امكان برقراری لینك و پیوند به دیگر صفحات را می*دهند. می*توانید دكمه*های گرافیكی یا متون توضیح دهنده یك عمل، یا اطلاعات بر مبنای تصویر ایجاد كنید یا به محیط**های مشخص و دقیقی از تصویر لینك دهید. در برنامه Image Ready طراحی محیط*های نقشه تصویری به سادگی امكان پذیر شده است و در نتیجه می*توانید اطلاعات را لینك كرده و حتی كدهای HTML ضروری برای افكت نهایی را ذخیره كنید.

باز كردن فایل در Image Ready



در برنامه Image Ready گزینه File\open را انتخاب كنید و سپس فایلی را كه قصد اعمال تغییرات در آن را دارید، انتخاب كنید. در این مثال، یك نقشه تصویر در اطراف هر خط از متن ایجاد می*كنیم كه به صفحات مربوطه در سایت وب لینك می*شوند.

انتخاب ابزار Image Map




ابزار Image Map را در جعبه ابزار كلیك كرده و پائین نگه دارید تا تمامی ابزارهای مربوط به نقشه*های تصویر را مشاهده كنید. گزینه*های ابزار مزبور به شما امكان ترسیم اشكال مستطیل، دایره و چندضلعی را می*دهند. همچنین ابزار دیگری هم برای انتخاب نقشه*های ایجاد شده در این لیست وجود دارد. ابزار مورد نظر را از منو انتخاب كنید.

ترسیم اشكال نقشه تصویر




نمایشگر ماوس را بر روی تصویر جابجا كرده و شكل مورد نظر را با كشیدن ماوس ترسیم كنید. این شكل بصورت خط چین نمایان شده و دستگیره*هایی در اطراف آن مشاهده می*شوند. برای آنكه بعد از ترسیم شكل آن را ویرایش كنید، می**توانید ابزار Image map Select را انتخاب كنید. سپس نقشه تصویر را انتخاب كرده و دستگیره*ها را به اندازه مورد نظر جابجا كنید.

باز كردن پالت Image Map




اگر پالت Image Map از قبل باز نیست، با انتخاب گزینه Image Map Window\ آن را باز كنید. تنظیمات مربوط به بخش Dimensions را برای تعیین موقعیت دقیق نقشه تصویر در فیلدهای X و Y وارد كنید. با استفاده از كنترل*های Width ، Heigh یا Radius (بسته به شكل انتخابی*تان) شكل را تغییر اندازه دهید.

تعیین اطلاعات HTML




یك نام منحصر بفرد برای نقشه تصویری كه ترسیم كرده*اید وارد كنید. ضمناً URL مربوط به لینك آن را نیز وارد كنید (مسیر دسترسی به فایلی كه با كلیك كردن بر روی نقشه تصویر باز خواهد شد). بعد از وارد كردن URL باید از منوی كشویی Target، مقدار مورد نظر را برای كنترل محل و نحوة باز شدن صفحة لینك شده به نقشة تصویر، انتخاب كنید. برای آنكه سند لینك شده در پنجره جدیدی اجرا شود گزینه _ blank یا برای باز شدن در همان پنجره گزینه _Self را انتخاب كنید (_parent و _top گزینه*هایی هستند كه برای صفحات مبتنی بر فریم كاربرد دارند). می*توانید برای كاربرانی كه صفحه را با مرورگرهای متنی مشاهده خواهند كرد یا نمایش گرافیك را در مرورگر خود محدود كرده*اند عبارتی را در كادر Alt وارد كنید تا به جای تصاویر، آن عبارت نمایش داده شود.

ذخیره فایل*ها




برای ذخیره تصویر و پارامترهای HTML ضروری است كه به همراه تصاویر و تكه تصویرها یك فایل HTML نیز ذخیره كنید. بدین منظور با توجه به مطالب مطروحه در كار عملی 2 همین بخش، فایل را بهینه سازی كرده و سپس گزینه File\Save Optimized را انتخاب نمائید. در منوی كشویی Save as type ، دقت كنید كه HTML and Images انتخاب شده باشد و فایل*ها در دایركتوری و پوشه*های مربوطه باشند. OK را برای ذخیره فایل* HTML و فایل*های تصویری كلیك كنید.

*توجه*
همترازی اشكال نقشه تصویر


هنگام كار با چندین شكل نقشه تصویر می*توانید از ابزارهای دقیق همترازی موجود در برنامه Image Ready برای هم*تراز كردن اشكال بر اساس لبه*ها یا گوشه*های آنها استفاده كنید. ابزار Image Map Select را انتخاب كرده و كلید Shift را پائین نگه دارید تا امكان انتخاب چندین شكل برای شما وجود داشته باشد. سپس می*توانید از هر یك از ابزارهای همترازی موجود در نوار Options استفاده كنید.

نقشه*های تصویری از لایه*ها


اگر تصویری دارید كه از لایه*های مجزا تشكیل شده (همانند یك دكمه گرافیكی)، گزینه Layer\New Layer Based Image Map Area را انتخاب كنید. این گزینه شكل نقشه تصویری جدیدی را مبتنی بر لایه فعال جاری ایجاد می*كند.

[Behzad AZ]

نحوه چند قسمت كردن تصاویر برای وب

قسمت كردن و تكه كردن یك تصویر برای وب عبارت از تقسیم یك تصویر بزرگ به چند تصویر كوچك است كه در هنگام بارگذاری صفحه در داخل یك مرورگر در كنار هم قرار می**گیرند. علت انجام این كار آنست كه در اینترنت بارگذاری تصاویر كوچك سریعتر از بارگذاری تصاویر بزرگ صورت می*گیرد. در صورتی كه بخواهید بخشی از تصویر بعنوان یك شكل دو حالته حساس به ماوس یا یك انیمیشن عمل كند، استفاده از این ویژگی ضروری است. Image Ready به شما امكان می*دهد تا یك فایل گرافیكی را با شبكه*ای از خطوط افقی و عمودی به چندین تكه تقسیم كنید و سپس هر تكه را به صورت یك فایل جداگانه* ذخیره نمائید.


باز كردن فایل در Image Ready



برای باز كردن فایل مورد نظر در برنامه Image Ready گزینه File\Open را انتخاب كنید.

فعال كردن خط كش*ها




اگر خط كش*ها از قبل قابل مشاهده نیستند، گزینه View\Rulers را انتخاب كنید. تا خط كش*ها در اطراف چپ و بالای پنجره تصویر مشاهده شوند.

كشیدن خطوط راهنما



نمایشگر ماوس را بر روی یكی از خط كش*ها قرار دهید و دكمه ماوس را پائین نگه دارید تا اینكه شكل آن به صورت دو خط موازی تغییر یابد. سپس ماوس را به روی تصویر بكشید تا یك خط راهنمای افقی یا عمودی در تصویر قرار گیرد. خطوط راهنما را متناسب با تكه*های مورد نظرتان كه قصد ایجاد آنها را دارید در تصویر قرار دهید.

تكه كردن تصویر مطابق خطوط راهنما




برای تكه كردن تصاویر بر اساس خطوط راهنمای جاری، گزینة Slices\Create Slices from Guides را انتخاب كنید. تكه*های قرار گرفته در محیط تصویر بصورت بخش*های مستطیلی با یك رنگ مشخص دیده می*شوند. تكه انتخاب شده جاری به رنگ زرد می*باشد.

بهینه سازی تكه*های تصویر




از جعبه ابزار گزینه Slice Select را انتخاب كرده و روی اولین تكة ایجاد شده در تصویر كلیك كنید تا انتخاب شود. سپس پالت Optimize را باز كنید (گزینه Window\Optimize را انتخاب كنید) و بهینه سازی مورد نظرتان را برای آن بخش انجام دهید. این مرحله را می*توانید برای هر تكه*ای در محیط تصویر تكرار كنید.

ذخیره فایل*ها



گزینه File\Save Optimzed را برای باز كردن كادر محاوره*ای Save Optimized انتخاب كنید. در صورتی كه می*خواهید Image Ready یك فایل HTML برای جدول ضمیمه شده به تصویر ایجاد كند، گزینه HTML and Images را از منوی كشویی Save as type انتخاب نمائید. در صورتی كه تعداد زیادی از تكه*ها را ذخیره می*كنید بهتر است با كلیك كردن دكمه New Folder پوشه جدیدی ایجاد كرده و تمام تكه* تصویرها را در آن ذخیره و نگهداری كنید. برای ذخیرة تكه*های بهینه*سازی شده، دكمة Save را كلیك نمائید. چندین فایل ایجاد می*شوند و هر فایل شامل یك تكه از تصویر است. نام فایل*ها برگرفته از نام فایل اصلی به همراه شماره تكه مربوطه است كه به آن ضمیمه شده است.

* توجه *
جابجایی خطوط راهنما


اگر بخواهید بعد از قرار دادن خطوط راهنما در صفحه آنها را تغییر موقعیت دهید، در ابزار Move جعبه ابزار كلیك كرده و نمایشگر ماوس را روی خط راهنمای مورد نظرتان قرار دهید و سپس آن را به محل مورد نظر بكشید.

تعیین تنظیمات تكه تصویرها


برای تعیین دقیق نحوة ایجاد و نامگذاری تكه*های تصویر، گزینة File\Output Settings\Slices را انتخاب نمائید. بعلاوه می*توانید برای تعیین رنگ و شفافیت تكه*ها در هنگام نمایش آنها، گزینة Edit\Preferences\Slices را انتخاب كنید.

[Behzad AZ]

نحوه بهینه سازی فایل*ها با متغیرهای فشرده*سازی
متغیر فشرده*سازی به شما امكان می*دهد تا فشرده*سازی و كیفیت یك تصویر را در محیط*های مختلف اصلاح كنید. می*توانید در اطراف یك كاراكتر یا بخشی از تصویر تمركز كنید در حالیكه اجازه می*دهید جزئیات قسمت*های غیرمهم حذف شود (همانند محیط*های زمینه یا رنگ*های یكنواخت). در نتیجه تصویر بهینه شده و كیفیت بالایی در قسمت*های مهم و كیفیت پائینی در قسمت*های كم اهمیت دارد. در این كار عملی نحوه انجام فرایند فشرده*سازی این چنینی را در فتوشاپ بررسی می*كنیم.

باز كردن فایل در فتوشاپ




اولین قسمت این كار عملی شامل ایجاد یك پوشش در فتوشاپ است. بدین منظور فتوشاپ را باز كنید. سپس گزینه File\Open را انتخاب كنید. فایلی را كه قصد بهینه*سازی آن را دارید از كادر محاوره*ای Open انتخاب كنید.

ایجاد یك كانال جدید




برای باز كردن پالت Channels، گزینه Window\Channels را انتخاب كنید. پارامترها را در كادر محاوره*ای New Channel به شكل مورد نظر تغییر دهید و برای ایجاد كانال جدید، دكمه OK را كلیك نمائید.

ایجاد پوشش




بطور پیش*فرض كانال جدید تصویر را سیاه می*كند. برای مشاهده تركیبی كانال و تصویر به پالت Channels رفته و قابلیت مشاهده را برای تمامی كانال*ها از جمله كانال جدیدی كه ایجاد كرده*اید، فعال كنید. در انتهای فشرده*سازی تصویر، محیط*های سفید كانال آلفا جزئیات بیشتری داشته و محیط*های سیاه جزئیات كمتری خواهند داشت. برای تاكید در جزئیات تصویر می*توانید با هر یك از ابزار نقاشی در فتوشاپ كانال را رنگ آمیزی كنید. پس از اتمام كار، قابلیت نمایش كانال alpha را در پالت Channels غیرفعال كنید.

ذخیره فایل برای وب




گزینه File\Save For Web را برای باز شدن كادر محاوره*ای Save For Web انتخاب كنید. در صورت داشتن پوشش، گزینه*ای برای باز كردن فایل از طریق برنامه Image Ready و بهینه سازی آن در اختیار دارید.

برای فایل*های JPEG




در كادر محاوره*ای Save For Web از منوی Optimized File Format گزینه JPEG را انتخاب كنید. آیكون كنار فیلد Quality را برای باز شدن كادر محاوره*ای Modify Quality Setting انتخاب كنید. از منوی كشویی، كانالی را كه در قسمت 2 این كار عملی ایجاد كرده*اید، انتخاب كنید. در حالیكه گزینة Preview انتخاب شده است، برای تعیین میزان حداقل و حداكثر تنظیمات كیفیت، نوار لغزنده را جابجا كنید. به خاطر داشته باشید كه محیط*های كانال سفید متناظر با تنظیمات حداكثر و محیط*های سیاه رنگ مربوط به تنظیمات حداقل هستند. در پایان OK را كلیك نمائید.

برای فایل*های GIF



در كادر محاوره*ای Save For Web ، از منوی Optimized File Format گزینه GIF را انتخاب كنید و تنظیمات مورد نظر برای GIF را تعیین نمائید. آیكون كنار فیلد lossy را كلیك كنید تا كادر محاوره*ای Modify Lossiness Setting باز شود. با استفاده از مطالب عنوان شده در كارهای عملی قبل، تنظیمات مربوطه به Dither، Lossy و Colors را اعمال كرده و در پایان دكمة OK را كلیك نمائید.

* توجه *
فایل*های PNG را فراموش نكنید


از كانال**ها می*توانید برای تغییر كیفیت فایل PNG-8 نیز استفاده كنید. برای اصلاح مقادیر Lossy و Dither می*توانید مرحله 6 را برای این فایل*ها نیز انجام دهید.

[Behzad AZ]

نحوه ساخت فایل*های Jpg برای وب

قالب*بندی و فرمت JPEG در فایل*ها برای تصاویر دارای طیف سایه روشن همانند عكس*ها بسیار مناسب است. اگر چه فشرده سازی باعث ایجاد حالت پیكسلی در تصویر می*شود. ولی این حالت به سختی در عكس قابل مشاهده است. فتوشاپ دارای یك عملگر مات كننده* در داخل كادر محاوره*ای JPEG می*باشد كه استفاده از آن در برخی تصاویر مناسب است. با استفاده از این ابزار می*توانید بسیاری از لبه*های تیزی كه در نتیجه كاهش كیفیت در فایل Jpg ایجاد می*شود را محو و غیرقابل مشاهده كنید.

باز كردن فایل در فتوشاپ



گزینه File\Open را در فتوشاپ انتخاب كنید. كادر محاوره*ای Open نمایان می*شود. فایلی كه می*خواهید با استفاده از فرمت Jpeg فشرده شود را انتخاب نمائید.

تعیین گزینه*های Jpeg




گزینه File\Save For Web را برای باز كردن كادر محاوره*ای Save For Web انتخاب كنید. از لیست كشویی Optimized File Format گزینه JPEG را انتخاب كنید.كنترل كننده اصلی این قسمت نوار لغزنده Quality می*باشد. این قسمت تنظیم كننده درصد فشرده*سازی فایل بوده و متناظر با كیفیت است. این قسمت را در وضعیت high ، medium یا low قرار دهید. به یاد داشته باشید كه مقدار بالای كیفیت سبب افزایش حجم فایل می*شود و كیفیت پائین نیز فایل كوچكی را ایجاد می*كند.

مقایسه تنظیمات بوسیلهUp-4




در برچسب 4-Up كلیك كنید تا فایل را در 4 حالت مختلف مشاهده كنید. این وضعیت به شما امكان می*دهد تا با دقت بهتری تنظیمات مورد نیاز برای فایلی با كیفیت خوب و حجم مناسب را انتخاب كنید.

تنظیم نوار لغزنده Blur




برچسب Optimized را برای برگشت به آن صفحه كلیك كنید و نوار لغزنده Blur را افزایش دهید تا ببینید كه آیا این تنظیمات به نرم شدن و وضوح تصویر كمك می*كند یا خیر. OK را كلیك كنید و فایل را تغییر نام دهید تا بصورت بهینه شده و در یك فایل جداگانه ذخیره شود.

باز كردن مجدد فایل




برای بررسی كیفیت تصویری كه ایجاد كرده*اید گزینه File\Open را انتخاب كنید. از كادر محاوره*ای Open فایل بهینه شده*ای كه ایجاد كرده*اید را انتخاب كنید. برای بررسی مجدد در كیفیت، دو تصویر را با هم مقایسه كنید تا به رنگ بندی مناسبی دست پیدا كنید.

آزمایش فیلتر Unsharp Mask



از آنجا كه قالب*بندی JPEG حالت نرمی در فایل*های اصلی ایجاد می*كنند، می*توانید از یك فیلتر Unsharp Mask برای برگرداندن برخی جزئیات فایل استفاده كنید (هرچند انجام این كار حجم فایل را افزایش می*دهد).
گزینه Filter\Sharpen\Unsharp Mask را انتخاب كنید. مقدار فیلد Amount را بین 50% تا 100% تعیین كنید و مقدار فیلد Radious را بین 0.7 و 1.0 قرار دهید. در صورتی كه نتیجه مورد قبول بود، برای اعمال تغییرات دكمة OK را كلیك كنید. در غیر این صورت Cancel را انتخاب نمائید.

* توجه *
جابجا كردن تصویر


در حالیكه در كادر Save For Web كار می*كنید می*توانید نشانگر ماوس را بر روی تصویر در محیط پیش نمایش جابجا كنید. در این حالت شكل نشانگر ماوس بصورت دست تبدیل می*شود. با پائین نگه داشتن دكمة ماوس می*توانید تصویر را جابجا كنید بطوریكه جزئیات بیشتری مشاهده شوند. همچنین امكان انتخاب ذره بین و استفاده از بزرگ نمایی و كوچك نمایی نیز وجود دارد.

حفظ رنگ*های یكسان


برای حفظ یكسان*سازی رنگ*ها در هنگام فشرده*سازی تصویر، گزینة ICC Profile را انتخاب كنید.

[Behzad AZ]

نحوه ایجاد یك فایل GIF شفاف
مزیت مهمی كه فایل*های GIF نسبت به فایل*های JPEG دارند آن است كه می*توانید محیط معینی را در فایل*های gif بصورت شفاف و فاقد هر نوع رنگ تعیین كنید. به این معنی كه می*توانید افكت*های سایه*داری برای پس زمینه صفحات وب قرار دهید. محیط*های شفاف و بدون رنگ در فایل*های GIF كاملاً غیرقابل مشاهده هستند. در این كار عملی نحوة ایجاد تصاویر شفاف در Image Ready توضیح داده شده است.

باز كردن فایل در Image Ready



گزینه File\Open را در برنامه Image Ready انتخاب كنید. در كادر محاوره*ای Open، فایلی را كه می*خواهید بر روی آن كار كنید انتخاب كرده و سپس OK را كلیك نمائید.

انتخاب محیط مورد نظر




با استفاده از یكی از ابزارهای انتخاب*كننده در Image Ready (همانند قلم جادویی یا Magic Wand برای انتخاب محیط*های رنگ*بندی مشابه) محیطی از تصویر كه می*خواهید شفاف شود را انتخاب كنید.

اعمال یك پوشش (Mask)




پالت Layer را با انتخاب گزینه Window\Layer فعال كنید. در حالیكه قسمت انتخاب شده در مرحله قبل هنوز فعال است كلیدهای Ctrl + Alt را پائین نگه داشته و سپس دكمه Add A Mask را كه در پائین پالت Layers قرار دارد كلیك كنید. این عمل محیط انتخاب شده را دارای پوشش می*كند و پیش*نمایشی از طرح نهایی به شما می*دهد.

تنظیمات بهینه سازی




در صورتی كه شفاف سازی همان روش و شیوه مورد نظرتان است، گزینه Window\Optimize را انتخاب كنید تا پالت Optimize باز شود. سپس تنظیمات مناسب را انتخاب نمائید (مراجعه به كار عملی 3).

پیش نمایش در یك مرورگر



گزینه File\Preview In را انتخاب كنید یا دكمه Browser Preview را در نوار ابزار كلیك كنید تا فایل را به همان شكلی كه در مرورگرها دیده خواهد شد، مشاهده كنید.

ذخیره فایل بهینه شده




در صورتی كه تصویر در وضعیت مناسبی بود، مرورگر را بسته و به Image Ready بازگردید. سپس گزینه File\Save Optimized را انتخاب كنید تا فایل با استفاده از تنظیمات اعمال شده در پالت Optimize ذخیره شود.

*توجه*
تثبیت شفافیت


در صورتی كه شفافیت ایجاد شده در مرحله 3 در لایه پوششی مناسب نیست، دكمه Add A MasK را در پالت Layers انتخاب كنید و شفافیت قسمت شفاف انتخاب شده را با هر لایه پوششی رنگ پردازی كنید.

شفافیت در فتوشاپ


اعمال شفافیت و حذف رنگ*های زمینه در فتوشاپ نیز از طریق كادر محاوره**ای Save For Web امكان* پذیر می*باشد. رنگ قسمت مورد نظر را در پالت رنگ انتخاب كرده و سپس آیكون Transparency را كه در پائین پالت قرار دارد انتخاب كنید.

[Behzad AZ]

نحوه بهینه*سازی و تنظیمات رنگی gif


هر چه بیشتر با فشرده سازی gif كار می*كنید، بیشتر درمی*یابید كه مرحله مهم و حیاتی، كاهش تعداد رنگها به یك حداقلی است كه هنوز تصویر به خوبی قابل مشاهده باشد.اغلب مردم به این موضوع توجه نمی*كنند كه تنظیم مقدار 32 رنگ می*تواند همان كاری را انجام دهد كه تصویر در حالت هزاران رنگ انجام می*دهد.

باز كردن و ذخیره فایل در فتوشاپ




در فتوشاپ گزینه File\Open را انتخاب كنید. كادر محاوره*ای Open نمایان می*شود. فایلی كه می*خواهید به قالب gif تبدیل شود را انتخاب كرده و سپس Open را كلیك نمائید. سپس گزینه File\Save for Web را انتخاب نمائید. كادر محاوره*ای Save For Web فعال می*شود و فتوشاپ یك كپی دیگر از فایل اصلی را ایجاد می*كند.

تعیین تنظیمات اولیه gif



به كار عملی قبلی مراجعه كرده و نوع فشرده سازی gif و تنظیمات مربوط به Dither و Lossy را تعیین كنید. از لیست Colors كمترین مقدار را انتخاب كنید كه هیچ كاستی و كمبودی را نسبت به فایل اصلی ایجاد نمی*كند. برچسب Optimized را انتخاب كنید تا نتایج را مشاهده نمائید.

قفل كردن رنگ*های مهم




در زبانه Color Tab كلیك كنید. ابزار قطره چكان (Eyedropper) را در كادر محاوره*ای Save For Web انتخاب كرده و سپس یك رنگ برجسته و آشكار تصویر را انتخاب نمائید.
رنگ متناظر در قسمت Color Table برجسته می*شود. با كلیك كردن دكمه Lock كه در پائین Color Table قرار دارد، رنگ انتخاب شده را قفل كنید. انجام این كار سبب نگهداری و حفظ آن رنگ در هنگام فشرده سازی تصویر می*شود. برای سایر رنگ*های مهم موجود در تصویر نیز می*توانید این كار را تكرار كنید.

حذف رنگ*های بسته



در حالتی كه تصویر را در قسمت Optimized نگاه می*كنید، گزینه Sort by Luminance را از منوی كشویی پالت Color Table انتخاب كنید. در Table Color ، رنگ بسته مورد نظر را انتخاب كنید تا قفل شود و سپس از منوی پالت مزبور، گزینه Delete Color را انتخاب كنید. طرح موجود در پیش نمایش با حذف رنگ انتخاب شده مجدداً به روز رسانی می*شود. برای حذف رنگ*های غیرضروری دیگر می*توانید این مراحل را تكرار كنید تا به كیفیت قابل قبولی برسید.

تغییر رنگهای جدول رنگ




در حالتی كه رنگ*های مهم قفل شده هستند، تعیین كنید كه آیا نیاز به تغییر دیگر رنگ*ها دارید یا خیر. برای تغییر نمونه*های رنگ، روی رنگ موردنظر در Color Table دو بار كلیك كنید تا كادر محاوره*ای انتخابگر رنگ نمایان *شود. رنگ جاری را تغییر دهید و به آیكون Web-Safe برای انتخاب رنگهای مناسب وب توجه داشته باشید. دقت كنید كه زمانیكه این آیكون در كنار كادر رنگ انتخاب شده قرار داشته باشد؛ رنگ انتخاب شده، مناسب وب نیست. برای انتخاب نزدیكترین رنگ به رنگ انتخاب شده كه مناسب وب هم باشد، روی آیكون مزبور كلیك كنید.

ذخیره Color Table




در صورتی كه با انواع مشابهی از فایل تصویری مزبور كار می*كنید یا می*خواهید یك* سری از تصاویر موجود از رنگ بندی یكسانی استفاده كنند، فقط كافی است تا Color Table خود را ذخیره كنید. بدین منظور گزینه Save Color Table را از منوی پالت Color Table انتخاب نمائید. در كادر محاوره*ای Save As كه نمایان می*شود یك نام برای جدول رنگ*تان وارد كرده و سپس دكمة OK را كلیك نمائید.

* توجه *
استفاده از یك جدول رنگ ذخیره شده


برای بارگذاری یك جدول رنگ ذخیره شده و استفاده از آن در دیگر تصاویر، كادر محاوره*ای Save For Web را باز كرده و سپس گزینه Load Color Table را از منوی پالت Color Table انتخاب نمائید.

استفاده از رنگ*های مناسب وب


برای تبدیل رنگ*های موجود به رنگهای مناسب وب (Web-Safe) از نوار لغزنده Web Snap كه در گوشه راست بالای كادر محاوره*ای Save For Web قرار دارد، استفاده كنید.مقادیر بالا در نوار لغزنده Web Snap ، رنگ*های مناسب*تری را در پالت Web-Safe وارد می*كند. پالت Web-Safe به زیرمجموعه*ای از رنگ*ها اشاره دارد كه می*توانند در تمام مرورگرها و تمامی سیستم عامل*ها بطور دقیق ایجاد شده و نشان داده شوند. در صورتی كه می*خواهید همه كسانی كه تصاویر گرافیكی شما را از در طریق وب مشاهده می*كنند، همان رنگ*بندی موجود در سیستم شما را ببینند از Web – Safe استفاده كنید.

[Behzad AZ]

نحوه ساخت فایل*های gif برای وب
فایل*های gif كارایی زیادی دارند از جمله برای استفاده در وب آنها را می*توان تا حد امكان فشرده كرد. همانطور كه در كارهای عملی بعدی مشاهده خواهید كرد، فایل*های gif امكان ساخت انیمشن و یا شفافیت را در عین حفظ كوچكی فایل می*دهند. البته فایل*های gif از تصاویر عكس بخوبی پشتیبانی نمی*كنند. در صورتی كه مایلید تا جزئیات بیشتری از فایل*های عكس در اختیار داشته باشید، استفاده از قالب*بندی نوع Jpg مناسب*تر از gif است.

باز كردن و ذخیره فایل در فتوشاپ



فایلی كه می*خواهید به قالب gif تبدیل كنید را در فتوشاپ باز كنید. سپس گزینه File\Save For Web را انتخاب نمائید. كادر محاوره*ای Save For Web نمایان می*شود و فتوشاپ یك كپی از فایل اصلی را ایجاد می*كند و فایل اصلی را بدون اعمال تغییرات ترك می*كند.

انتخاب قالب*بندی بهینه شده فایل



از اولین منوی كشویی در كادر محاوره*ای، گزینه gif را انتخاب كنید.

تنظیم نوارهای لغزنده Dither و Lossy




نوارهای لغزنده Dither و Lossy را انتخاب كنید. مقدار Lossy را 100 و Dither را 0 تنظیم كنید. برای كاهش اندازه فایل
حتی الامكان باید مقدار Dither را كاهش داده و مقدار Lossy را افزایش دهید. تصویر بر اساس تغییرات اعمال شده شما تغییر می*كند. برای درك بهتری از تغییرات اعمال شده، به محیط پیش*نمایش تصویر دقت كنید.

پیش*نمایش تنظیمات




در برچسب Oplimized كلیك كنید تا نتیجه تغییرات اعمال شده به فایل را مشاهده كنید. در صورتی كه تصویر دانه دانه شد مقدار Lossy را كاهش دهید و در صورتی كه تصویر درخشان شد مقدار Dither را افزایش دهید.

تعیین تعداد رنگها




هدف بعدی، ایجاد یك فایل GIF با حداقل تعداد رنگ*ها می*باشد. مقدار 32 یا 64 (برخی فایل*ها حتی می*توانند از 8 و یا 4 رنگ استفاده كنند)را تعیین كنید. منوی كشویی Colors را كلیك كرده و تعداد رنگ مورد نظر را از لیست انتخاب نمائید. البته می*توانید مقدار رنگ*ها را با انتخاب كردن عدد مربوط در كادر و تایپ مقدار مورد نظر تعیین كنید.

ذخیره فایل



دكمة OK را كلیك كنید تا كادر Save For Web بسته شود. كادر محاوره*ای Optimized As Save باز می*شود . نام و موقعیت فایل را بررسی كنید و در صورتی كه مشكلی وجود نداشت برای ذخیره فایل دكمة Save را كلیك نمائید.

*توجه*
استفاده از جداول 2-UP و 4-UP


اگر در خصوص چندین نوع فشرده سازی دچار شك و تردید هستید بر روی برچسب*های 2-up و یا 4-up در كادر محاوره*ای Save For Web كلیك كنید. این برچسب*ها شما را قادر می*سازند تا حالت*های مختلف را در كنار هم مقایسه كنید و حالت مناسب را انتخاب نمائید.

پیش نمایش در مرورگر


در صورتی كه مطمئن نیستید فایل*های تصویری*تان چگونه در مرورگر دیده خواهند شد، از ویژگی Browser Preview استفاده كنید. در حالیكه هنوز در كادر Save For Web هستید می*توانید یا بر روی دكمه Browser Preview كلیك كنید و یا از منوی Select Browser برای انتخاب نوع مرورگر استفاده كنید. دكمه و منو پائین كادر محاوره*ای قرار دارند. در این مثال*ها، دكمه آیكون Internet explorer را نشان می*دهد. برای دسترسی به منو نیز می*توانید در فلش جهت*دار كنار این دكمه كلیك كنید.