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

[miladsaeedi 14]

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

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

1- قالب مذهبی

2-قالب خبری

3-قالب عکس

4-قالب فروشگاهی

5-قالب برای نمایش بر روی موبایل

6-قالب ورزشی

7-پیشنهاد شما ... !

موفق باشید- فعلا یا علی مدد

[Mohammad Yousefi 14]

سلام، خوش اومدی

آقا ورزشی رو برو بریم

[reza.sh 19]

ضمن خوش امد گویی miladsaeedi جان بنظرم قالب شرکتی شیک نه جلف + نمایش روی گوشی موبایل چیز جالبیه و ای کاش موقع ایجاد تایپک گزینه هاتو تو قسمت نظر سنجی قرار میدادی

[miladsaeedi 14]

سلام

این که من در قسمت نظر سنجی وارد نکردم رو بگذارید روی حساب عدم اطلاع-

دوستان الان به ذهنم رسید که توی ایجاد این قالب شما هم همکاری داشته باشید- مسائل فنیش با بنده - کمک استراتژیک نیز از شما. (یعنب چه ماژول ها و Position هایی به نظر شما نیاز هست؟)

[Vahid Taheri 74]

سلام به همه ی دوستان عزیز

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

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

موفق باشید

[miladsaeedi 14]

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

[zoom1.ir 10]

سلام

منم فکر کنم یه قالب شرکتی با گرافیک باشه و موقعیت slideshow هم حتما داشته باشه

[amin.poorsaeed 26]

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

با تشکر

[miladsaeedi 14]

خوب ضاهرا دوستان بیشتر دوست دارن که آموزش قالب شرکتی رو داشته باشیم.

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

یا علی مدد

[miladsaeedi 14]

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

دوستان گلم ابتدا در مورد گرافیک و استراتژی های گرافیکی چند نکته رو خدممتون عرض کنم. امیدوارم شما هم مشارکت داشته باشید.

سپس اجزای مختلف رو در قالب چند ترفند آموزش و سپس به جمع بندی کلی و پباده سازی قالب به صورت کامل خواهیم پرداخت. اگر خدا هم عمری بده بعد از پایان دوره خودم قالب رو به صورت قالب نصبی برای جوملا 1.5 و 2.5 آماده می کنم.

آیا همه با این روند موافق هستید؟

[miladsaeedi 14]

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

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

الف- استراتژی

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

*****انشاء الله دوستان گل من در ادامه یک شرکت با خدمات مشخصی رو با کمک همدیگر (البته بنده در هم در خدمت هستم) تعریف بکنیم و بر اساس اون ادام هکار رو پیش ببریم.*****

ب- انتخاب رنگ

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

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

پ-اجرا و رنگ بندی

من در طول 10 - 11 سالی که کار آموزش گرافیک کامپیوتری رو انجام دادم با دانشجویان مختلفی سر و کار داشتم که اغلب اون ها سعی در این داشتن که بیشتر چیز هایی رو که بلد هستن و در طول 4 -5 جلسه اول فرا می گیرن در قالب یک طرح پیاده کنند و یا بی جا از رنگ ها متنوع و زیادی در طرح بندیشون استفاده کنن. این کار کاملا اشتباهه چرا که اثر بخشی کار رو تا حد زیادی داغون می کنه:128fs318181:

برای روشن تر شدن مسئله و توجه به استثنائات یک مثال می زنم:

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

فکر کنم تا الآن 99،9 درصد رنگ پس زمینه رو انتخاب کردید، درست حدث زدید بهترین رنگ برای بک گراند این سایت رنگ سفید هست و لا غیر البته شاید بشه از رنگ مشکی متالیک هم استفاده کرد ولی مطمئن باشید بک سفید چیز دیگری هست.

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

ت- Template Position

منظور از Template Position همون مکان قرارگیری ماژول ها و کامپوننت های ماست که از اهمیت ویژه ای برخورداره، دسته بندی اصولی و کامل یک قالب با درنظر گرفتن خوانا بودن کار بسیار مهمی که در اول کار باید به آن توجه ویژه ای بشه. بچه ها سعی کنید با یه دید عمیق position ها رو ایجاد کنید چرا که در غیر این صورت ممکن هست به مشکل بر بخورید.

ان شاء الله ادامه دارد ...

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

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

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

ان شاء الله از جلسه بعدی تمام بچه ها فتوشاپ به دست! آماده باشن که خیلی سریع می خواهیم وارد محیط فتوشاپ بشیم و کار رو از اونجا آغاز کنیم.

