۱۱ بهمن, ۱۳۹۵

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

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

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

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

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

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

ابتدا بعد از باز کردن فتوشاپ، یک سند با اندازه ۱۴۰۰px در ۱۸۵۰px بوجود بیاورید.

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

Ruler : Ctrl + R

Guide : Ctrl + ;

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

اندازه کلی سایت تان ۹۶۰px است. پس نخستین خط راهنما (Guide) را با رجوع به منوی view و کلیک روی گزینه New Guide و مقدار ۲۲۰px ترسیم نمایید. دومین خط راهنما را همنطور با مقدار ۱۱۸۰px ترسیم نمایید. با ترسیم این دو خط راهنما در میان صفحه ۹۶۰px فضا برای اجرای سایت در دست دارید.

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

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

نتیجه

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

نتیجه

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

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

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

نتیجه

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

 

نتیجه

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

 

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

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

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

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

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

با به کارگیری از ابزار رسم خط (Line Tool) یک خط به ضخامت ۱px و رنگ #۰۰۰۰۰۰ ترسیم کنید. خط دیگری با فاصله ۴۵px پایین همین خط به ضخامت ۱px و رنگ #۴۴۴۳۴۳ ترسیم کنید. همه جزییات منو در میان این دو خط رسم خواهند شد.

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

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

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

آدرس بازتاب: http://www.webcando.ir/blog/214-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a8%d8%a7-%d9%81%d8%aa%d9%88%d8%b4%d8%a7%d9%be.html/trackback

ارسال دیدگاه:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *