مي‌توان گفت فتوشاپ، نرم‌افزاري چندكاره است. يعني تقريبا در هر جايي كه به طراحي يا كار روي تصوير و عكس نياز باشد خودي نشان مي‌دهد و قابل استفاده است. بر مبناي نوع كاربرد مي‌توان كاربران فتوشاپ را به 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 يا هر دو، فايل خود را با كمترين حجم ممكن ذخيره مي‌كنيم.

کار را با باز کردن عکس یک شیر آغاز می کنیم. قصد داریم آبی را که از یک شیر جاری شده است طراحی کنیم.

ابتدا با استفاده از ابزار pen یک مسیر آب درست می کنیم.

یک لایه جدید درست می کنیم و سپس بر روی مسیر لایه کنترل کلیک می کنیم تا مسیر را انتخاب کنیم .

ناحیه انتخابی را با رنگ سفید پر می کنیم .

از منوی انتخاب modify>>contract را اجرا می کنیم.

یک ناحیه انتخابی ۲ پیکسلی انتخاب می کنیم .      

ناحیه انتخابی را مشکی می کنیم.

یک ناحیه بسته دیگر مانند قبلی را بسازید و آن را با رنگ سفید و سپس سیاه پر کنید .

از منوی فیلتر distort>>glass را انتخاب کنید .

مانند چیزی که نشان داده شده است ، تنظیمات را اعمال کنید .

لایه را دابلیکیت کنید و حالت رنگ را به color burn تغییر دهید .

ابزار کدر کردن (blur) را از منوی اصلی ابزارها ،  انتخاب کنید

هردو لایه آب را انتخاب کنید و سپس کنترل +E را فشار دهید تا آنها را یکی کنید . لایه ی یکی شده آب را کدر کنید .

کلید کنترل +U را فشار دهید تا پنجره hue/saturation را باز کنید و سپس تنظیمات زیر را اعمال کنید .

یکی از مهمترین قسمت های یک بنر و یا یک تصویر تبلیغاتی متن آن تصویر است. هر چقدرهم تصویر زیبا و گویا باشد باز یک نوشته می تواند آن را کاملتر کند و مخاطب  بیشتری را به سمت خودش جذب کند. اما این نوشته ویژگی های مختلفی دارد که از اندازه اش گرفته و تا رنگ آن باید با دقت خاصی انتخاب شود. مطمئنا شما نوشته ها و جمله های تبلیغاتی ای را دیده اید که به جای داشتن رنگ درونشان یک تصویر فیکس شده است که این خود یک زیبایی خاصی می دهد، و اگر شما دوست دارید که طراحان چگونه این کار را انجام می دهند با ما باشید.

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

۱- فیکس کردن یک عکس درون تمام نوشته

۲-فیکس کردن چند عکس درون یک نوشته

۱- فیکس کردن یک عکس درون تمام نوشته
1- برنامه فتوشاپ را باز کنید و عکس موردنظرتان را انتخاب کنید.

۲-  با استفاده از منوی Window > Layers ستون لایه ها را به فتوشاپ اضافه کنید؛ مانند تصویر زیر از منوی Layer > Duplicate Layer برای اضافه‌کردن لایه‌ای با نام Background copy استفاده کنید. مجدداً با استفاده از همین گزینه یک لایه‌ی دیگر نیز ایجاد کنید. برای قرار دادن لایه جدید بین دو لایه قبلی کافی است آن را بکشید و میان دولایه قبلی رها کنید. برای سفید کردن رنگ لایه‌ی میانی ابتدا این لایه را انتخاب کنید و سپس از منوی Edit > Fill > Foreground color استفاده کنید.

۳- ابزار Text Tool را از نوار ابزار در سمت راست، اجرا کنید. حالا لایه‌ی متن روی لایه‌ی سفید میانی ایجاد شده است. اگر ترتیب لایه‌ها به گونه‌ی دیگریست، با درگ‌کردن و جابجایی مشکل را حل کنید.

۴- بهتر است از یک فونت ضخیم استفاده کنید که تصویر داخل متن، نمایی خوب داشته باشد. رنگ فونت هم بهتر است در تضاد با تصویر باشد تا هنگام جابجایی برای انتخاب یک موقعیت خوب، کارتان راحت‌تر شود.

