طراحی قالب سایت با فتوشاپ

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

علم گرافیک در سایت های دیجیتالی رسوخ کرده و شامل موارد گوناگونی از قبیل عکس، فیلم، فونت، حاشیه و … می باشد. ظاهر جذاب یک وب سایت نه تنها باعث زیبایی بلکه باعث جذب بیشتر مشتری و موفقیت بیشتر در کار می شود. برای داشتن یک وب سایت زیبا بایستی قالب های زیبا داشته باشیم.

قالب وب سایت

قالب ها طرح های از پیش راه اندازی شده هستند که هر کدام ظاهری متفاوت از دیگری دارد و طراحان بنا به نیاز و سلیقه خود از آنها برای رسیدن به اهداف خود استفاده می کنند. طراحان می توانند این قالب ها را ویرایش و یا از نو طراحی کنند. در واقع قالب ها، طرح های گرافیکی هستند که مورد استفاده طراحان برای راه اندازی سایت های مختلف قرار می گیرند. استفاده از قالب های گرافیکی بسیار ساده است و نیازی به دانش برنامه نویسی ندارد. حال که تا حدی با قالب های گرافیکی و اهمیت آن در طراحی سایت آشنا شدیم به بررسی انواع طراحی قالب می پردازیم. در نظر داشته باشید ساخت قالب وردپرس با استفاده از فتوشاپ نیز امکان دارد و در حقیقت هر نوع سایتی را می توان با فتوشاپ طراحی نمود. البته پس از طراحی گرافیک لازم است قالب توسط برنامه نویس پیاده سازی گردد و  به کدهای html، css و php تبدیل گردد.

طراحی قالب سایت

1. طراحی استاتیک

همانطور که از نام آن بر می آید این طراحی یک طراحی ثابت می باشد. یعنی قالب هایی از این دسته ریسپانسیو نیستند و مطابق انواع مرورگر ها تغییر سایز نمی دهند. ولی مزیت آن اینست که سایت هایی که به صورت استاتیک طراحی می شوند بسیار سبک تر و سریعتر نسبت به سایر سایت ها با طراحی های دیگر می باشند.

2. طراحی دو بعدی

این نوع طراحی بهره کمی از تکنیک های گرافیکی می برد و اولویت این نوع طراحی ها ارائه محتوا و اطلاعات می باشد.

3. طراحی داینامیک (پویا)

طراحی وب سایت های پویا با انواع زبان های برنامه نویسی مانند .Net و یا جاوااسکریپت و … انجام می شود.  بنابراین دانش زبان برنامه نویسی در این نوع طراحی مهم است. اما از طرفی مدیریت این طراحی ها با سیستم های تولید محتوا ساده می باشد.

4. طراحی یک صفحه ای

در این طراحی همه چیز در یک صفحه نمایش داده می شود و صفحه جدیدی برای هر عنوان و موضوعی باز نمی شود.

5. طراحی ریسپانسیو

در این نوع طراحی صفحه وب کاربر در هر دستگاهی بدون به هم ریخته شدن مطالب باز می شود. یعنی صفحه وب کاربر مطابق صفحه نمایش دستگاه تغییر سایز می دهد. زبان برنامه نویسی استفاده شده در این طراحی HTML و CSS می باشد. امروزه به دلیل اینکه تعداد زیاد افرادی هستند که از دستگاه هایی غیر از کامپیوتر های شخصی برای جستجو در فضای اینترنت استفاده می کنند استفاده از این نوع طراحی فراگیر شده است.

6. طراحی انیمیشنی

همانطور که از نام آن مشخص است در این نوع طراحی از انیمیشن و یا تصاویر متحرک برای جذابیت بیشتر استفاده می شود و زبان برنامه نویسی استفاده شده در این طراحی HTML و CSS می باشد.

7. طراحی سه بعدی

در این نوع طراحی از تصاویر سه بعدی استفاده می شود.

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

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

تبدیل فایل فتوشاپ به قالب HTML

ابتدا بایستی اقلام گرافیکی به کار رفته در فایل فتوشاپ جداسازی شوند و به صورت تصاویر مجزا ذخیره شوند و سپس قالب با استفاده از زبان های برنامه نویسی  HTML و یا CSS برای بارگذاری و نمایش در فضای اینترنت آماده شود.

چگونگی جدا سازی عناصر گرافیکی

این کار با ابزار slice انجام می شود. ولی رعایت چند نکته در این زمینه مهم است. چون استفاده از گرافیک حجم بالایی دارد بهتر است حدالامکان از CSS استفاده شود و در صورت لزوم و ضرورت از گرافیک و تصویر استفاده شود. این کار باعث تسریع بارگذاری قالب می شود. بعد از برش قسمت های لازم از منو فایل گزینه  save for web and devices  را انتخاب کنید و عکس ها را برای ایجاد فایل ذخیره کنید.

طراحی قالب سایت شخصی

1. ایجاد سند جدید

برای طراحی قالب ابتدا بایستی یک سند درست کنید و عرض استاندارد 1024 پیکسل را برای قالب خود در نظر بگیرید.

2. اضافه کردن خطوط راهنما

