فتوشاپ در طراحي صفحات وب : نکات کاربردی

این مقاله با موضوع ” فتوشاپ در طراحي صفحات وب : نکات کاربردی” اقتباس شده از منابع منتشر شده در پایگاه کتاب های درسی است. امروزه وب در حال گسترش است و وبسایت ها نقش بسیار مهمی را در معرفی، تبلیغات، بازاریابی و فروش محصولات شرکت ها و موسسات ایفا می کنند. در این میان، نقش گرافیک صفحات وب در جلب کاربران بیشتر را نمی توان نادیده گرفت بدین لحاظ و به سبب اهمیت بالایی که گرافیک در یک پروژه وب دارد در این مقاله با اصول کاربردی با استفاده از فتوشاپ در طراحي صفحات وب آشنا خواهید شد.

آشنايي با فضای کاری وب

برای استفاده از فتوشاپ در طراحي صفحات وب، یکی از فضاهای کاری در فتوشاپ (فضای کاری Web ) برای طراحی وب آماده شــده است. در نسخه های قبلی، برنامه دیگری بهنام Ready Image به همراه فتوشاپ ارائه مي شــد.Image Ready  برنامه گرافيكي شركت Adobe  براي وب مي باشد. اين برنامه بسياري از قابليت هاي تصحيح رنگ، نقاشــي و انتخاب ابزارهايي كه همانند فتوشــاپ مي باشند را شامل مي شود. در Image Ready علاوه بر ابزارهاي فتوشــاپ،

مجموعه اي از ابزارهاي قدرتمند وب براي بهينه سازي تصويرها و مشاهده نمونه پيش نمايش آنها ارائه شده است. همچنين با استفاده از آن مي توان تصويرهاي متحرك (Animation) مبتني بر قالببندي Gif ايجاد كرد.

از نســخه CS2 به بعد نرم افزار فتوشــاپ، دیگر نرمافزار Image Ready به همراه آن ارائه نشــده است و قابلیت های آن در فضای کاری وب فتوشــاپ قرار گرفته است. برای اســتفاده از این ویژگی ابتدا با استفاده از Web/Workspace/Windows  وارد فضای کاری وب شده و از امکانات آن استفاده کنید.

فرمت فايل هاي مهم فتوشاپ در طراحي صفحات وب

فتوشاپ در طراحي صفحات وب سه استاندارد قالب بندي تصوير در وب را ارائه می کند كه عبارتند از:

• Gif
• Jpeg
• Png

در اينترنت هرچه حجم فايل ها كمتر باشد زمان بارگذاري آن كمتر خواهد شد. در اين مورد فتوشاپ مي تواند در كم كردن حجم فايل ها كمك نمايد. یکی از روش ها برای ایجاد صفحات گرافیکی وب اســتفاده از فرمت های فایلی کم حجم می باشد. که سه فرمتPng ،Jpeg  و Gif از فرمت های اصلی برای استفاده در وب می باشند. البته پس از تعیین فرمت فایل، حجم آن نیز باید به صورتی تنظیم گردد که به راحتی و با سرعت بالا قابل دسترسی باشد.

معمولا فایل های تصویری با حجم فایلی حدود 30 کیلوبایت، فایل های مناســبی برای صفحات وب هســتند. البته برای انتقال فایل های بزرگتر نیز راه حلهایی وجود دارد. قبل از اینکه به بررسی یک صفحه وب و اجزاء تشکیل دهنده آن بپردازیم شما را با ویژگی های فرمت های فایلی وب آشنا می کنیم.

1. فرمت jpeg (Joint Photographic Experts Group)

یکی از فرمت های تصویری که فتوشاپ در طراحي صفحات وب ارائه می دهد jpeg  است. از آن جايي که فرمت  jpegقابلیت پشــتیبانی6 میلیون رنگ را دارد، مناســب برای ارسال عکس و تصاویری اســت که درجه رنگ های تدریجی در آن ها وجود دارد. البته توجه داشــته باشید که چون بعضی از مرورگرهای وب نمی توانند این تعداد رنگ را پشــتیبانی کنند با روش فشرده ســازی بســیاری از این اطلاعات رنگی حذف خواهند شــد. بنابر این چون این فرمت قابلیت فشرده ســازی و تغییر حجم فایل را داراست یکی از فرمت های مناسب برای وب می باشد.

همان طورکه قبلا گفتیم برای اينكه در فتوشــاپ بتوانيد فايل خود را با قالببندي JPEG ذخيره كنيد بايد ابتدا مد رنگ را در حالت RGB قرار دهید. ســپس با استفاده از گزينه Save as/ File مي توانيد فايل خود را در قالب JPEG ذخيره كنيد يا اينكه با اســتفاده از گزينه Web for Save / File عمل ذخيره سازي فایل مورد نظر را انجام دهید. در كادر محاورهاي Save as نامي براي آن تعيين كرده و بر روي دكمه Save كليك نماييد. پس از آن كادر محاورهاي زير ظاهر مي شود.

