طراحی وبسایت افقی

طراحی وبسایت افقی نظرتان در مورد یک آموزش متفاوت طراحی سایت چیست؟ در این آموزش طراحی المانها و چیدمان یک وبسایت افقی را یاد میگیریم.

طراحی وبسایت افقی

دوره های آنلاین کلیک سایت از سطح صفر تا سطح کاملا حرفه ای شما را آماده ورود به بازار کار و کسب درآمد می کند. می توانید بدون هزینه قسمت های رایگان را دانلود نمایید :

گام 1 : ساخت سند جدید در فتوشاپ

یک سند جدید در فتوشاپ به ابعاد 1300×800 پیکسل ایجاد کنید. البته به تمام این فضا احتاجی نداریم. اما به ایجاد احساس داشتن فضای طراحی عریض در هنگام کار کمک میکند.

گام 2 : ایجاد پس زمینه
یک لایه جدید ایجاد کنید و آن را با رنگ یکدست #bfc6cd پر کنید

اضافه کردن نویز به پس زمینه
لایه جدید را به یک Smart object تبدیل کنید. (برروی لایه راست کلیک کنید و Convert to smart object را انتخاب کنید.)

سپس از منو filter > Add Noise را انتخاب کنید. (در صورت لزوم می توانید بعدا تنظیمات فیلتر را تغییر دهید)

لایه را قفل کنید. برای نظم دهی و شلوغ نبودن پنل لایه ها میتوانید ماسک های لایه را پاک کنید و آن را بعنوان لایه پیشفرض پس زمینه تنظیم کنید (دلخواه)

گام 3 : ساخت فلش بزرگ
از پریست شکلهای آماده فتوشاپ فلش را انتخاب کنید و یک فلش ایجاد کنید. با استفاده از ابزار Direct selection tool اندازه آن را تنظیم کنید تا مناسب به نظر برسد. (دستگیره های آنرا جابجا کنید تا به اندازه کافی بزرگ شود)

ابزار Free transform tool را انتخاب کنید فلش را بالا ببرید تا 310 پیکسل از بالای صفحه فاصله داشته باشد. سپس خطکش افقی بالایی را به وسط صفحه بکشید تا یک خط راهنمای افقی ایجاد شود. snap را روشن کنید و خط راهنما را به وسط فلش بیاورید. به این ترتیب خط مرکزی سایت مشخص می شود

با دابل کلیک کردن بر روی لایه فلش 4 افکت layer style به آن اضافه کنید. drop shadow, inner shadow, outer glow و gradient overlay از رنگ #cbcbcb به سمت رنگ #ffffff

در بالای لایه فلش یک لایه متن ایجاد کنید.

به متن نیز lفکتهای layer style اضافه کنید : inner shadow ، gradient overlay و stroke. برای اینکه افکت عمق متن بهتر به نظر برسد یک strok از نوع gradient به متن بدهید . شفافیت را در alpha setting در نیمه بالایی متن برابر 0 قرار دهید. به این ترتیب حاشیه تنها در نیمه پاییینی متن قابل رویت خواهد بود.

افکتهای Outer Shadow و Inner Shadow باعث میشوند که متن بیشتر سه بعدی به نظر برسد. اما برای اینکه بهتر به نظر برسد یک افکت نوری شیشه ای ساده به متن میدهیم. یک مستطیل ایجاد کنید و با ابزار Convert point tool شکل آن را ویرایش کنید ضلع پایین آن خمیدگی ملایمی به خود بگیرد. این شکل را برای ایجاد افکت شیشه ماسک خواهیم کرد.

fill را در این لایه بر روی %0 قرار دهید و یک افکت layer style از نوع gradient با طیف رنگی ملایم از سفید به سمت شفاف به آن اضافه کنید.

بر روی لایه فلش دابل کلیک کنید تا انتخابی از آن ایجاد شود سپس لایه افکت نوری را انتخاب کنید و یک layer mask ایجاد کنید تا افکت نوری فقط بر روی فلش دیده شود

گام 4 : اضافه کردن نور پس زمینه
برای برای اینکه توجه بیننده بر روی لوگو متمرکز شود یک افکت نوری ایجاد می کنیم تا لوگو از پس زمینه متمایز شود.

برای این منظور از روشهای اولیه استفاده می کنیم:

