استفاده از فتوشاپ در طراحی وب : می‌توان گفت فتوشاپ، نرم‌افزاری چندكاره است. ...
می‌توان گفت فتوشاپ، نرم‌افزاری چندكاره است. یعنی تقریبا در هر جایی كه به طراحی یا كار روی تصویر و عكس نیاز باشد خودی نشان می‌دهد و قابل استفاده است. بر مبنای نوع كاربرد می‌توان كاربران فتوشاپ را به 3 دسته تقسیم كرد:
1- طراحان گرافیست
2- عكاسان
3- طراحان وب و چندرسانه‌ای
تاكنون ابزارهای فراوانی را برای دسته‌های اول و دوم با هم بررسی كرده‌ایم و با كاربرد آنها آشنا شده‌ایم، اما برای دسته سوم كه همان طراحان وب هستند زیاد صحبت نكرده‌ایم. در این مقاله می‌خواهیم درباره طراحی صفحات وب به كمك فتوشاپ و ابزارها و فرامینی كه به ما در این زمینه كمك می‌كنند صحبت كنیم و با آنها آشنا شویم.
هر صفحه وب از 2 بخش تشكیل شده است؛ بخش اول محیط گرافیكی صفحه و بخش دوم محیط كدنویسی است كه به كمك آن محیط گرافیكی ایستا به یك محیط پویا تبدیل می‌شود. به جرات می‌توان گفت به همان اندازه كه كدنویسی درست در طراحی وب‌سایت مهم است، طراحی گرافیكی وب سایت نیز اهمیت ویژه‌ای دارد. اینجاست كه فتوشاپ پا به میدان می‌گذارد و طراح وب می‌تواند با كمك آن به بهترین نحو ممكن قدرت كدنویسی خود را به نمایش بگذارد. معمولا قبل از شروع به كار طراحی وب‌سایت، طرح جامعی از سایت و صفحات مورد نیاز آن تهیه و با توجه به آن قالب گرافیكی سایت طراحی می‌شود. پس از اتمام طراحی، با انتقال قالب به محیط برنامه‌های طراحی وب، ارتباط بین قسمت‌های مورد نظر تعریف شده و خروجی نهایی صورت می‌گیرد.
اولین كار برای ایجاد قالب سایت، تعریف یك پروژه جدید با اندازه مورد نظر سایت است. برای این كار ابتدا از قسمت File گزینه New را انتخاب و پروژه جدید را تعریف می‌كنیم. فقط باید دقت كرد كه در محیط وب واحد اندازه‌گیری بر مبنای پیكسل بوده و از استاندارد معینی تبعیت می‌كند. برای سهولت كار می‌توانیم در پنجره New با كلیك در قسمت Preset و انتخاب گزینهWeb از اندازه‌های استانداردی كه در قسمت Size ظاهر می‌شود استفاده كنیم. رزولوشن محیط وب نیز برخلاف چاپ كه تاكید كردیم 300 انتخاب شود، باید 72 یا حداكثر 96 باشد، زیرا بیشتر از این مقدار تغییر چندانی در كیفیت تصویر ایجاد نمی‌شود، فقط حجم فایل خروجی را بیهوده افزایش داده‌ایم.
در نهایت با تایید ابعاد پروژه وارد محیط كاری فتوشاپ می‌شویم. استفاده از خطوط راهنمایی كه در شماره گذشته درباره آن صحبت كردیم در طراحی قالب، وب یكی از كاربردی‌ترین بخش‌هاست و به كمك آن می‌توانیم نسبت به مشخص كردن موقعیت و محل قسمت‌های مختلف سایت خود اقدام كنیم. پس در ابتدای كار با مشخص كردن Header و Footer و محل چیدمان ستون‌های سایت خود، خطوط راهنمایی را در موقعیت مناسب آنها قرار می‌دهیم.
در ادامه به كمك ابزارهای موجود مثل ابزارهای برداری، شیب رنگ، Layer Style و... به طراحی قالب مورد نظرمان اقدام می‌كنیم. یكی از مهم‌ترین نكاتی كه یك طراح سایت باید در نظر داشته باشد، كم حجم كردن سایت برای سهولت بارگذاری آن در اینترنت‌های كم‌سرعت است و با توجه به این كه بیشتر حجم یك سایت نیز مربوط به تصاویر استفاده شده در آن است، بنابراین به كمك فتوشاپ و ترفندهای طراحی سایت می‌توانیم سایتی با كمترین حجم ممكن بدون صرف‌نظر كردن از جلوه‌های گرافیك تولید كنیم.
یكی از ترفندهای طراحی سایت استفاده از دستور تكرار (Repeat) در كدنویسی سایت است كه در آن با تكرار یك تصویر به صورت پشت سر هم، اندازه وسیعی از فضای مورد نظر بدون افزایش حجم پوشانده می‌شود. مثلا برای پوشش پس‌زمینه سایت یا قسمت سرصفحه یا پاصفحه سایت می‌توانیم از این ترفند استفاده كنیم و حجم سایت خود را تا حد بسیار زیادی كاهش دهیم.
برای تولید تصویری كه با تكرار آن، شكل مورد نظر ایجاد می‌شود می‌توانیم از قسمت جعبه ابزار فتوشاپ و مجموعه ماركی ابزار Single Row یا Single Column را برای انتخاب یك پیكسل از تصویر به صورت افقی یا عمودی از محیط كاری استفاده كنیم. درمرحله بعد با قرار دادن خطوط راهنما در ابتدا و انتهای قسمت انتخاب‌شده، به كمك ابزار Crop آن بخش را برش داده و از آن برای تكرار و ایجاد حالت مورد نظر استفاده كنیم.
یكی دیگر از قسمت‌های كاربردی فتوشاپ برای طراحان وب، ابزار Slice در زیر مجموعه ابزار Crop است كه به كمك آن طراح می‌تواند تصویر خود را به قسمت‌های كوچك‌تری تقسیم كرده و باعث افزایش سرعت بارگذاری سایت شود. حتی می‌تواند برای هر بخش انتخاب شده آدرس URL دلخواهی را تعریف كند تا كاربر با كلیك روی آن بخش، به صفحه مورد نظر طراح هدایت شود. برای این كار كافی است پس از تعریف Slice در گوشه سمت چپ و بالای آن دوبار كلیك كنید و در پنجره باز شده آدرس مورد نظر و سایر مشخصات دلخواه را بنویسید. یكی دیگر از قابلیت‌های مهم فتوشاپ برای طراحان وب تولید خروجی مناسب وب از صفحه طراحی شده بدون استفاده از برنامه‌های طراحی وب است. برای این كار پس از اتمام طراحی، از قسمت File گزینه save for web را انتخاب كرده و با تعریف فرمت دلخواه از قسمت Preset گزینه save را انتخاب می‌كنیم.
البته كاربرد اصلی این بخش، تولید تصاویر كم‌حجم به منظور استفاده در صفحات اینترنتی است، اما همان‌گونه كه گفته شد می‌توانیم این تصاویر را همراه صفحه html مورد نظر نیز تولید و آن را در سایت خود آپلود كنیم.
از فرمت‌های كم حجم رایج عكس برای استفاده در صفحات وب می‌توان به JPEG، Gif و PNG اشاره كرد كه از بین آنها فرمت Gif و PNG جهت ذخیره‌سازی لایه‌های شفاف نیز كاربرد دارد كه البته حجم بیشتری نیز نسبت به فرمت JPEG دارد. در صورت استفاده از تصاویر شفاف روی دیگر تصاویر در وب، كادری اطراف تصویر مورد نظر ظاهر نمی‌شود و از این بابت حرفه‌ای‌تر خواهد بود.
با انتخاب گزینه Save for Web از قسمت File پنجره‌ای مطابق شكل ظاهر می‌شود كه از آن می‌توانیم برای ایجاد تناسب دلخواه بین كیفیت و حجم تصویر از بین حالت‌های فراوانی كه وجود دارد، استفاده كنیم.
1- فعال‌كردن حالت مقایسه‌ای تصویر بین حالت اصلی و حالت انتخاب شده برای ایجاد خروجی كم حجم.
2- پیش‌نمایش تصویر قبل و بعد از اعمال تغییرات.
3- توضیحات مربوط به اندازه تصویر نهایی و سرعت بارگذاری آن در اینترنت.
4- گزینه‌های قابل انتخاب برای تنظیم حالت دلخواه تصویر نهایی از بین 3 فرمت JPEG، Gif و PNG (از حالت‌های پیشفرض موجود در قسمت Preset نیز می‌توان استفاده كرد).
5- نمایش یا عدم نمایش متا دیتا مخفی شده در عكس.
6 – جدول رنگ‌های استفاده شده در صورتی كه حالت Gif انتخاب شده باشد.
7- تنظیم سایز تصویر نهایی.
8- تنظیم انیمیشن موجود در تصویر در صورت تعریف انیمیشن و ایجاد خروجی Gif.
در نهایت با كلیك روی دكمه save و انتخاب حالت دلخواه Image Only یا html Only یا هر دو، فایل خود را با كمترین حجم ممكن ذخیره می‌كنیم.
منبع:jamejamonline.ir
ویدیو : استفاده از فتوشاپ در طراحی وب