آموزش طراحی گرافیکی سایت از ابتدا تا انتها به کمک فتوشاپ

[miladsaeedi 14]

خوب حالا در ادامه مباحث می خوام چد تکنیک رو ابتدا بهتون یاد بدم تا بتونیم اجزای سایت را جزء به جزء بهتون یاد بدم و بعد بریم سراغ وصل کردن این اشیا به همدیگه و تبدیل اون به یک قالب کامل.

در ابتدا می خوام بهتون تکنیک ساخت منو رو یاد بدم.

برای طراحی منو باید به این نکته توجه داشته باشید که برای هر منو باید سه وضعیت از نظر گرافیکی در نظر بگیرید

1- حالت معمولی

2- حالت hover

3- حالت active

برای حالت 1 سعی کنید که منو ها رو حتی الامکان به صورت یکپارچه طراحی کنید به چند دلیل:

1- از نظر بنده قشنگتره!:yeah:

2- کد نویس و مبدل قالب دعاتون کنه!:28:

3- قابل توسعه و منعطف باشه

***نکته بسیار مهم: سعی کنید رنگ هایی که برای سه حالت انتخاب می کنید یکی مشرق و یکی دیگه مغرب نباشه! یعنی اینکه سعی کنید هارمونی رو در سه حالت رعایت کنید و رنگ های کاملا نا متقارن رو انتخاب نکنید (مر در مواقع خاص) چرا که زیبایی کارتون رو با افت شدید مواجه می کنه اگر دقت کرده باشید در بسیاری از سایت های حرفه ای سعی شده تنها کاربر متوجه شده که کدام گزینه فعال است و یا موس بر روی کدام گزینه قرار دارد و از غلو پرهیز شده است.***

پچه ها دوباره کار عملی:did2:

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

[Vahid Taheri 74]

سلام

با تشکر فراوان از زحمات شما

استاد به نظر من اگر با شکل درس بدید(یعنی کنار توضیحتون از اون قسمت یه عکس بزارید)خیلی بهتر یاد بگیریم.

در صورت امکان یک عکس از این نوع منوهارو قرار بدین تا ما بدونیم چجورین و چطوری بزنیم.

ویرایش شده در مرداد 91 توسط Vahid Taheri

[mahan 11]

با سلام و تشکر از آموزش

این هم یک تست بسیار ساده برای نمونه

[ATTACH=CONFIG]2045[/ATTACH]

با سپاس

[akbari 11]

این منوی منه!

[ATTACH=CONFIG]2047[/ATTACH]

[miladsaeedi 14]

سلام

با تشکر فراوان از زحمات شما

استاد به نظر من اگر با شکل درس بدید(یعنی کنار توضیحتون از اون قسمت یه عکس بزارید)خیلی بهتر یاد بگیریم.

در صورت امکان یک عکس از این نوع منوهارو قرار بدین تا ما بدونیم چجورین و چطوری بزنیم.

سلام وحید عزیزم من عمدا این کار رو در ابتدای توضیح انجام نمیدم تا ببینم برداشت شما چیه و ایده های خودتون رو شکوفا کنید یه جورایی دانشجو باشید نه دانش آموز اما در هنگام توضیح حتما حتما به صورت مرحله به مرحله با استفاده از تصویر توضیح می دم چون آموزش قالب که بدون تصویر خیلی خنده داره:25r30wi:

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

اینم تقدیم شماgift

[miladsaeedi 14]

با سلام و تشکر از آموزش

این هم یک تست بسیار ساده برای نمونه

[ATTACH=CONFIG]2045[/ATTACH]

با سپاس

سلام ماهان عزیزم

دقت کن که گفتم منو نه دکمه buttom ولی از نظر تکنیک با نگاه دکمه! خوب بود ممنونم

اینم تقدیم شماgift

[miladsaeedi 14]

این منوی منه!

[ATTACH=CONFIG]2047[/ATTACH]

سلام اکبری عزیز

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

تقدیم شماgift

[Mohammad Yousefi 14]

استاد من هم این مدل رو آماده کردم

[akbari 11]

سلام استاد

متوجه نشدم منظورتون از "تصویر منو" چیه؟

آیا منظورتون یک مدل گرافیکی تره؟

:25:

سلام اکبری عزیز

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

تقدیم شماgift

ویرایش شده در مرداد 91 توسط akbari

[mahan 11]

سلامی دوباره

این هم یک منو

[ATTACH=CONFIG]2052[/ATTACH]

با سپاس

[miladsaeedi 14]

سلام استاد

متوجه نشدم منظورتون از "تصویر منو" چیه؟

آیا منظورتون یک مدل گرافیکی تره؟

:25:

سلام

نه عزیزم منظورم استفاده از تصاویر مثل کار دوست خوبمون ماهان در پست بعدی هست که از تصاویر در کنار عناوین استفاده کرده.

[honey 10]

سلام

من از این کلاس خوشم اومده،

به گرافیک علاقه دارم ولی صفر کیلومترم،

امیدوارم منو به شاگردی بپذیرید.

[mp_mp353 12]

[ATTACH=CONFIG]2053[/ATTACH]

,

[ATTACH=CONFIG]2054[/ATTACH]

سلام استاد اینم منوی من

ویرایش شده در مرداد 91 توسط mp_mp353

[akbari 11]

