تبیان، دستیار زندگی
می‌توان گفت فتوشاپ، نرم‌افزاری چندکاره است. یعنی تقریباً در هر جایی که به طراحی یا کار روی تصویر و عکس نیاز باشد خودی نشان می‌دهد و قابل استفاده است.
بازدید :
زمان تقریبی مطالعه :

فتوشاپ و طراحی وب


می‌توان گفت فتوشاپ، نرم‌افزاری چندکاره است. یعنی تقریباً در هر جایی که به طراحی یا کار روی تصویر و عکس نیاز باشد، خودی نشان می‌دهد و قابل استفاده است.


بهینه سازی پروژه‌های فتوشاپ

بر مبنای نوع کاربرد می‌توان کاربران فتوشاپ را به سه دسته تقسیم کرد:

1- طراحان گرافیست

2- عکاسان

3- طراحان وب و چندرسانه‌ای

در این مقاله می‌خواهیم درباره طراحی صفحات وب به کمک فتوشاپ و ابزارها و فرامینی که به ما در این زمینه کمک می‌کنند صحبت کنیم و با آن‌ها آشنا شویم.

هر صفحه وب از دو بخش تشکیل شده است؛ بخش اول، محیط گرافیکی صفحه و بخش دوم محیط کد نویسی است که به کمک آن، محیط گرافیکی ایستا به یک محیط پویا تبدیل می‌شود. می‌توان گفت به همان اندازه که کد نویسی درست، در طراحی وب‌سایت مهم است، طراحی گرافیکی وب سایت نیز اهمیت ویژه‌ای دارد. اینجاست که فتوشاپ پا به میدان می‌گذارد و طراح وب می‌تواند با کمک آن به بهترین نحو ممکن قدرت کد نویسی خود را به نمایش بگذارد. معمولاً قبل از شروع به کار طراحی وب‌سایت، طرح جامعی از سایت و صفحات مورد نیاز آن تهیه و با توجه به آن قالب گرافیکی سایت طراحی می‌شود. پس از اتمام طراحی، با انتقال قالب به محیط برنامه‌های طراحی وب، ارتباط بین قسمت‌های مورد نظر تعریف شده و خروجی نهایی صورت می‌گیرد.

اولین کار برای ایجاد قالب سایت، تعریف یک پروژه جدید با اندازه مورد نظر سایت است. برای این کار ابتدا از قسمت File گزینه New را انتخاب و پروژه جدید را تعریف می‌کنیم. فقط باید دقت کرد که در محیط وب، واحد اندازه‌گیری بر مبنای پیکسل بوده و از استاندارد معینی تبعیت می‌کند. برای سهولت کار می‌توانیم در پنجره New با کلیک در قسمت Preset و انتخاب گزینه Web، از اندازه‌های استانداردی که در قسمت Size ظاهر می‌شود استفاده کنیم. رزولوشن محیط وب نیز برخلاف چاپ، باید 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 یا هر دو، فایل خود را با کمترین حجم ممکن ذخیره می‌کنیم.

منبع: جام جم


باشگاه کاربران تبیان - ارسالی از: zakeezare