فعلا یا علی مدد

[miladsaeedi 14]

دوستان گلم اگر سوالی در این خصوص ندارید برم قسمت دوم رو آموزش بدم. می خوام برم سراغ Template Position و آموزش کار با ابزار Slice در فتوشاپ.

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

***نکته امروز: خوب دیدن را تمرین کنید، از قالب ها، ایده ها و طراحی هایی که می بینید به راحتی نگذرید. خوب دیدن اولین گام برای خوب اجرا کردن یک طرح است.***

ویرایش شده در تیر 91 توسط miladsaeedi

[ابوالفضل طالبی 280]

***نکته امروز: خوب دیدن را تمرین کنید، از قالب ها، ایده ها و طراحی هایی که می بینید به راحتی نگذرید. خوب دیدن اولین گام برای خوب اجرا کردن یک طرح است.***

جناب سعیدی به نظرم مهمترین نکته در طراحی قالب رو بیان کردید .. واقعا اگر نکات ریز در قالبهای مختلفی که میبینم رو دقت کنیم خیلی ایده ها میشه از اونها درآورد و بکار برد ... بخشی از ایده ها آماده است و با تغییرات کمی میشه به یک ایده ناب تر تبدیل بشه .. متاسفانه خیلی ها که ادعای طراحی قالب دارند فقط چند چیز رو میبینند ؟!!! مثلا هدر ماژول چی باشه!! فوتر چی بزنم!! موقعیت اسلاید کجا بزارم!! همین باعث میشه همه قالبهای طراحی شده در یک سبک و سیاق باشه و هیچ خلاقیت و طرح خاصی در اونها نمیشه پیدا کرد علاوه بر اون مبحث هارمونی رنگ که متاسفانه رعایت نمیشه که هیچ بلکه گرافیک خوبی هم در همون رنگهای نا هماهنگ بکار میگیریم!!

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

من هم این تاپیک رو دنبال میکنم و جاهایی با اجازه شما که استاد گرافیک هستید همراهی میکنم.. :ds6a5d:

[amin.poorsaeed 26]

واقعا نحوه بیان کردن مطالب فرق می کنه من نحوه بیان خودم رو با بیان ایشون مقایسه کردم و متوجه شدم که ایشون با زبان شیرین و آسانی بیان می کنن با اینکه منم شروع به ساخت قالب کردم ولی اگر کسی ازم راهنمایی بخواد با این زبان و به این نحو نمی تونم توضیح بدم واقعا آفرین داره ، با تشکر :128fs318181: :35:

[Vahid Taheri 74]

ببخشید من این دو سه روز نبودم

با تشکر از استاد خوب و ماهر

به نظرم رنگ سفید یا توسی برای بک عالیه چون برای متون قالب هم بهتره و درکل سایت های دارای بک گراند سفید جلوه زیباتری دارن.مثلا همین جوملافروم و موتورجستجوهای گوگل و یاهو.

رنگی هم که در منوها و سایر بخش های قالبه آبی باشه زیباتره ولی باز به قول استاد بستگی به رنگ شرکت یا هر چیزی که سایت مختص به اونه داره.

موقعیت ها هم موقعیت های قالب Jp-bussiness که قالب رایگان و معروفیه مناسبه ولی قالبش خیلی سادست.

بازم تشکر به خاطر آموزش و وقتی که برای بچه های جوملافروم میذارین

[cible 10]

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

ضمنا قالب کد نشه و نحوه قرار دادن کد سئو آموزش داده شود

[soozedoa 10]

بله خوبه خدا قوتت بده

[amirali0001 13]

ممنون که وقت میزارین

[miladsaeedi 14]

سلام به همه دوستان گلم به خصوص tarantino و amin.poorsaeed عزیز که با پست هاشون به من روحیه دوچندان دادن. راستش یه عذر خواهی دارم از بابت تاخیر در پست هام و دلیلش هم چند تا پروژه و همایشی بود که درگیرش بودم. از همه عذر خواهی می کنم الان هم در مسافرتم و انشاء الله به زودی ادامه آموزش ها رو خدمتتون خواهم داشت. پیشاپیش عیدتون هم مبارک باشه.

تنها همین را می دانم که جوان های ایرانی لایق جان نثاری هستند. فعلا یا علی مدد.

[miladsaeedi 14]

با عرض سلام و ادب و عذر خواهی از بابت تاخیر خیلی سریع میریم سراغ ادامه آموزش.

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

