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

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

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

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

 نحوه طراحی سایت با فتوشاپ به همراه جزییات

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

مرحله اول : به وجود آوردن فایل و اجرای تنظیمات اولیه

ابتدا بعد از باز کردن فتوشاپ، یک سند با اندازه 1400px در 1850px  بوجود بیاورید.

ابزار خط کش (Rule Tool) در این جا خیلی کاربردی می باشد. پس اطمینان حاصل کنید که خط کش (Ruler) و خطوط راهنما (Guide) به صورت فعال باشند :

Ruler : Ctrl + R

Guide : Ctrl + ;

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

اندازه کلی سایت تان 960px است. پس نخستین خط راهنما (Guide) را با رجوع به منوی view و کلیک روی گزینه New Guide و مقدار 220px ترسیم نمایید. دومین خط راهنما را همنطور با مقدار 1180px ترسیم نمایید. با ترسیم این دو خط راهنما در میان صفحه 960px فضا برای اجرای سایت در دست دارید.

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

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

یک مستطیل بوسیله ابزار رسم مستطیل (Rectangle Tool) به عرض 100% و ارتفاع 200px ترسیم کنید. بعد با دوبار کلیک روی آن لایه پنجره استایل مربوط به آن را باز نموده و تغییرات استایلی زیر را بر روی این لایه اعمال کنید:

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

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

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

نتیجه

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

یک مستطیل دیگر در بالاترین نقطه فضای ترسیم سایت به عرض 100% و ارتفاع 40px ترسیم کنید. به مستطیل رسم شده استایل زیر را بدهید:

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

نتیجه

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

با بهره گیری از ابزار متن، واژه Signup و Login را در گوشه بالا سمت راست با فونت و رنگی که در تصویر زیر نوشته شده درج کنید.

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

مرحله سوم: ایجاد لوگوی سایت

نوبت ایجاد و طراحی لوگوی سایت است برای آغاز کار ابتدا بوسیله ابزار رسم بیضی (Ellipse Tool) یک دایره 80px * 80px ترسیم کنید. برای ترسیم دایره وسیله ابزار رسم بیضی فقط موقع ترسیم کلید shift را پایین نگه دارید. بعد به دایره ترسیم شده استایل زیر را بدهید:

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

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

نتیجه

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

حالا کلید Ctrl را پایین نگه دارید و روی (thumbnail) در کنار این لایه در پانل لایه ها کلیک کنید. به منوی Select بروید و در زیرمنوی Modify گزینه Contract را انتخاب و مقدار 5px را برای آن وارد کنید. بعد در بالای این لایه یک لایه تازه بوجود بیاورید و آن را با یک رنگ دلخواه پر نمایید. به لایه تازه استایل زیر را بدهید:

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

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

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

نتیجه

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

حالا ابزار نوشتن متن را انتخاب کنید و حروف GD را بنویسید. در این پروژه از فونت Myraid در حالت بولد با اندازه 36pt بهره می بریم. بعد استایل زیر را به متن بیفزایید:

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

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

نتیجه بایست به صورت زیر دیده شود:

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

حالا می خواهیم اندکی حالت درخشندگی به لوگو بدهیم. یک لایه بالای لایه متن بوجود بیاورید و اسم آنرا highlights بگذارید. در صورتی که این لایه در پانل لایه ها در حالت انتخاب می باشد، کلید کنترل را پایین نگاه دارید و روی لایه دایره داخل لوگو در پانل لایه ها کلیک نمایید تا کناره های آن به حالت انتخاب درآید. بعد ابزار Elliptical Marquee Tool را انتخاب نموده و در حالی که کلید Alt را پایین نگاه داشته اید یک بیضی نظیر شکل زیر ترسیم کنید. دقت کنید تا زمانی که کلید Alt پایین است قسمتی که در حال انتخاب به صورت نقطه چین درآمده پنهان خواهد بود.

بعد ابزار گرداینت خطی (Linear Gradient) را انتخاب کنید و قسمت انتخاب شده را با گرادینتی با پیش زمینه سفید تا شفاف پر نمایید.

حالا کلمه های Auto Service را بنویسید و استایلی را که بر روی حروف GD اعمال کرده بودید، برای این لایه نیز کپی کنید. نتیجه نهایی لوگو بایست شبیه عکس زیر باشد:

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

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

با به کارگیری از ابزار رسم خط (Line Tool) یک خط به ضخامت 1px و رنگ #000000 ترسیم کنید. خط دیگری با فاصله 45px پایین همین خط به ضخامت 1px و رنگ #444343 ترسیم کنید. همه جزییات منو در میان این دو خط رسم خواهند شد.

بوسیله ابزار متن واژه های لینک های منو را بنویسید. هر لینک بایست از سمت راست 45px با لینک دیگر فاصله داشته باشد. بعد در میان هر دو لینک یک خط عمودی به ضخامت 1px  توسط  ابزار رسم خط، رسم کنید.

حالا قصد داریم به این لایه ها استایل های لازم را بدهیم. می خواهیم لینک Home را به طور لینک فعال نمایش بدهیم. به منظور آن بوسیله ابزار انتخاب مستطیلی (Rectangular Marquee Tool ) شبیه تصویر زیر مستطیل لینک Home را انتخاب کنید. بوسیله ابزار گرادینت خطی، یک گرادینت با رنگ سفید-شفاف برای این انتخاب بوجود بیاورید. بعد در بالای پنل لایه ها، Layer Mode  را مساوی با Screen و اندازه Opacity را 30% قرار دهید.

نتیجه کار را در عکش زیر می بینید:

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

 

 

چاپایمیل