miladsaeedi

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

131 پست در این موضوع

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

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

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

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

2- حالت hover

3- حالت active

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

سلام

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

[ATTACH=CONFIG]2045[/ATTACH]

با سپاس

Share this post


Link to post
Share on other sites
سلام

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
با سلام و تشکر از آموزش

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

[ATTACH=CONFIG]2045[/ATTACH]

با سپاس

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

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

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

Share this post


Link to post
Share on other sites
این منوی منه!

[ATTACH=CONFIG]2047[/ATTACH]

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

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

تقدیم شماgift

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

سلام استاد

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

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

:25:

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

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

تقدیم شماgift

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

Share this post


Link to post
Share on other sites
سلام استاد

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

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

:25:

سلام

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

Share this post


Link to post
Share on other sites

سلام

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

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

[ATTACH=CONFIG]2053[/ATTACH]

,

[ATTACH=CONFIG]2054[/ATTACH]

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

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

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

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

[ATTACH=CONFIG]2055[/ATTACH]

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

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

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

Share this post


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

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

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

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

Share this post


Link to post
Share on other sites
سلام

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

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

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

سلام

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

Share this post


Link to post
Share on other sites
سلامی دوباره

این هم یک منو

[ATTACH=CONFIG]2052[/ATTACH]

با سپاس

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

Share this post


Link to post
Share on other sites
[ATTACH=CONFIG]2053[/ATTACH]

,

[ATTACH=CONFIG]2054[/ATTACH]

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

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

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

Share this post


Link to post
Share on other sites
اینم یه مدل دیگه

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

[ATTACH=CONFIG]2055[/ATTACH]

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

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

Share this post


Link to post
Share on other sites
استاد کجایی؟

چرا نمیایی؟!

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

Share this post


Link to post
Share on other sites

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

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

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

[ATTACH=CONFIG]2095[/ATTACH]

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری