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

بخش اول)

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

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

۱.خوب یک سند جدید با عرض px850 و ارتفاع px700 با رنگ پس زمینه ی ۲۶۲۶۲۶# ایجاد کنید.لطفا کلید D رو هم یک فشار بدید.

۲.حالا نیاز داریم که یک مستطیل بکشیم.برای این کار ابزار (rectangle Tool(U را انتخاب می کنیم و مطابق شکل زیر آن را می کشیم.

در پالت لایه ها روی نام لایه دابل کلیک کنید و اسم آن را به MiddleBlack تغییر دهید و روی آن راست کلیک کرده و از منوی باز شده گزینه ی Rasterize Layer را انتخاب می کنیم.سپس روی آن دوبار کلیک می کنیم تا پنجره ی Blending Options باز شود.در سمت چپ گزینه ی Drop Shadow را انتخاب کنید و مطابق شکل زیر تغییر دهید.

در گزینه ی Color Overlay هم رنگ سیاه را انتخاب نمایید و OK کنید.حالا باید شبیه شکل فوق شده باشد.

۳.روی لایه ی MiddleBlack راست کلیک کنید و گزینه ی Duplicate Layer را انتخاب نمایید و در پنجره ی باز شده در کادر As، نام لایه یعنی BottomWhite را وارد کنید و Ok.دقت کنید که لایه ی جدید بالاتر از همه و انتخاب باشد.به بخش Blending Option رفته و فقط مقدار Color Overlay را از سیاه به سفید تغییر دهید و Ok.حالا لایه ی BottomWhite را به پایین لایه ی MiddleBlack منتقل و کوچکتر کنید.سعی کنید شبیه تصویر زیر باشد و از پایین هم به اندازه ی مناسب فاصله داشته باشد،چون از Drop Shodow استفاده کرده ایم.

۴.دوباره لایه ی BottomWhite را کپی(duplicate) کنید و نامش را FooterContainer بگذارید و به بخش Blending Option بروید.تیک DropShadow را بردارید.ولی در بخش Color Overlay،رنگ را به ۱E1E1E# تغییر دهید و oK.حالا لایه ی سفید محو شده است.در حالی که لایه ی جدید انتخاب شده است،با فشردن کلید V ،ابزار Move Tool را برگزینید و به سمت راست لایه حرکت کنید(فقط دستتون).از سمت راست و چپ و پایین کمی مستطیل را به داخل کوچکتر کنید.فکر کنم شکل بهتر از من توضیح می دهد.

۵.از لایه ی FooterContainer یک کپی ایجاد کنید و نامش را BodyContainer بگذارید.با کپی کردن لایه کار ما آسان می گردد و فقط باید آن را به بالا منتقل کنیم و کمی ارتفاع اش را زیاد کنیم.البته این کار را باید مطابق شکل زیر انجام دهید.به بخش Blending لایه رفته و بخش Gradient Overlay را مطابق شکل زیر تنظیم کنید.(با کلیک در بخش قرمز،پنجره ی دوم باز خواهد شد).

شکل و موقعیت لایه را در زیر مشاهده می نمایید

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

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

منتظر نظرات شما هستیم.