۱. اولین قدم تنظیم سایز فایلی است که می خواهید در آن کار کنید. بهتر است برای طراحی یک اینفوگرافیک اندازه فایل را کاغذ A3 با DPI 300 درنظر بگیرید. دلیل این انتخاب قابلیت چاپ بر پوسترهای A2 می‌باشد بدون اینکه کیفیت آن کاهش یافته باشد و درعین حال فضای قابل توجهی را در حافظه سیستم ذخیره می‌نماید.

۲. گام بعدی تنظیم رنگ پس زمینه است و در اینجا از بازه رنگی خاکستری کم رنگ تا سفید استفاده شده است. برای ناحیه خاکستری کد c4c4c4 و برای قسمت سفید کد fcfcfc درنظر گرفته شده است. این اقدامات باید در کادر تنظیمات Layer Style انجام شوند که این کادر با دوبار کلیک کردن بر گزینه Layer در Layers panel فعال می‌شود. برای این طراحی در قسمت داخلی رنگ سفید انتخاب شده است.

۳. برای ترسیم دایره باید از Ellipse tool استفاده نموده و یک دایره بزرگ در مرکز فایل بکشید. بهتر است Opacity را به ۰% و Storke Size را به ۳ تغییر دهید. بدین ترتیب می‌توان رنگ پس‌زمینه را از میان دایره مشاهده کرد.

۴. در یک لایه جدید بهتر است اشکال مدنظر خود را ترسیم کنید که این کار با استفاده از Pen tool میسر است. اشکال رسم شده در تصویر نشان داده شده‌اند.

۵. در Paths tab می توانید آخرین path کشیده شده را ببینید. دستور Ctrl+right-click را بر آن اجرا کرده، Fill Path را انتخاب نموده و بعد از رنگ پیش‌زمینه استفاده نمایید. در اقدام بعدی، path را deselect کرده و به قسمت Layers tab بازگردید. برای اینکه بهتر کار کنید می‌توانید لایه دایره را  مخفی (Hide) نمایید. از گرادیانت انعکاسی۱۴۱ درجه استفاده نموده و کد رنگ‌های f9f9f9 و ededed را بکار بگیرید.

۶. در این مرحله باید یک لایه جدید دیگر بسازید ولی دقت نمایید که موقعیت آن قبل از لایه پیشین باشد درنتیجه می‌توانید جلوه ۳D را با Pen tool ایجاد نمایید. حال، مانند قبل از گزینه Fill استفاده نمایید ولی این بار گرادیانت خطی ۹۰ درجه را با کدهای رنگی a7a6a6 و ffffff بکار گیرید.

۷. باز هم لایه جدیدی ایجاد کنید و آن را بالاتر از سایر لایه‌ها قرار دهید. برای انجام بهتر ادامه مرحله بهتر است شکل دایره اصلی را مجدد ظاهر نمایید و مانند تصویر اجزای سبزی را زیر قسمت سفید ایجاد کنید. برای ایجاد رنگ می‌توانید از گرادیانت انعکاسی ۱۳۳ درجه با کد رنگ‌های ۹ad429 و ddf470 استفاده کنید.

۸. همانطور که برای قسمت سفید انجام دادید، لایه جدیدی زیر لایه سبز ایجاد نمایید، با استفاده از Pen tool سایه زیرین تصویر را شکل دهید و برای آن گرادیانت خطی ۹۰- درجه با کدهای رنگی ۸۷bc0f و ۷۹aa08 را بکار گیرید. به یاد داشته باشید که تمامی رنگ‌ها و درجات فقط بعنوان راهنما برای شما درنظر گرفته شده‌اند.

۹. باز هم به قسمت سبز برگردید. یک لایه جدید زیر لایه سبز اصلی ایجاد نمایید و قسمت بالایی شکل سبز را طراحی کنید. بهتر است طراحی بگونه ای باشد که یک سطح صاف مانند چمن را نشان دهد. برای انتخاب رنگ در این مرحله، از گرادیانت خطی ۹۰ درجه با کدهای رنگی ۹ddb16 و d7ff46 استفاده کنید. این قسمت از طراحی بهتر است از سایر المان ها روشن تر باشد.

۱۰. حال، می‌خواهیم اشکالی را ترسیم کنیم که نشانگر صخره هستند. پس بعد از اینکه شکل موردنظر خود را رسم کردید، از گرادیانت خطی ۷۰- درجه با کدهای رنگی ۸d6b50 و d1bc98 استفاده نمایید.