۵- متن مورد نظر خود را تایپ کنید و با استفاده از دستور Free Transform در منوی Edit به چرخاندن و تغییر ابعاد نوشته بپردازید. می‌توان از کلید میانبر Ctrl+T هم برای اجرای این دستور استفاده کرد.

۶- ابتدا لایه‌ی Background copy را انتخاب و سپس با استفاده از منوی Layer > Create Clipping Mask کار را تکمیل کنید.

۷- ممکن است به اعمال افکت‌هایی مثل سایه، برجستگی و هایلایت نیاز داشته باشید. روی لایه‌ی نوشته راست کلیک کنید و با استفاده از اولین گزینه یعنی Blending Options، افکت‌های جالب‌تر را مطابق سلیقه‌ی خود اضافه کنید. در پایان حاصل کار خود را علاوه بر فرمت‌های رایج، به صورت psd که فایل قابل ویرایش فتوشاپ است، ذخیره کنید تا بعداً در صورت نیاز به تغییر نوشته یا عکس زیر آن، فایل‌های دیگر ایجاد کنید.

فیکس کردن چند عکس درون یک نوشته
روش دوم کاملاً متفاوت است؛ چرا که می‌توان چندین عکس مختلف را درون حروف مختلف جای داد.

۱- عکسی را که می‌خواهید به عنوان پس‌زمینه استفاده کنید را باز کنید؛ می‌توان یک فایل خالی هم ایجاد کرد که با استفاده از منوی File > New و سپس مشخص‌کردن اندازه و دیگر مشخصات، امکان‌پذیر است.

۲- از قسمت Tools ابزار Text را اجرا کنید و مثل قبل پس از انتخاب فونت و اندازه، اولین حرف را تایپ نمایید. پس از پایان روی علامت تیک در نوار Option کلیک کنید. برای اعمال افکت‌های دیگر، مثل قبل روی لایه‌ی نوشته راست کلیک کرده و از Blending Options استفاده کنید. پس از پایان مراحل، نوبت به کپی‌کردن لایه به عنوان حرف بعدی می‌رسد.

۳- لایه‌ی حرف اول در حال حاضر انتخاب شده است؛ اما روی این لایه در پنجره‌ی لایه‌ها، راست کلیک کنید و با استفاده از گزینه‌ی Duplicate Layer، آن را با نام دلخواه خود کپی کنید. با استفاده از کلید کنترل و درگ‌کردن، می‌توان این لایه را حرکت داد. روش دیگر این است که از نوار ابزار، ابزار Move را انتخاب و سپس لایه را درگ کنید. از هر روشی که انتخاب کرده‌اید، لایه‌ی کپی شده را حرکت بدهید چرا که دقیقاً زیر لایه‌ی قبلی قرار گرفته و نباید به این صورت کار را ادامه داد. پس از حرکت‌دادن، مجدداً روی ابزار Text کلیک کنید و جلوی اولین حرف، کلیک کنید. حرف اول را پاک کرده و دومین حرف را تایپ کنید. توجه داشته باشید که اگر در نقطه‌ی مناسب کلیک نکنید، یک لایه‌ی متن دیگر ایجاد می‌شود و لایه‌ی قبل ویرایش نخواهد شد.

پس از پایان ویرایش لایه‌ی دوم، تیک را در نوار بالای صفحه یا Option bar بزنید.
۴- مرحله‌ی قبلی را برای تک‌تک حروف‌ تکرار کنید و در صورت نیاز با ابزار Move حروف را حرکت دهید و در موقعیت دلخواه بگذارید.

۵- عکسی که می‌خواهید در هر کدام از حروف قرار بگیرد را پس از انتخاب لایه‌ی حرف مورد نظر، درگ کنید و در فتوشاپ دراپ سازید. در این صورت هر عکس روی لایه‌ی حرف مورد نظر قرار می‌گیرد.

۶- نوبت به استفاده از Clipping Mask است که کلید میانبر آن Alt+Ctrl+G می‌باشد. از منوی Layer هم می‌توان آن را پیدا کرد. روی تک‌تک لایه‌های عکس کلیک کرده و کلید میانبر را فشار دهید تا درون حروف، عکس‌ها قرار بگیرند. تمام مجموعه‌ی حروف را می‌توان روی یک عکس پس‌زمینه‌ی مناسب قرار داد. درست مثل تصویر زیر:

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