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

دوره طراحی قالب صفحات وب در فتوشاپ نیازمند گذراندن دوره های فتوشاپ مقدماتی و  فتوشاپ پیشرفته می باشد.

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

این اولین قسمت از یک سری دو قسمت است که به شما می آموزد چگونه چیدمان را در فتوشاپ و سپس نحوه تبدیل آن به یک طراحی وب سازگار با استاندارد (XHTML )تغییر دهید.

جهت طراحی یک قالب ساده طبق مراحل زیر پیش روید.

سند فتوشاپ خود را آماده کنید

1 -  با استفاده از تنظیمات تصویر زیر ، یک سند جدید ((Ctrl / Cmd + N  در Photoshop ایجاد کنید.

web design.jpg

تنظیمات واحدها و خط کش ها را تغییر دهید

2 - اطمینان حاصل کنید که در واحد پیکسل کار می کنید ، که واحد ثابت استاندارد برای طراحی وب است. تنظیمات زیر را برای خط کش خود از پنجره گفتگوی Preferences  ((Ctrl / Cmd + K تنظیم کنید. روی Units & Rulers کلیک کنید و اطمینان حاصل کنید که همه موارد را مطابق شکل زیر نشان داده اید.

web design one.jpg

برای تعیین منطقه محتوا خطوط راهنما را اضافه کنید

3 خط کش  Photoshop را از View > Rulers فعال کنید. با فشار دادن "Ctrl / Cmd + R" ، حالت خط کش را تغییر دهید. همچنین پنل اطلاعات را از Window > Info (کلید میانبر: F8) باز کنید. پنل اطلاعات بسته به ابزار انتخاب شده اطلاعات مفیدی می دهد. با فشار دادن "M" ، ابزار Rectangular Marquee را انتخاب کرده و یک جعبه به عرض 120 پیکسل از گوشه سمت چپ بوم ایجاد کنید. می توانید در حین انجام انتخاب ، با مراجعه به صفحه اطلاعات ، اندازه را تنظیم کنید. اکنون بر روی خط کش سمت چپ کلیک کرده و یک راهنما را در سمت راست انتخاب marquee بکشید همانطور که در تصویر زیر نشان داده شده است.

web design two.jpg

4 خطوط راهنمای Guidline را در لبه سمت راست بوم حرکت دهید. راهنمای دیگری را به سمت چپ انتخاب اختصاص دهید.

بوم شما اکنون باید به شکل زیر باشد:

web design three.jpg

ایجاد آرم  یا LOGO

5 اکنون می خواهیم لوگوی وب سایت خود را ایجاد کنیم. این آرم بسیار ساده خواهد بود و جلوه ای از رنگ شیب دارد. یک گروه جدید (Layer> New> Group) ایجاد کرده و آن را "آرم" بنامید.

6 ابزار Horizontal Type )T) را انتخاب کنید و "حروف کوچک" (یا نام وب سایت خود) را با حروف بزرگ تایپ کنید.

7 سپس در پنل کاراکتر ، قلم را روی Arial ، سبک را Bold و اندازه را 42pt قرار دهید. همچنین گزینه anti-aliasing metod را روی Sharp تنظیم کرده و از رنگ شماره 101112 استفاده کنید. همچنین وقتی ابزار Type (ابزار فعال) است ، می توانید این گزینه ها را در نوار گزینه تنظیم کنید.

web design four.jpg

        8 برای باز کردن کادر گفتگوی Layer Style دوبار کلیک کنید. Gradient Overlay را انتخاب کنید ، بر روی ویرایشگر گرادیان کلیک کنید و مطابق شکل زیر از تنظیمات استفاده کنید.

web design five.jpg

9 لایه نوع "Smashing" را در فاصله 35px از بالا و 0px از راهنمای سمت چپ قرار دهید. می توانید با استفاده از ابزار انتقال (V) و کلیدهای پیکان خود این کار را به صورت دقیق انجام دهید. این لایه نوع را کپی کنید (Layer> Duplicate Layer). لایه کپی شده را درست کنار کلمه "Smashing" منتقل کنید و متن را "Dzine" ویرایش کنید. مراحل 6 ، 7 ، 8 را تکرار کنید اما از رنگ شیب مختلف استفاده کنید (توقف رنگ چپ: # b27625 ، توقف رنگ راست: # e5ad27) برای کلمه "Dzine".

10 ابزار Horizontal Type Tool )T) را انتخاب کرده و با تنظیمات زیر ، یک خط برچسب را زیر لوگو اضافه کنید.

web design six.jpg

11 آرم نهایی باید مانند تصویر زیر باشد. برای فعال / غیرفعال کردن راهنماها ، به بخش View> Show> Grid بروید یا از میانبر  + Ctrl / Cmdاستفاده کنید.

web design seven.jpg

ایجاد نوار ناوبری(navigation bar)

12 یک گروه جدید ایجاد کنید و آن را "Navigation" بنویسید ، باید بالای گروه "logo" باشد. یک خط راهنما Guidline از خط کش بالا ، 150 پیکسل زیر لبه بالای بوم بکشید. ابزار Rectangle ) U) را انتخاب کنید و یک خط افقی با ارتفاع 4px با رنگ # e3ab27 ، در سراسر بوم بکشید.


