% تخفیف ویژه تخفیف های شگفت انگیز ثبت نام در دوره های برنامه نویسی وب و موبایل رو از دست ندید! (از عید فطر تا پایان خرداد)

آموزش طراحی قالب (فصل دوم - جلسه دوم) : طراحی ستون های کناری (sidebar)

- visibility ۳۵ mode_comment

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

قسمت Sidebar

1. رنگ foreground رو به سفید تغییر دهید و سپس ابزار rectangle tool رو انتخاب کنید و یک مستطیل با ابعاد زیر ایجاد کنید

و آن را در پایین منو قرار دهید.

2. دکمه CTRL + G رو فشار بدین و group رو به content تغییر نام دهید.

3. حال طبق تصاویر زیر خطوط راهنما جدیدی ایجاد کنید

4. دکمه D رو فشار بدین تا رنگ ها به پیشفرض برگرده

5. ابزار rounded rectangle tool رو انتخاب کنید و یک مستطیل با ابعاد زیر ایجاد کنید :

و آن را در سایدبار سمت راست قرار دهید و استایل زیر رو بهش بدین :

6. نام لایه رو به block-bg تغییر دهید و همانطور که لایه انتخاب شده است CTRL + G رو بزنید و group رو به block تغییر نام دهید.

حال باید چنین نتیجه ای داشته باشید :

7. یک متن با فونت b nazanin و اندازه ی 24px و رنگ سیاه #000000  با عنوان " موضوعات " ایجاد کنید و آنرا در بالا وسط بلوک قرار دهید

و استایل زیر رو بهش بدین

8. با ابزار rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید :

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

9. با ابزار polygon tool یک مثلت 4px ایجاد کنید :

و مانند تصویر زیر آن را در بالای خط زیر عنوان قرار دهید :

بسیار خب، حال به سایدبار سمت چپ می رسیم،

1.روی گروه block کلیک راست کنید و duplicate group رو انتخاب کنید و یک کپی از گروه ایجاد و آن را در سمت چپ قرار دهید.

2.کلمه "موضوعات" را به "تبلیغات" تغییر دهید و ارتفاع بلوک را تا 800px بکشید

3.با ابزار ruonded rectangle tool مستطیل با ابعاد زیر :

و یک مستطیل دیگر با ابعاد زیر :

و آنها را زیر هم، در بلوک تبلیغات قرار دهید

4. استایل مستطیل های تبلیغات :

ابتدا رنگ هر دو لایه را به #8ea1bb تغییر دهید :

سپس استایل زیر را بر هر دو لایه اعمال کنید :

5. کلمه "مکان تبلیغات شما" را با فونت b yekan و اندازه ی 24px و رنگ سفید و استایل زیر :

را مانند تصویر زیر در داخل هر دو لایه ایجاد کنید :

فایل رو save کنید

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

comment دیدگاه کاربران
آبی

سلام و خسته نباشید..
داخل block هر چی میزارم استایل همون مستطیل میگیره…با تغییرش استایل کل مستطیل تغییر میکنه..چطوری باید استایل جداگانه باید مشخص کنم؟

سجاد دریس

سلام.
روی لایه جدیدی که استایل مستطیل گرفته کلیک راست کنید ,و گزینه clear layer style رو انتخاب کنید.
سپس استایلش رو تغییر بدین.

علی

با سلام
من میخوام قالبی که میسازم یک دو ستونه باشه و فقط ستون را سمت راست گذاشتم از نظرتون اشکالی نداره و اتستایلی که شما برای سمت چپ دادید را بهش دادن اشکالی که نداره؟ قالب خراب نمیشه؟

علی

اشتباه گفتم منظورم اینه که استایل سمت راست را دادم و سمت چپ را ندادم بهش.

سجاد دریس

در هر صورت اشکالی نداره.

سجاد دریس

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

hamidazadi

ممنون واقعا آموزشاتون عالیه

kimiyashop

سلام
فکر نمیکنید با هر بار عوض کردن سمت سایه ها چه این قسمت و چه قسمت قبلی کل سمت سایه ها عوض بشه

در صورت امکان یک قالب حرفه ای ورد پرسی شرکتی با اسلایدر و منو و صفحات داخلی و … آموزش بدین
در ضمن آموزش فوق العاده ای هست دمتون گرم

babakh

عالی

رضا

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

کیوان علی محمدی

سلام توی فتوشاپ توی قسمت Layer Style تیک گزینه Use Global Light رو بردارید.

mehrdad

هرکاری کردم نتونستم مربع سمت چپ را تا 800 بکشم هی جابجا میشد. چجوری باید این کارو بکنم آقای دریس؟

سجاد دریس

سلام.لایه ی مربع رو انتخاب کنید. سپس از منوی Edit گزینه ی Free Transform رو انتخاب کنید.
یه حاشیه ای اطراف مربع ظاهر میشه، موس رو روی اون مربع کوچک (پایین وسط)بیارید علامت موس به دو فلش بالا پایین تبدیل میشه
حال با کلیک کردن و نگه داشتن کلیک، موس رو به سمت پایین بکشید.

Arman_Nr

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

در این صورت چه کنیم ؟ یک مثال کوچک که اگر با آیکون PNG باشه دکمه های ما ❓

سجاد دریس

سلام.
از همین کدی که گذاشتبن استفاده کنید.
خب فقط کافیه از background-image استفاده کنید واسه آدرس تصویر.
font-size و color هم اگه متن دکمه همراه با عکسه از کدهاتون حذف کنید.
از text-indent هم برای مخفی کردن متن دکمه استفاده کنید/

Arman_Nr

فقط همین کار کافیه دیگه باشه مرسی ممنون بسیار مطالب زیبایی می نویسی منتظر مقاله های بعدیت هستم ❓

مهدیه

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

ارسال نظرات

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

1 2