همانطور که در کادر محاورهای فوق مشاهده می کنید گزینه های زیر وجود دارد:

• گزينه Standard Baseline حالت استاندارد و پیش فرض در فرمت فایلی Jpg می باشد.
• گزينه Optimized Baseline اين گزينه رنگ هاي موجود در فايل را بهينهســازی كرده و حجم فایلی کوچکتری را ايجاد مي‌كند.
• گزينه Progressive برای قرار دادن تصویر در وب این گزینه بسیار مناسب می باشد چرا که با این روش، دریافت تصاویر از Server در چند مرحله صورت گرفته به طوری که در هر مرحله کیفیت تصویر افزایش می یابد.

2. فرمت Gif (Graphic Interchange Format)

یکی دیگر از فرمت های مورد اســتفاده در وب می باشــد که قابلیت پشتیبانی از 256 رنگ دارد. درحالی که می دانیــم کامپیوترهای مکینتاش و IBM در برنامه های مرورگر وب، قادر به نمایش تنها 216 رنگ مشــترک می باشند. به همین دلیل، از این فایل ها نمی توان برای انتقال تصاویری با درجه های رنگ تدریجی استفاده کرد و این یکی از تفاوت های اساســی بین فرمت Gif و jpeg محســوب می شود. به هر حال از این فرمت معمولا برای تصاویر پس زمینه، ایجاد دکمه ها و بخش های گرافیکی دیگر می توان استفاده کرد.

3. فرمت png (Portable Network Graphic)

ســومین فرمت کاربردی فتوشاپ در طراحي صفحات وب که به دلیل جدید بودنش توســط همه مرورگرها پشتیبانی نمی شــود فرمت فایلی Png می باشــد. از این فرمت دو نوع 8 بیتی و 24بیتی وجــود دارد در فرمت 8 بیتی از رنگ های 8‌‌ بیتی استفاده می شود و ضمن اینکه توسط مرورگرهای قدیمی پشتیبانی می شود.

از آنجايي که در این فرمت هنگام فشرده سازی اطلاعات از بین نمی رود تصاویری که حاوی حروف متنی باشند را به خوبی حفظ می کند. ضمن اینکه به این نکته نیز توجه داشــته باشید روش فشرده سازی png از فشرده سازی gif پیشرفته تر است. یعنی فایل هایی که با فرمت png ایجاد می شوند حدود 10 تا 30 درصد نسبت به فایل هایی با پسوند gif حجم کمتری اشغال می کنند.

در png بیســت و چهار بیتی، از آنجايي که از سیســتم رنگ 24‌‌ بیتی اســتفاده می گردد این فرمت برای تصاویری ‌‌به کار می رود که از درجه های رنگی پیوســته اســتفاده شده اســت. این فایل ها نسبت به فایل های jpeg  بسیار کم حجم تر می باشند. البته برای ذخیره تصاویری که بر روی پس زمینه شفاف قرار دارند و ویژگی یکنواخت کردن لبه ها نیز به آنها اعمال شده باشد، بهتر است از فایلهای png هشت بیتی استفاده کرد.

چراکه وقتی این فایل ها را به نرم افزارهای دیگر مانند نرم افزارهای تولید چند رســانه ای و ســایر نرم افزارهای مشابه ‌‌انتقال می دهید که قابلیت حذف زمینه شــفاف را دارند. زمینه آنها به راحتی و بســیار دقیق حذف خواهد شــد.

به عنوان مثال برای ســاخت دکمه ها با زمینه شــفاف برای استفاده در نرم افزارهای تولید محتوای الکترونیکی، فرمت GIF یا Png هشت بیتی نتیجه بهتری ایجاد خواهد کرد.

ايجاد تصويرهاي متحرك (Animation)

یکی از رسانه های بســیار جذاب فتوشاپ در طراحي صفحات وب که می تواند تعداد کاربران و بازدیدکنندگان یک سایت را به میزان قابل توجهی افزایش دهد، انیمیشــن می باشــد که با فرمت های مختلفی از جمله GIF و Swf قابل اضافه کردن به یک صفحه وب می باشد. فضای کاری وب می تواند فرمت های فایلی فوق را ایجاد نماید. برای این منظور در محیط نرم افزار قرار گرفته و برای تولید یک انیمیشن مراحل زیر را انجام دهید.

روش اول: براي ايجاد انيميشن بصورت زير عمل كنيد