یک لایه جدید ایجاد کنید. Ctrl+Shift+N
ابزار gradient tool را انتخاب کنید
رنگها را ریست (ِِD) و برعکس (X) نمایید
یک گرادیانت شعاعی با طیف رنگی سفید به سمت شفافیت کامل انتخاب کنید
آموزش طراحی وبسایت افقی در فتوشاپ

کلید Shift را نگهدارید و یک گرادیانت بکشید

گام 5 : شفافیت لایه گرادیانت را %80 قرار دهید
گام 5 : ایجاد قالب دربرگیرنده محتوا
یک مستطیل به عرض 240 پیکسل ایجاد کنید. ارتقاع مستطیل باید کمی از صفحه طراحی بیشتر باشد

مستطیل را کپی کنید (Ctrl+D) و رنگ آن را تغییر دهید. این مستطیل به جای یک تصویر در بلاگ است

مستطیل را جابجا کنید (Ctrl+T) و اندازه آن را 216×130 پیکسل تنظیم نمایید. مرکز مستطیل را بر روی محور مرکزی صفحه طراحی قرار دهید.

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

گام 6 : اضافه کردن متن
در بالای تصویر یک text box ایجاد کنید و متن عنوان بلاگ را در آن بنویسید

از یک متن فشرده مانند League Gothic استفاده کنید. در زیر تصویر یک text box دیگر بعنوان محتوای اصلی اضافه کنید

گام 7 : ایجاد سبک برای دربرگیرنده محتوا
برای محتوا یک مستطیل بزرگ انتخاب ایجاد کنید و یک لایه ماسک جدید برای آن بسازید. چگالی ماسک را بر روی %80 تنظیم کنید

برای ظاهر بیشتر سه بعدی به قاب دور محتوا یک افکت outer glow به رنگ سیاه و یک Inner shadow به رنگ سفید اضافه کنید.

گام 8 : ایجاد متن متا
یک متن توضیحی متا در بالای پست اضافه کنید.می توانید از فونت Georgia italic با سایز 12 پیکسل و ارتفاع خط 17 پیکسل استفاده کنید. برای حفظ متنها در یک خط از خطوط راهنما استفاده کنید

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

گام 9 : ساخت دکمه “Read More”
در پایین پست متن “Read More” را اضافه کنید.

در زیر این متن یک مستطیل ایجاد کنید تا بعنوان دکمه Read More باشد

یک سبک gradient و یک سبک stroke به آن اضافه کنید.

نکته: اقکت stroke را به سمت داخل ایجاد کنید تا گوشه های دکمه sharp به نظر برسد

یک گرادیان ظریف نیز به لایه نسبت دهید

گام 10 : یک نشان برای پست ایجاد کنید
برای ایجاد نشان برای پست یک مستطیل دیگر ایجاد کنید . متن نشان را اضافه کنید. میتوانید از فونت Arial استفاده کنید. هر دو لایه را 45 درجه بچرخانید.طراحی سایت افقی در فتوشاپ

برای حذف گوشه های اضافی به لایه مستطیل یک ماسک اضافه کنید

دو مستطیل کوچک به نشان اضافه کنید تا تجسم برگشتن به زیر تصویر را ایجاد کند.

یک سایه ظریف به نشان اضافه کنید.

نکته : برای blend mode سایه بجای حالت پیشفرض Multiply از حالت Normal استفاده کنید. با این روش اگر از نشان بصورت یک تصویر Png نیز استفاده کنید افکت خود را نشان خواهد داد.

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

نکته : برای کشیدن خطوط افقی بجای استفاده از ابزار Line tool با ابزار متن ( _ ) پشت سر هم و پیوسته تایپ کنید. خطی که با این روش کشیده میشود واضح و sharp است و فضای بین خطوط را میتوانید با تنظیم Line height کنترل کنید. به ازائ هر آیتم منو خطو افقی ترسیم کنید بجز آیتم اولی. هر جا که لازم بود خطوط را طولانی تر رسم کنید

گزینه fill این لایه را بر روی %15 قرار دهید و یک سایه سفید به آن اضافه کنید.

بر روی لایه خطوط یک ماسک ایجاد کنید و با براش نرم بر روی آن نقاشی کنید تا لبه هایی نرم و محو شونده داشته باشند.