***نکته پست: وجود تعداد زیاد و پوشش کلیه بخشها برای درج موقعیت در قالب بسیار مفید است ولیییییییییی استفاده همزمان از همشون اصلااااااااا مفید نیست!***

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

امروز با توجه به تاخیرم می خوام بیشتر خرج کنم و یه نکته دیگه هم بگم!:did2:

***نکته دوم پست!: با کلیک های زیاد و تو در تو به بهانه خلوتی، بیش از حد کاربر سایت را با این سرعت بالای اینترنت اسیر و کلافه نکنید***

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

الان یک قالب با position های مختلف در فتوشاپ طراحی می کنم و بعد دربارشون توضیح می دم. این کار رو با استفاده از خط کش و rounded regtangle tool یا همون ابزار رسم مربع با گوشه های منحنی ایجاد می کنم. چون توی این جلسه بیشتر می خوام درباره استراتژی ایجاد موقعیت صحبت کنم مسائل فنی رسم رو به جلسه بعد که سعی میکنم فردا باشه(چون الان ساعت حدود 2 بامداده و خوابم میاد!) ادامه بدم.

خوب حالا :

1- یک سند جدید که من از این به بعد بهش می گم بوم نقاشی رو، با مشخصات زیر ایجاد کنید و اسم اون رو بگذارید Template Positions.psd

2-طول 1300px در عرض 980px (توجه داشته باشید که عرض 980 پیکسل یک عرض استاندارد کنسرسیوم جهانی وب هست!)

3-resolution 72 dpi

4- background contents : white

شروع به کار

فکر کردید یادم رفته شما هم باید فعالیت داشته باشید!؟:dadad4: حالا همتون با استفاده از ابزار هایی که گفتم یک سری موقعیت قالب در سندی که ایجاد کردید رسم کنید من هم رسم می کنم و بعد از اینکه شما قرار دادید من هم قرار می دم تا با همدیگه مقایسشون کنیم ومزایا و معایب هر کدومشون رو بررسی کنیم. در طراحی ها به چند نکته دقت کنید.

1-اندازه ها را در حد پیکسل دقیق بگیرید تا کار غر نشه ( یا قر (نمی دونم با کدوم ق (غ) هست؟!))

2- برای هر قسمت یک اسم بگذارید و با ابزار text در درون کادرش بنویسید.

3- radius ابزار rounded regtangle tool رو بیشتر از 3px نگیرید.

یا علی ببینم چه می کنید. منتظرم

ویرایش شده در تیر 91 توسط miladsaeedi

[miladsaeedi 14]

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

[Vahid Taheri 74]

من این positions رو آماده کردم.اگه یه ذره میبیند بد و سادس به خاطره اینه که اولین قالبی هست که میخام با کمک استاد میلاد سعیدی بسازم

[ATTACH=CONFIG]1896[/ATTACH]

درباره یکی از نکته های استاد هم که قالب نباید شلوغ باشه این رو پیدا کردم و بد نیست که بقیه هم ببیننش

[ATTACH=CONFIG]1897[/ATTACH]

(سیاها جوهره که پاشیده رو بومش :128fs318181:)

ممنون از همه ی کسانی که در این تاپیک و کلا در کل انجمن زحمت میکشن.

[miladsaeedi 14]

سلام youngboy عزیزم

خیلی خیلی ممنونم که کار رو جدی گرفتی و من رو همراهی می کنی تا چیزی با هم یاد بگیریم.

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

از شوخی که بگذریم واقعا تمیز و مرتب کار کردن در هر کاری باعث پیشرفت و توسعه اون کاره و کار رو حرفه ای تر می کنه.

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

بچه ها اگر دیر بجنبید youngboy شاگرد اول کلاس میشه و همتون رو مردود می کنم ها:hoy:

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

ویرایش شده در تیر 91 توسط miladsaeedi

[Mohammad Yousefi 14]

با سلام

استاد من تا امشب یه طرح میزنم تا از کلاس عقب نمونم:a2d3:

لطفا هوای ما شاگرد زرنگ ها رو آخر ترم داشته باشین:a2d3:

ممنون از زحمات

[Mohammad Yousefi 14]

استاد سلام:bala:

میبخشید دیر شد، عجب دانشجوهای بی ملاحظه ای هستیم ماshotup

اینم تمپ پوزیشن من

دوستان گلم من منتظرم ها پس چی شد؟