campaign-edianeh-98

آموزش طراحی قالب (فصل دوم - جلسه دوم) : طراحی ستون های کناری (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 دیدگاه کاربران
Alireza crs

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

سجاد دریس

سلام.
خواهش می کنم.
بله، اون آموزش رو نویسنده خوبمون کیوان علی محمدی قرار داده بود.

shatel

سلام
توی قالبهای وبلاگ بخشهای دیگه ای مثل پیوندها و امکانات وب وجود داره ولی توی این آموزش نیامده ؟؟؟
اینو چیکارش کنیم؟

سجاد دریس

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

shatel

طراحی قالب
فقط با
html
css
javascript
سروکار داره یا
php
jquery
Sql
هم نیاز داره؟؟؟ ❗

لقمان آوند

خیر برای طراحی قالب های ایستا و قالب های بلاگفا،میهن بلاگ و … نیازی به php و sql نیست . ولی می تونید از jquery برای زیباسازی بیشتر قالب استفاده کنید .

علیـــــ

سلام سلام
خوبید؟؟؟
ممنون بابت اموزشاتون خیلی عالین میتونم با اموزشاتون طرحای دگم بزنم راحت
راستی این دوستمونم گفت ما تو وبلاگ پیوندو چیزای دیگه داریم چیکارش کنیم ؟؟؟
بد مثلا میخوایم نوشتمون وقتی موس روش میرع بزگ بشه یه رنگ دیگه بشه چی؟؟؟؟ 😛 😛

لقمان آوند

این جور سوالات رو در انجمن مطرح کنید . دوستان اونجا جواب میدن .

Alireza crs

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

سجاد دریس

سلام.
چشم سعی میکنم زودتر مطالب رو اماده کنم.

va2216

سلام خداقوت
عیدتون مبارک
اگه من بخوام هدر وبمه تغییر بدم باید چکنم؟؟؟
تو کدوم قسمت ویرایش قالب تغییر بدم؟؟؟
http://www.template.pichak.net/pichak/02/
اینم آدرس قالبم هست
لطفا راهنماییم کنید
یاعلی

لقمان آوند

لطفا سوالتون رو در انجمن مطرح کنید …

hajian1

سلام
درقسمت
روی گروه block کلیک راست کنید و duplicate group رو انتخاب کنید و یک کپی از گروه ایجاد و آن را در سمت چپ قرار دهید.
وقتی که موردبالاراانجام میدهم خط ومثلث زیرموضوعات محومی شود
لطفاًدراین موردمشگل راهنمایی نمایید
باتشکر

سجاد دریس

سلام.
حتما لایه های خط و مثلث رو بیرون از گروه block ایجاد کردید، اونارو اول بیارین داخل گروه(با drag کردن) اونوقت از گروه کپی بگیرید.

hajian1

ممنون ازراهنماییتون
موفق وپیروزباشید

hajian1

سلام
درقسمتی ازآموزش
کلمه “موضوعات” را به “تبلیغات” تغییر دهید و ارتفاع بلوک را تا 800px بکشید
لطفاًدرموردارتفاع بلوک واینکه چطورموس به صورتی که آموزش دادیدتغیرشکل می دهدلطفاًتوضیح بدهیدولطفاًبگوییدبلوک چه قسمت ازقالب طراحی شده درفتوشاپ محسوب می شود

سجاد دریس

سلام.
هنگامی که لایه block-bg رو انتخاب کردین، CTRL+T رو بزنید اونوقت اگه موس رو روی ضلع پایین بلوک ببرین، موس به اون شکل تصویر در میاد.
بلوک، همون جعبه های کناری سایت هستند که موضوعات سایت، آرشیو، پیوندها، و … در بر میگرند، به ستون سمت چپ سایت 7learn نگاه کنید، هر کدوم از این جعبه ها یک بلوک هستند.

jenerik

چقدر دیر ادامه میدین 😕 🙁

آبی

سلام و خسته نباشید..
داخل 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

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

مهدیه

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

ارسال نظرات

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