۱۱. در این مرحله، می‌خواهیم عنصر آب را اضافه کنیم. با استفاده از دایره اصلی، شکلی برای قسمت آبی رنگ ترسیم نمایید. اگر برای انتخاب رنگ آبی با مشکل مواجه شدید به شما پیشنهاد می کنیم که از گرادیانت انعکاسی ۳۶- با کدهای رنگی ۳۳abbb و ۳۶e6ed استفاده کنید.

۱۲. بعنوان قسمت پایانی طراحی شکل دیگری به رنگ سفید رسم نمایید. می‌توانید از گرادیانت رنگی مشابه قسمت سفید در بالا استفاده نمایید فقط بهتر است رنگ آبی را نیز به آن اضافه نمایید چراکه در انتها می خواهیم جلوه‌هایی از قطرات آب را به نشانه ذوب شدن یخ داشته باشیم.

۱۳. در این مرحله می‌خواهیم جلوه‌هایی از قطرات آب را اضافه کنیم. این کار را براحتی می‌توان با Pen tool انجام داد. از دستور رنگی آبی مشابه بالا استفاده کنید با این تفاوت که قسمت انتهایی قطرات را تیره‌تر کنید.

۱۴. در قسمت انتهایی می‌خواهیم شکلی نمایانگر کویر را به طراحی اضافه کنیم. مراحل طراحی قبلاً ذکر شده است فقط تنها تفاوت در اینجا تغییر رنگ‌هاست که می‌توان از کدهای رنگی dbc146 و ecf774 استفاده کرد. در این مرحله، طراحی کره زمین به پایان رسید. تنها چیزی که باقی می‌ماند، قسمت نوشته‌های اینفوگرافیک است.

منبع: www.webdesignermag.co.uk

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

انتخاب و ترکیب مناسب

اولین گام در این مرحله انتخاب درست و بجای تصاویر است. بعنوان مثال برای وب‌سایت Adventure.com که مرتبط با سفرهای ماجراجویانه است بهتر است تصاویر متشکل از رنگ‌های روشن و موضوعات جالب باشند. علاوه‌براین، باید به اندازه تصاویر دقت لازم را داشته باشیم و المان‌های UI در برگیرنده عکس‌ها را درنظر بگیریم. درنتیجه باید تصاویر را متناسب با محتوای متنی مدنظر Crop کنیم.

ترکیب سبک‌های تصاویر در فوتوشاپ

در مرحله بعد تنظیمات سبک عکاسی است که باید متناسب با چیدمان سایت و سایر عکس‌های مورد استفاده باشد. در فوتوشاپ، می‌توان با هم‌پوشانی رنگ‌ها، تنظیمات جالبی روی تصاویر انجام داد. در قسمت Layer Styles هر تصویر می‌توان از Colour Overlay استفاده کرد. در این تصویر دیده می‌شود که رنگ عکس روشن‌تر می‌شود. بعد می‌توان Blend Mode را از Normal به Exclusion تغییر داد و سپس Opacity را به ۳۰% یا کمتر کاهش داد.

استفاده از تکنیک Polish در فوتوشاپ

بر اساس کنتراست عکس و المان‌های UI دربرگیرنده هر تصویر، می‌توان Opacity را در Colour Overlay کم یا زیاد کرد. حتی در فوتوشاپ با تغییر کلی رنگ‌ها نیز می‌توان جلوه‌های جالبی در تصاویر ایجاد کرد. می‌توان با تنظیم رنگ‌های گرم و سرد ظاهری زیبا به عکس‌ها داد.

منبع: www.webdesignermag.co.uk

۱. اولین مرحله از تبدیل تم‌های فتوشاپ به صفحات HTML ایجاد یک فولدر جدید به نام webdites است که داخل آن نیز می‌بایست دو فولدر دیگر تحت عناوین images و css نیز ایجاد کنید. در این دو فولدر تمامی فایل‌های مربوط به تبدیل تم‌های فتوشاپ به صفحات HTML ذخیره می‌شوند.

۲. مرحله دوم  با باز کردن فایل فتوشاپ تم شروع می‌شود. در اینجا آموزش روی یک لوگو نمایش داده می‌شود. در نرم‌افزار فتوشاپ تمامی لایه‌های مرئی غیر از لایه Logo را نامرئی کنید. در قسمت Image گزینه Trim را انتخاب نموده و Transparent Pixels را تیک بزنید. در نهایت می‌توانید تصویر خود را در فولدر images به نام logo.png ذخیره نمایید.

۳. در این مرحله تغییراتی در تصویر پس‌زمینه داده می‌شود پس می‌بایست تمامی لایه‌ها به استثنای لایه background غیرفعال باشند. بعد می‌توان با گزینه Crop اندازه تصویر را کوچک کرد. پس از انجام تغییرات فایل را با فرمت png. ذخیره نمایید.

