طراحي وب

آموزش جامع طراحی وبلاگ(قسمت سوم)

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

ادامه طراحی و تکمیل سرصفحه(header)

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

بخش دوم)

۶.لایه ی BodyContainer را کپی کنید و مطابق شکل زیر ارتفاع و موقعیت آن را تغییر دهید.

۷.حالا لطفا از اینــــجــا فایل گل منگلی را که می خواهیم سرصفحه را با آن تزئین کنیم،دریافت کنید.بعد از باز کردن آن،کلید ترکیبی ctrl+a و سپس ctrl+c را فشار می دهیم.به سند قالبمان برگردیم و ctrl+v فشار می دهیم.نام لایه ی جدید را HeaderFloral می گذاریم.دقت می کنیم که ابزار Move Tool انتخاب باشد.حالا موس را به بیرون لبه های لایه می بریم تا به شکل یک فلش دوسر خم شده تبدیل شود و حالا کلیک می کنیم و در زیر نوار منو،مقدار زاویه را ۹۰- وارد می کنیم.

ما فقط به گل های این لایه که به رنگ سیاه هستند،نیاز داریم.پس باید پس زمینه ی سفید را حذف کنیم.البته برای بهتر شدن نتیجه ی کار ،رنگ هایی را که نسبتا نمود بیشتری دارند(در اینجا قرمز) را هم حذف می کنیم.پس در حالی که لایه انتحاب است به منوی …Select > Color Range می رویم.در بالا از منوی Select گزینه ی Highlights را انتخاب می کنیم و Ok.حالا تمام بخش های سفید انتخاب شده اند و با زدن کلید Delete آنها را خذف می کنیم.برای رنگ های دیگر مثل قرمز هم در پنجره ی قبل،روی رنگ مورد نظر کلیک می کنیم و بعد از انتخاب،آن را حذف می کنیم.

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

به نظر من که خیلی زیبا شد.مگه نه؟:Dشوخی کردم هنوز تموم نشده.فقط هوای اون چایی ات رو داشته باش،سرد نشه.

۸.لایه ی HeaderFloral را کپی می کنیم و نام لایه ی جدید را HeaderFloral2 می گذاریم.فقط دقت می کنیم که این لایه بالای لایه ی قبلی قرار بگیرد.با منوی …Filter > Texture > Patchwork می رویم.به ترتیب دو مقدار این فیلتر را برابر با ۴ و ۰ قرار می دهیم و ok.کلیدهای ترکیبی ctrl+u را می فشاریم و مطابق شکل زیر تنظیم می کنیم.

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

برای اینکه کمی به سرصفحه عمق بدهیم ،به بخش Blending Option رفته و گزینه ی Drop Shadow را مطابق شکل زیر مقداردهی می کنیم.

در پالت لایه ها در حالی که لایه ی فعلی انتخاب است،Blend mode را به Difference تغییر می دهیم.اگر خواستیم کمی کار رو روشنتر و نرم تر کنیم می توانیم فیلتر patchwork رو چند بار دیگر به لایه اعمال کنیم.(ctrl+f).

حالا احتمالا سرصفحه ی شما شکل وشمایلی شبیه زیر پیدا کرده است:

۹٫ولی طرح هنوز کامل نیست.چون سرصفحه کاملا جدا از بقیه ی عناصر به نظر می رسد.برای این کار می خواهیم یک شیب رنگ(Gradient) از پایین به بالا و از رنگ سیاه به بی رنگ(Transparent) بکشیم.در واقع هدفمان این است که قسمت پایین سرصفحه را کمی محو کنیم.برای این کار،ابزار Rectangular Marquee Tool را بوسیله ی فشار کلید m انتخاب می کنیم.ناحیه ای از صفحه را مطابق شکل زیر انتخاب می کنیم.

یک لایه ی جدید ایجاد می کنیم(shift+ctrl+n) و نامش را HeaderGradient می گذاریم.کلید D را فشار می دهیم تا رنگ سیاه برای پیش زمینه انتخاب شود.روی ابزار Gradient Tool کلیک کرده یا کلید g را فشار می دهیم.در نوار اختیارات،روی فلش کلیک می کنیم و گزینه ی دوم را انتخاب می کنیم.

حالا در پایین کادری که قبلا انتخاب کرده ایم،کلید چپ ماوس را فشار داده و در همین حال تا بالای کادر می کشیم و آنجا رها می کنیم(Drag & Drop).اگر کافی نبود دوباره همین کار را می کنیم.تا زمانی که پایین لایه ی گل منگلی کاملا تیره شده و جزئی از صفحه دیده شود.البته مواظب باشید که کل لایه را سیا نکنید ;)

نکته: ترتیب لایه ها در فتوشاپ دقیقا به ترتیب مراحل هستند.یعنی لایه (ها)ی هر مرحله ،بالای لایه ی مرحله ی قبل قرار می گیرد.

پاسخ دهید

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