استفاده از فتوشاپ در طراحی وب

استفاده از فتوشاپ در طراحی وب



استفاده از فتوشاپ در طراحی وب

مجموعه: گرافیک دستی و کامپیوتری

 
می‌توان گفت فتوشاپ، نرم‌افزاری چندکاره است. یعنی تقریبا در هر جایی که به طراحی یا کار روی تصویر و عکس نیاز باشد خودی نشان می‌دهد و قابل استفاده است. بر مبنای نوع کاربرد می‌توان کاربران فتوشاپ را به ۳ دسته تقسیم کرد:
 
۱- طراحان گرافیست
۲- عکاسان
۳- طراحان وب و چندرسانه‌ای
 
تاکنون ابزارهای فراوانی را برای دسته‌های اول و دوم با هم بررسی کرده‌ایم و با کاربرد آنها آشنا شده‌ایم‌، اما برای دسته سوم که همان طراحان وب هستند زیاد صحبت نکرده‌ایم. در این مقاله می‌خواهیم درباره طراحی صفحات وب به کمک فتوشاپ و ابزارها و فرامینی که به ما در این زمینه کمک می‌کنند صحبت کنیم و با آنها آشنا شویم.
 
هر صفحه وب از ۲ بخش تشکیل شده است؛ بخش اول محیط گرافیکی صفحه و بخش دوم محیط کدنویسی است که به کمک آن محیط گرافیکی ایستا به یک محیط پویا تبدیل می‌شود. به جرات می‌توان گفت به همان اندازه که کدنویسی درست در طراحی وب‌سایت مهم است، طراحی گرافیکی وب سایت نیز اهمیت ویژه‌ای دارد. اینجاست که فتوشاپ پا به میدان می‌گذارد و طراح وب می‌تواند با کمک آن به بهترین نحو ممکن قدرت کدنویسی خود را به نمایش بگذارد. معمولا قبل از شروع به کار طراحی وب‌سایت، طرح جامعی از سایت و صفحات مورد نیاز آن تهیه و با توجه به آن قالب گرافیکی سایت طراحی می‌شود. پس از اتمام طراحی، با انتقال قالب به محیط برنامه‌های طراحی وب، ارتباط بین قسمت‌های مورد نظر تعریف شده و خروجی نهایی صورت می‌گیرد.
 
اولین کار برای ایجاد قالب سایت، تعریف یک پروژه جدید با اندازه مورد نظر سایت است. برای این کار ابتدا از قسمت File گزینه New را انتخاب و پروژه جدید را تعریف می‌کنیم. فقط باید دقت کرد که در محیط وب واحد اندازه‌گیری بر مبنای پیکسل بوده و از استاندارد معینی تبعیت می‌کند. برای سهولت کار می‌توانیم در پنجره New با کلیک در قسمت Preset و انتخاب گزینهWeb از اندازه‌های استانداردی که در قسمت Size ظاهر می‌شود استفاده کنیم. رزولوشن محیط وب نیز برخلاف چاپ که تاکید کردیم ‌۳۰۰ انتخاب شود، باید ۷۲ یا حداکثر ۹۶ باشد، زیرا بیشتر از این مقدار تغییر چندانی در کیفیت تصویر ایجاد نمی‌شود، فقط حجم فایل خروجی را بیهوده افزایش داده‌ایم.
 
در نهایت با تایید ابعاد پروژه وارد محیط کاری فتوشاپ می‌شویم. استفاده از خطوط راهنمایی که در شماره گذشته درباره آن صحبت کردیم در طراحی قالب، وب یکی از کاربردی‌ترین بخش‌هاست و به کمک آن می‌توانیم نسبت به مشخص کردن موقعیت و محل قسمت‌های مختلف سایت خود اقدام کنیم. پس در ابتدای کار با مشخص کردن 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‌ پنجره‌ای مطابق شکل ظاهر می‌شود که از آن می‌توانیم برای ایجاد تناسب دلخواه بین کیفیت و حجم تصویر از بین حالت‌های فراوانی که وجود دارد، استفاده کنیم.
۱- فعال‌کردن حالت مقایسه‌ای تصویر بین حالت اصلی و حالت انتخاب شده برای ایجاد خروجی کم حجم.
 
۲- پیش‌نمایش تصویر قبل و بعد از اعمال تغییرات.
 
۳- توضیحات مربوط به اندازه تصویر نهایی و سرعت بارگذاری آن در اینترنت.
 
۴- گزینه‌های قابل انتخاب برای تنظیم حالت دلخواه تصویر نهایی از بین ۳ فرمت JPEG، Gif و PNG (از حالت‌های پیشفرض موجود در قسمت Preset نیز می‌توان استفاده کرد).
 
۵- نمایش یا عدم نمایش متا دیتا مخفی شده در عکس.
 
۶ – جدول رنگ‌های استفاده شده در صورتی که حالت Gif انتخاب شده باشد.
 
۷- تنظیم سایز تصویر نهایی.
 
۸- تنظیم انیمیشن موجود در تصویر در صورت تعریف انیمیشن و ایجاد خروجی Gif.
در نهایت با کلیک روی دکمه save و انتخاب حالت دلخواه Image Only یا html Only یا هر دو، فایل خود را با کمترین حجم ممکن ذخیره می‌کنیم.
منبع:jamejamonline.ir


چند گام بالاترنحوه ذخیره فایل در فرمت‌های مختلفانداختن حاشیه و کادرهای ساده و شیک برای عکس ها بوسیله CSSچگونه بر روی یک پوشه در سایت پسورد بگذاریم؟آموزش آسان ساخت URL شناخته شده در Google+افزایش سرعت اجرای برنامه‌ها با ارتقای حافظهراز موفقیت پرتال های پر بازدید در بهینه سازی وب سایت هایشان چیست؟