۴. اکنون وقت آن است که به سراغ xhtml رفته و تنظیمات قسمت عنوان را انجام داد. اینجا بهتر است از ویرایشگر متن Dreamweaver استفاده نموده و کدی که در ادامه آمده است کپی نمایید. این اولین ایندکس ایجاد شده در html است که می‌توان آن را در فولدر websites ذخیره نمود.

۶. برای مرحله ششم، تمامی کارهای مرحله پنجم را تکرار می‌کنیم با این تفاوت که حرکت برش باید از پایین به بالا انجام شود. در نهایت می‌توان تصویر را تحت عنوان welcomebg-bottom.png ذخیره کرد.

۷. تا اینجا تنظیمات عکس‌ها انجام شده و تنها کاری که باید انجام داد این است اضافه کردن استایل، رنگ و تعیین موقعیت المان‌هاست. پس در  Dreamweaver یک فایل css.  ایجاد کرده و کد زیر را در آن کپی نمایید. این فایل را در فولدر css و به نام style.css ذخیره نمایید.

۸. در این مرحله بهتر است فایل ایندکس را گسترده تر نماییم که لزوماً المان‌های متفاوت را در صفحا سایت در موقعیت اصلی خود قرار می‌دهند. کد html مربوط به این قسمت در زیر آورده شده است.

۹. در مرحله بعد برای گذاشتن تصاویر thumbnail تنها کاری که باید کرد این است که به فتوشاپ مراجعه کرده و با استفاده از ابزار Crop تک تک تصاویر را برش می‌زنیم. بهتر است برای هر تصویر به اندازه ۵ پیکسل فاصله بگذاریم.

۱۰. با داشتن تصاویر متعدد باید موقعیت آن‌ها را در صفحه بدرستی انتخاب کرد که این مشکل را تنها می‌توان به کمک CSS حل نمود. کدهای مربوطه در ادامه آورده شده‌اند.

۱۱. مرحله بعد در فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML مربوط به قرار دادن markup ها در فایل html است که همراه با تگ های تصویری می باشند. دقت داشته باشید که دستور div به تنهایی در markup ها استفاده می شود و این امر برای قرار گرفتن div ها در موقعیت اصلی خود ضروری است. کدها زیر، شما را در این قضیه راهنمایی می نمایند.

۱۲. برای تنها کادر پس‌زمینه از تکنیک بکار رفته برای welcome box استفاده می‌کنیم. به فتوشاپ مراجعه نموده، لایه About me box را فعال کزده و عمل برش را با استفاده از ابزار crop انجام دهید. همانطور که در مراحل ۵ و ۶ آورده شده است یک بار crop کرد از بالا یه پایین و بار دیگر از پایین به بالا خواهد بود.

۱۳. برای داشتن button باید دو تصویر ایجاد شود پس در فتوشاپ لایه بالای لایه button که دربرگیرنده متن می باشد را نامرئی نمایید. سپس یک بار از بالا و یک بار از پایین عمل crop را انجام دهید.

۱۴. در این قسمت از فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML باید مجدداً  از ابزار crop استفاده کرده و عنوان تصویر بلاگ را برش بزنیم.

۱۵. در پایان هم نوبت به علائم شبکه‌های اجتماعی می‌رسد. پس در فتوشاپ تصاویر مربوط به هر کدام را crop کرده و تصاویر را در فولدر images ذخیره نمایید.

منبع: www.webdesignermag.co.uk

مراحل اولیه بدین ترتیب است:

• فایل GIF را در فوتوشاپ باز کنید.
• در قسمت window، گزینه Timeline یا Animation را باز کنید.
• همچنین، باز در قسمت window گزینه Layers را انتخاب نموده و اطمینان حاصل نمایید که پنجره Layers باز است.

در ادامه به سه روش اختصاصی سازی تصاویر GIF را آموزش می‌بینید.

روش اول تغییر تصاویر GIF در فوتوشاپ – تنظیم لایه‌ها

در پنجره Layers بالاترین لایه را انتخاب کنید و گزینه ‘Create new adjustment layer’ را برای ایجاد لایه تنظیمات جدید کلیک نمایید. برای ایجاد هر نوع تغییری می‌توانید تنظیمات مربوط به آن را انتخاب کنید. هرگونه تغییری جلوه‌های جدیدی به تمامی لایه‌های زیرین می‌دهد. در این قسمت می توانید رنگ ها و کنتراست را تغییر دهید. زمانی که تمام تغییرات مدنظر اعمال شد برای ذخیره کردن فایل بهتر است از گزینه ‘Save for Web and Devices’ استفاده کنید. در این زمان بهتر است میزان Transparency، Matte و سایر گزینه های انیمیشن را چک کنید.