1. فایــل psd را بــاز کرده ســپس از آن یک Duplicate  یا کپی تکراری به نام fish Sample ایجاد کنیــد و فایل اصلی را ببندید. تمام لایه ها به جز لایه اولي را در پالت لایه مخفی كنيد.
2. دكمــه روي بــر Duplicates selected Frame كليك كنيد تا يك فريم ديگر در پالت Animation ايجاد شود.
3. دكمــه روي بر Tweens Animations Frame در پائيــن پالت Animation كليــك كنيد تاكادر محاورهاي مقابل باز شود:

4. از كادر محــاورهاي فوق در مقابل Frames add to مقــدار فريم هايي كه مي خواهيد به فريم هاي موجود اضافه شوند را وارد كنيد.
5. در بخش Layers گزينه Layer Selected را انتخاب كنيد.
6. در بخش Parameters پارامترهايي از لایه هایی را كه مي خواهيد، انتخاب نماييد و Ok كنيد.
7. در پالت Animation فريم دومي را انتخاب كرده و از پالت Layer لایه های اول و دوم را قابل نمایش كنيد.
8. در پالت Animation فريم ســومي را انتخاب كرده و از پالت Layer لایه اول و سوم را قابل نمایش و بقيه را مخفی كنيد.
9. مراحل 7 يا 8 را تا اتمام لایه انجام دهيد.
10. براي اجراي انيميشــن بر روي دكمه Play در پایين پالت Animation كليك كنيد و براي توقف انيميشن بر روي دكمه Stop كليك نماييد.
11. در پایان از منوی file و زیرگزینه Save For web با فرمت Gif آن را ذخیره نمایید.

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

برای ساخت انیمیشن برای فتوشاپ در طراحي صفحات وب در محیط نرم افزار قرار گرفته و برای تولید مراحل زیر را انجام دهید.

1. از منوی file دستور New را اجرا کرده و پهنا و ارتفاع فایل و همچنین محتویات زمینه فایل را تنظیم نمایید.
2. در حالیکه پالت Layer و Animation باز است از جعبه ابزار فتوشاپ توسط ابزارهای Ellipse Tool یک دایره بر روی صفحه ترسیم نمایید.

3. از پایین پالت animation بر روی دکمه Duplicate selected Frame کلیک کنید و با اســتفاده از ابزار move موقعیت دایره ترسیمی را بر روی صفحه نسبت به موقعیت قبلی تغییر دهید.
4. همین عمل را می توانید برای ده فریم دیگر انجام داده و در هر فریم موقعیت دایره را در پنجره فایل تغییر دهیــد یا می توانید با ایجاد فریم ابتدا و انتها و انتخاب آنهــا روی دکمه Tweens animation frames کلیک کرده و در پنجره باز شــده تعداد فریم هایی که می‌‌خواهید اضافه شود را وارد کنید تا فریم های بین فریم ابتدا و انتها به صورت خودکار ایجاد شوند. برای مشخص کردن مدت زمان پخش فریم روی علامت مثلث آن کلیک کرده و زمان مورد نظر خود را انتخاب کنید.
5. براي اجراي انيميشــن بر روي دكمه Play در پایين پالت Animation كليك كنيد و براي توقف انيميشن بر روي دكمه Stop كليك نماييد.
6. در پایان از منوی file و زیرگزینه Save For web با فرمت Gif آن را ذخیره نمایید.

ذخیره تصاوير برای وب

براي ذخیره تصاویر مورد اســتفاده در صفحات وب، در فتوشــاپ می توان از ابزاری به نام Slice استفاده کرد. برای آشنایی بیشتر با این ابزار و کاربردهای آن مراحل زیر را انجام دهید:

1. ابتــدا در جعبه ابزار برنامه، ابزار Slice را انتخاب کنید. ســپس بــا درگ کردن تصوير را به نواحي مختلف تقسيم كنيد.
2. با اســتفاده از ابزار Select Slice مي توان نواحي تقســيم بندي شده را كنترل کرد. به عبارت ديگر با درگ اصلاع ناحيه انتخاب شده توسط ابزار Select Slice مي توان ناحيه را تنظيم کرد و يا اينكه پس از انتخاب ناحيه، مي توان با فشردن كليد Delete تقسيم بندي را حذف کرد.

3. پــس از ایجاد تمامی Sliceهای مورد نیاز از منوی File گزینه Save for Web& Devices را انتخاب کنید.
4. با این عمل هر کدام از برش ها به صورت یک فایل جداگانه ذخیره می شوند که می توانید از هر کدام به منظور خاصی در صفحات وب استفاده کنید. در مثال ذکر شده هر کدام از برش ها در یک فایل ذخیره می شود.

قاب بندی صفحات وب: نگاهی به برچسب های کاربردی