گام 12: ایجاد فرم جستجو
برای فیلد ورودی جستجو یک مستطیل با گوشه های گرد به شعاع 3 پیکسل بکشید.

یک inner shadow به فیلد اضافه کنید و گزینه fill لایه را بر روی %70 قرار دهید.

در بالای فیلد متن جستجو را تایپ کنید و از میان اشکال سفارشی فتوشاپ یک شکل برای فلش submit انتخاب کنید

آموزش طراحی وبسایت افقی در فتوشاپ

‘گام 13 : ایجاد لوگوهای شبکه های اجتماعی
برای لوگوهای شبکه های اجتماعی از تصاویر وکتور استفاده کنید. میتوانید آنها را در اینترنت پیدا و دانلود کنید. این روش سریعترین راه برای ایجاد لوگوهای شبکه های اجتماعی است.

لوگو را در ایلوستریتور باز کنید. خطوط خارجی را کپی کنید و در فتوشاپ بصورت shape پیست کنید.

گزینه fill لایه ها را بر روی %0 تنظیم کنید و به لایه ها افکت لایه (drop shadow, inner shadow and color overlay) اضافه کنید تا ظاهری سه بعدی به خود بگیرند. برای ایجاد حالت اکتیو لوگو ها رنگ و شدت رنگ را در افکت color ovrelay تغییر دهید.

این افکت ها را کپی کنید و برای بقیه لوگوها استفاده کنید. (بر روی لایه کلیک راست کنید و گزینه copy layer style را انتخاب کنید)

گام 14 : ایجاد Comment box
برای ایجاد Comment box مستطیل های دیگری با گوشه های گرد و به عض 520 پیکسل ایجاد کنید و افکت Drop Shadow به آنها بدهید

قسمت بزرگتر را انتخاب کنید و به آن ماسک اضافه کنید

از لایه کپی بگیرید. ماسک آن را برعکس کنید. گزینه fill لایه جدید را %25 قرار دهید.

در تنظیمات blending هر دو لایه گزینه Layer Mask Hide Effects را برای جلوگیری از ناهماهنگی در خط سایه فعال کنید.

بر روی مرز بین دو مستطیل یک خط عمود سیاه ایجاد کنید. گزینه fill آن را %25 قرار دهید و یک سایه سفید به ضخامت 1 پیکسل در سمت راست آن ایجاد کنید

چند متن و آواتار با رنگهایی که قبلا بکار بردید اضافه کنید

آموزش طراحی وبسایت افقی در فتوشاپ

گام 15: ایجاد فلش برای اسلایدر نمونه کار
یک شکل دایره ایجاد کنید و افکت ها را از فلش لوگو گپی و بر روی آن پیست کنید. شکل فلش را با استفاده از Custom Shape و حالت Cutting mode از داخل دایره جدا کنید.

در زیر این دکمه یک دایره دیگر به همان اندازه یا کوچکتر ایجاد کنید. افکتهای گرادیانت را از لوگو کپی و بر روی آن پیست کنید.

نکته : اگر لایه ای دارای افکتهای زیادی است و تنها میخواهید یک افکت را کپی کنید دکمه Alt را نگهدارید و تنها آن افکت را از روی لایه مبدا بکشید و بر روی لایه مقصد رها کنید

به همان روش فلش لوگو افکت نور به آن اضافه کنید.

اگر میخواهید تغییرات کوچکی بر روی دکمه ها ایجاد کنید بطوری که کسی متوجه نشود برای دکمه و شکل فلش داخل دکمه بطور جداگانه نورهایی ایجاد کنید و آنها را کمی پایینتر ببرید و اگر دو نور جدا گانه دارید میتوانید به سادگی بدون ایجاد ماسک اضافی نور دکمه را قوی تر کنید تا بر روی دکمه های روشنتر واضحتر دیده شود

تمام لایه ای دکمه ها را انتخاب کنید و از آنها Smart object بسازید

لایه را کپی کنید. آن را جابجا کنید و قرینه نمایید. چون دکمه smart object است اگر بر روی آن با دابل کلیک کردن ویرایش انجام دهید تغییرات برای هر دو دکمه اعمال می شود

کار تمام است
بقیه المانها را میتوانید با کپی و پیست و تغییر اندازه المانهایی که قبلا ایجاد کرده اید بسازید.