مثال:

bbbbbbbbbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش دوم تغییر تصاویر GIF در فوتوشاپ – گزینه‌های ترکیب

درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. به پنجره لایه ها رفته و اولین لایه را انتخاب کنید. آیکون fix را کلیک کرده و منوی Blending Options را برای داشتن گزینه های ترکیب باز کنید. تغییرات دلخواه را روی اولین لایه اعمال کنید. در مثال زیر، تنها جلوه هم پوشانی رنگ ها نشان داده شده است. زمانی که تمامی تغییرات اعمال شدند روی لایه راست کلیک کرده و Copy Layer Style را انتخاب کنید. سپس همه لایه ها را انتخاب کرده، مجدداً راست کلیک کنید و در این حالت، Paste Layer Style را برگزینید. تمامی لایه ها افکت مورد نظر شما را خواهند داشت. در پنجره Animation/Timeline در قسمت بالا سمت راست، More menu  را انتخاب کنید. گزینه Make Frames from Layers را برای هر لایه فعال کنید تا بطور جداگانه در فریم قرار بگیرند. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bbb bbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش سوم تغییر تصاویر GIF در فوتوشاپ – فریم ها

اگرچه این روش از سایر روش ها وقت‌گیرتر است ولی انعطاف‌پذیری زیادی دارد چراکه انیمیشن‌های GIF فقط مجموعه‌ای از تصاویر است و این قابلیت وجود دارد که بطور مجزا هر یک از فریم‌ها را تغییر داد و درنهایت جلوه‌ای ویژه بر انیمیشن ایجاد می‌شود. درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. می توانید هر جلوه‌ای که می‌خواهید در لایه‌ها بطور جداگانه ایجاد کنید. در مثال زیر، افکت Color Halftone بر هر لایه اعمال شده است. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bb bbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

 منبع: www.creativebloq.com

۱) اندازه و رزولوشن تصاویر GIF: در ابتدای کار باید اندازه و رزولوشن فایل را انتخاب کنیم. از آنجایی اندازه های متنوعی برای تصاویر وجود دارند، بهترین و رایج ترین انتخاب می‌تواند ۴۶۸*۸۰ پیکسل و رزولوشن ۷۲dpi باشد.

۲) ایجاد تغییرات لازم: پس از اینکه لایه های متعدد برای هر اسلاید ایجاد شدند، می تواند با استفاده از قسمت Menu گزینه view را انتخاب کرده و بعد به سراغ گزینه Animation بروید. برای اینکه انیمیشن از جذابیت بیشتری برخوردار باشد می توانید لایه های متنی را کپی کرده، تغییرات لازم را اعمال نموده و از برخی جلوه های تصویری استفاده نمایید تا بدین ترتیب نتایج زیبایی بدست آورید.

۳) توالی تصاویر GIF: بر اساس مکان قرار گیری برخی از طراحان سایت ها نیاز دارند تا انیمیشن بعد از زمان معینی متوقف شود. گاهاً نیز اتفاق می افتد که تصویر برای همیشه از کار افتاده و دیگر تحرکی ندارد. برای جلوگیری از چنین مشکلاتی بهتر است چهارچوب زمانی را زیر هر اسلاید تنظیم نموده و فایل GIF نهایی را بصورت Save for Web ذخیره نمایید. درنهایت، این امکان وجود دارد که تنظیمات پایانی را پیش از ذخیره نمودن فایل تغییر داده و تنظیمات دلخواه خود را نهایی سازید.

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

۱. طراحی سایت نا منظم: که امروزه یکی از پر طرفدارترین طراحی‌های جدید دنیای گرافیست می‌باشد، به سایت‌هایی گفته می‌شود که از خصوصیات زیر برخوردارند:

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

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

طراحی سایت

۲. طراحی سایت خلوت: این نوع طراحی سایت، در ظاهر ساده هستند اما تفکری در پی ساخت آن‌ها نهفته است. استفاده از المان‌های کم و گرافیکی و استفاده از دو یا سه رنگ در طراحی، به آن‌ها ظاهری متفاوتی داده است و برخلاف دسته اول، به تمیزی معروفند. از نظر طراحی کاملاٌمتمایز، حرفه ای و مدرن هستند. همچنین پیام “صاحب این سایت مشتاق است” و ” صاحب این سایت قابل اعتماد است” را به بازدیدکننده القا می‌کند.  این گونه سایت‌ها برای همه مناسب است غیر از کسانی که دوست ندارند تفاوت شایانی با بقیه داشته باشند. این تفاوت آن‌ها را می‌ترساند و سایت‌های استاندارد را می‌پسندند.

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

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

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