13 از این خط افقی و 20 پیکسل در سمت راست راهنمای چپ ، پیوندهای ناوبری را با سرعت 12 پیکسل اضافه کنید. Rounded Rectangle Tool) U) را انتخاب کرده و یک جعبه با ابعاد 72px در 35px بکشید. این لایه را در زیر پیوندهای متن حرکت داده و لایه "hover" را نامگذاری کنید. گوشه های گرد پایین را با ابزار تبدیل نقطه صاف کنید. طرفین لبه های ناهموار را با حاشیه 8px به پایین حرکت دهید تا لبه ها برابر با سایر لبه های داخلی در پایین قرار گیرند. برای باز کردن کادر محاوره ای Layer Style ، روی لایه "hover" دو بار کلیک کنید و رنگ های شیب را اضافه کنید (Left color stop: # (e5ad27 ، توقف رنگ راست:) # b27625). ابزار Horizontal Type Tool)T) را انتخاب کنید ، متن "خانه" را انتخاب کنید و رنگ را به #ffffff (سفید) تغییر دهید.

web design eight.jpg


ایجاد بخش "با ما تماس بگیرید"

14 در مرحله بعد می خواهیم بخش "تماس با ما" را در سمت راست بالای طرح خود (دقیقاً در طرف مقابل آرم) ایجاد کنیم. این نماد تلفن را بارگیری کنید و این را در نزدیکی راهنمای درست قرار دهید. این لایه را "نماد تلفن" بگذارید. ابزار T   (Horizontal Type) را انتخاب کنید. با استفاده از قلم Arial ، یک شماره تلفن در سمت چپ نماد تلفن اضافه کنید ، اندازه آن در 20pt و رنگ شماره 292929 است. برخی متن مرتبط را در زیر شماره تلفن با استفاده از قلم Arial ، تنظیم شده در Bold ، به ابعاد 11pt و رنگ # 595959 اضافه کنید.

web design nine.jpg


ایجاد هدر(Header)

15 اکنون می خواهیم بخش header را ایجاد کنیم. یک گروه جدید ایجاد کنید و آن را "سربرگ" بگذارید.

16 Rectangle Tool )U) را انتخاب کرده و یک شکل مستطیل با اندازه 1200px در 440px ایجاد کنید. این مستطیل را در فاصله 1px در زیر نوار ناوبری قرار داده و این لایه را "header bg" بگذارید. روی لایه "header bg" دو بار کلیک کنید ، سبک لایه Gradient Overlay را انتخاب کنید و این دو رنگ را در Gradient Editor داشته باشید (Left color stop: # 2e2226، Stop colour Right: # 7a7556). برای جزئیات و موقعیت رنگ مستطیل تصویر زیر را مشاهده کنید.

web design ten.jpg

17 یک مستطیل دیگر از ابزار Rectangle Tool )U) با اندازه 960px در 360px بسازید. این مستطیل را در فاصله 40px از بالای لایه "header bg" و 0px از راهنمای سمت چپ قرار دهید. این لایه را "ظرف سربرگ" بگذارید. پیش نمایش زیر آنچه که تاکنون با طراحی انجام داده ایم.

web design eleven.jpg