برای طراحی خطوط راهنما بایستی ابتدا View>New Guide را اجرا کنید. خطوط راهنما برای خطوط عمودی بایستی 20،50،115،230،550،570،875 پیکسل و برای خطوط افقی 60 پیکسل باشد.

3. درست کردن پوشه

در قسمت طرح ها پوشه هایی با اسامی work،left sidebar و description ایجاد کنید. این کار به مدیریت آسان تر کمک می کند.

4. طراحی left sidebar panel

ابزار رسم مستطیل را از جعبه ابزار انتخاب کنید و یک مستطیل رسم کنید و تصویر ایجاد شده را در فایل left sidebar  قرار دهید.

5. طراحی قاب عکس

یک دایره ایجاد کنید و در وسط تصویر قرار دهید.

6. اضافه کردن عکس

یک تصویر به قاب اضافه کنید.

7. نوشتن نام دارنده سایت

نام صاحب سایت را زیر دایره ای که کشیده اید یا همان قاب بنویسید.

8. اضافه کردن توضیحات

می توانید توضیحاتی، چند پیکسل پایینتر از نام صاحب سایت اضافه کنید

به این ترتیب صفحه ای دارای عکس و نام دارنده سایت و توضیحاتی در مورد او در فتوشاپ ایجاد کرده اید.

ایجاد یک قالب سایت با استفاده از فتوشاپ

لطفا توجه داشته باشید:

1. شما نیاز دارید یک نسخه نصب شده از نرم افزار فتوشاپ را روی دستگاه خود داشته باشید.
2. برای دنبال کردن مراحل بهتر است عکس های مرتبط داشته باشید.

مراحل ایجاد طرح

1. فتو شاپ را باز کنید و فرمان File>New از منوی اصلی را اجرا کنید. پنجره جدید نمایش داده می شود. پارامتر ها مطابق عرض: 13280 پیکسل و ارتفاع: 867 پیکسل رزولوشن: 300 پیکسل تنظیم کنید. سپس دکنه Ok را انتخاب کنید. حال یک پرونده جدید فتوشاپ باز شده است.
2. یک طرح جدید ایجاد کنید و نام آن را به پس زمینه تغییر هید و در فتوشاپ باز کنید .
3. سپس دوباره یک طرح دیگر ایجاد کنید و نام آن را به جواهرات تغییر دهید. می خوتهیم یک قالب تمرینی برای جواهرات ایجاد کنیم. سپس از جعبه ابزار، ابزار Rectangular Marquee را انتخاب کنید و یک مستطیل عمودی ایجاد کنید.
4. ابزار Gradient را انتخاب کنید یا G را فشار دهید تا این ابزار فعال شود. مقادیر hex را برای گره شیب سمت راست روی #000000 و گره شیب سمت چپ را روی #580900 قرار دهید و شیب شعاعی را به انتخاب اضافه کنید.
5. در مرحله بعد هر تصویر HD از یک دستبند را به جعبه شیب اضافه کنید. دو طرح جعبه گرادیان و دستبند را انتخاب کنید و CTRL + e را فشار دهید. به نظر می رسد که تصویر حلقه و طرح پس زمینه در حال ادغام با هم می باشند. زیرا هر دو یک دارند. برای اینکه عکس حلقه مجزا از طرح پس زمینه به نظر برسد درخشش بیرونی به آن اضافه می کنیم.
6. روی طرح حلقه ها دوبار کلیک کنید. پنجره Layer Style نمایش داده می شود. برای گزینه Outer Glow پارامتر ها را در فیلد structure مطابق Opacity :75% تنظیم کنید.
7. دقیقا همین روال را برای چند عکس جواهرآلات دیگر با همین پارامتر ها تکرار کنید.
8. از ابزار متنی برای وارد کردن برچسب ها به عناوین تصاویر استفاده کنید و تصاویر را عنوان بندی نمایید. بهتر است سایز و فونت نوشته ها برای همه تصاویر یکسان باشد. درخشش بیرونی را به متن ها همانطور که پیشتر گفته شد اضافه کنید.
9. همچنین نام شرکت را اضافه کنید. سایه بان را روی نام شرکت فعال کنید. پنجره Layer Style باز می شود. از این پنجره گزینه Drop-Shadow  را انتخاب کنید و در نهایت دکمه Ok را انتخاب کنید.
10. می توانید متون دیگری با فونت و سایز های متفاوت برای تبلیغات در طرح های دیگری ایجاد کنید.
11. متن های دیگری برای شماره تماس، آدرس و گزینه های دیگر می توانید در طرح های جداگانه از چپ به راست اضافه کنید. متن نوشته ها بهتر است مطابق سایز و رنگ متون اولیه باشد. متون تمام صفحه و موزیک را در طرح های مجزا به طرح خود اضافه کنید. متن های اضافه شده در مرحله 9 و 10 را تراز کنید. می توانید تصویری از یک آویز را نیز برای زیبایی و جذابیت بیشتر به طرح خود اضافه کنید.
12. قالب سایت آماده است. می توانید تصاویر و منو های دیگری به دلخواه به قالب خود اضافه نمایید. فقط در نظر داشته باشید اگر از فلش استفاده می کنید هیچ افکتی به تصاویر اضافه نکنید.