miladsaeedi

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

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

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

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

1- قالب مذهبی

2-قالب خبری

3-قالب عکس

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

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

6-قالب ورزشی

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

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

سلام

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

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

Share this post


Link to post
Share on other sites

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

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

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

موفق باشید

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

سلام

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

Share this post


Link to post
Share on other sites

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

با تشکر

Share this post


Link to post
Share on other sites

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

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

یا علی مدد

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

ب- انتخاب رنگ

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

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

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

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

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

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

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

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

ت- Template Position

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

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

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

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

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

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

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

1 کاربر پسند دیده است

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

امروز با توجه به تاخیرم می خوام بیشتر خرج کنم و یه نکته دیگه هم بگم!: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 نگیرید.

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

[ATTACH=CONFIG]1896[/ATTACH]

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

[ATTACH=CONFIG]1897[/ATTACH]

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

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

Share this post


Link to post
Share on other sites

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

سلام youngboy عزیزم

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

با سلام

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

joomlaforum.ir_13416812491.jpg

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

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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