نه عزیزم منظورم استفاده از تصاویر مثل کار دوست خوبمون ماهان در پست بعدی هست که از تصاویر در کنار عناوین استفاده کرده.

اینم یه مدل دیگه

البته رزولیشن رو یکم بردم بالا برای خوانایی بیشتر

[ATTACH=CONFIG]2055[/ATTACH]

ویرایش شده در مرداد 91 توسط akbari

[Behransat 11]

بچه ببخشید استاد هم نیست اما من با اجازه یک نظری بدم.

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

به نظر من تنها منوی دوستمون mp_mp353 قشنگه از نظر اندازه ولی فکر کنم ..... شده .

موفق و پیروز باشید.

[mp_mp353 12]

دوست من Behransat این منو طراحی خودمه ولی شکل ظاهری و نحوه ی باز شدن زیر منو های اون رو از سایت p30download الگو برداری کردم البته داخل اون هر قسمت یه رنگ هست که من خوشم نمیاد به همین خاطر تنها دو رنگ گذاشتم یکی برای انتخاب شده یکی معمولی فونت رو هم b mitra قرار دادم که در هر زیر منو یک سایز کوچکتر میشه. از اونجا که بهتر به چشم بیاد یه عکس زیرش قرار دادم مثلا اسلاید شو باشه اونم برای اینه که ترنس پرنتی زیر منوی سوم رو نشون بدم.

با تشکر از ... شما

[mp_mp353 12]

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

ویرایش شده در مرداد 91 توسط mp_mp353

[Behransat 11]

دوست من Behransat این منو طراحی خودمه ولی شکل ظاهری و نحوه ی باز شدن زیر منو های اون رو از سایت p30download الگو برداری کردم البته داخل اون هر قسمت یه رنگ هست که من خوشم نمیاد به همین خاطر تنها دو رنگ گذاشتم یکی برای انتخاب شده یکی معمولی فونت رو هم b mitra قرار دادم که در هر زیر منو یک سایز کوچکتر میشه. از اونجا که بهتر به چشم بیاد یه عکس زیرش قرار دادم مثلا اسلاید شو باشه اونم برای اینه که ترنس پرنتی زیر منوی سوم رو نشون بدم.

با تشکر از ... شما

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

من منوی شما رو می پسندم :128fs318181:gift

[miladsaeedi 14]

سلام

من از این کلاس خوشم اومده،

به گرافیک علاقه دارم ولی صفر کیلومترم،

امیدوارم منو به شاگردی بپذیرید.

سلام

خواهش می کنم خوش آمدید. قدم به دیده ما گذاشتید. فقط با مطالعه دقیق پست های گذشته به دیگر بچه ها برسید. موفق باشید

[miladsaeedi 14]

سلامی دوباره

این هم یک منو

[ATTACH=CONFIG]2052[/ATTACH]

با سپاس

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

[miladsaeedi 14]

[ATTACH=CONFIG]2053[/ATTACH]

,

[ATTACH=CONFIG]2054[/ATTACH]

سلام استاد اینم منوی من

سلام دوست خوبم.

شما با این طرحت نشون دادی یکی از همکلاسی های خوب و فعال ما هستی طرحت چند ویژگی داره که خیلی با اهمیت هست و خودش یک کلاس آموزشی، یک اینکه ساده وجذاب هست. دو اینکه انتخاب رنگ هات هم خوبه و من دوستشون دارم. آفرین کارت خوب بود. و سوم اینکه سعی کردی منوی خودت رو در یک فضای بک گراند دار پیاده کنی تا جلوه بیشتری داشته باشه. البته هنوز خیلی جای کار داره و نباید فکز کنی خوب این مرحله تموم شد. در ادامه آموزش انشاء الله تکنیک هایی رو می آموزی که به زیباتر شدن ایده شما خیلی کمک خواهد کرد. موفق باشی.

[miladsaeedi 14]

اینم یه مدل دیگه

البته رزولیشن رو یکم بردم بالا برای خوانایی بیشتر

[ATTACH=CONFIG]2055[/ATTACH]

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

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

[miladsaeedi 14]

استاد کجایی؟

چرا نمیایی؟!

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

[miladsaeedi 14]

بسم الله الرحمن الرحیم

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

ابتدا به این منویی که طراحی کردم دقت کنید.

[ATTACH=CONFIG]2095[/ATTACH]

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

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

اگر همه دوستان موافق هستن بنده آموزش مرحله به مرحله این منو رو همراه با تکنیک های استفاده شده آغاز بکنم، در غیر اینصورت اگر منوی دیگری مد نظرتون هست (مثلا اگر در سایتی منوی جذابی دیدید) بگید تا اون رو به کمک فتوشاپ بهتون آموزش بدم.

باز هم توجه به این نکته ضروری هست که زیبایی یک طرح گرافیکی تا حد زیادی یک سلیقه فردی و شخصی هست شاید طرحی از نظر بنده عالی و از نظر شما افتضاح باشه! ولی ما باید برای عالی یا افتضاح بودن دلیل داشته باشیم، اینه که مهمه:ds6a5d:

[Vahid Taheri 74]

عالیه به نظرم همین منو رو آموزش بدین.اون رنگ سیاه کم رنگ و حاشیه توسی رنگ زیبایی بسیاری به منو داده.