miladsaeedi

سلام

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

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

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

سلام

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

سلام استاد

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

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

:25:

سلام

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

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

این منوی منه!

[ATTACH=CONFIG]2047[/ATTACH]

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

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

تقدیم شماgift

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

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

[ATTACH=CONFIG]2045[/ATTACH]

با سپاس

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

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

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

سلام

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

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

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

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

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

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

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

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

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

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

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

2- حالت hover

3- حالت active

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

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

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

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

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

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

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

دوستان گلم کسی سوالی نداره? برم سراغ بحث بعدی?

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

1- در هنگام چند زبان سازی سایت شما را کمک می کند و لازم می شود.

2- انعصاف قالب بالا می رود.

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

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

گر چه ماه رمضان است بیاور جامی زان می ناب که از او پخته شود هر خامی

سلام و پوزش بنده رو پذیرا باشید. دوستان گلم در این مدت مشکل و مشغله ای برای ینده ایجاد شد نتونستم در خدوتتون باشم. انشاء الله در این ماه مبارک فرصت این آموزش رو داشته باشم. ن با اجازه دوستان می خوام تلفیقی رو از کا ربچه ها به عنوان template position داشته باشم.

می ریم سراغ آموزش:

بچه ها به این قالبی که من سال گذشته طراحی کردم دقت کنید.(البته اتود و سفارش نبود به خاطر همین کمی و کاستی داره)

[ATTACH=CONFIG]2034[/ATTACH]

و این هم position هاش

(دقت کنید من به دلیل سرعت بخشیدن به کار در این مرحله با بی دقتی فقط موقعیت ها را هایلایت کرده ام)

[ATTACH=CONFIG]2036[/ATTACH]

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

اگر تا اینجا کسی سوالی داره بپرسه. من منتظرم.

سلام.

خسته نباشی استاد.

اینم مال من !

[ATTACH=CONFIG]1957[/ATTACH]

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

با سلام استاد

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

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

باتشکر.

[ATTACH=CONFIG]1954[/ATTACH]

سلام mp_mp353 عزیز

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

دوستان گلم میبینید که با کمی فکر می تونید کارهاتون رو پخته تر کنید.

این یکی مستحق نمره 85 هست. آفرین

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

دوستان گرانقدر mp_mp353 و sun هم هر دو اتود های خوبی زدند

از نقاط قوتشان می توان به

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

و امتیاز های شما برای هر کدام از 100 امتیاز 70 امتیاز می باشد

آقای mohammad_01 گرانقدر

تقریبا نفاط ضعف و قوت شما هم مثل دوست خوبمون misanweb بود.

و متشکرم از اجراتون

از 100 امتیاز 65 امتیاز

دوست خوبمون misanweb عزیز

نقاط قوت:

1-تقسیم بندی مناسب قسمت بالایی و هدر سایت

2-وجود دو موقعیت left1,2 برای متفاوت تر شدن

نقاط ضعف:

1- عدم پوشش مناسب (ما هم بر این نظر هستیم که حتی الامکان سایت شلوغ نشود ولی وجود موقعیت های زیاد دستمان را بازتر می گذارد و طرحمان را حرفه ای تر)

2-عدم رعایت فاصله ها

در کل ممنونم از وقتی که گذاشتی

از 100 امتیاز 65 امتیاز

و اما دوست خوبم ماهان

این هم طرحشون

[ATTACH=CONFIG]1953[/ATTACH]

نقاط قوت:

1-پوشش تقریبا کامل

2-آشنایی با ابزار Slice

3-موقعیت های خوب و کارامد به خصوص در بخش بالایی و هدر سایت

نقاط ضعف:

1-بهتر بود بعد از موقعیت های بالا و قبل از متن اصلی موقعیت هایی نظریر آنچه در پایین آورده اید برای جامع تر شدن کارتان می آوردید.

2-عدم نامگذاری موقعیت ها

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

از 100 امتیاز 85 امتیاز

اما دوست خوبمون limanweb عزیز

طرح ایشون:

[ATTACH=CONFIG]1947[/ATTACH]

نقاط قوت:

1-پوشش خیلی مناسبی رو موقعیت دهی کردید.

2- دسته بندی ها در هر بخش تناسب دارد. مثلا در بخش بالایی سایتتون وجود موقعیت های left 1,2 کار مناسبی به نظر می رسه!

نقاط ضعف:

1-در قسمت بالایی سایت بهتر بود از چند موقعیت دیگر هم استفاده می کردید ولو اینکه همزمان با دیگر موقعیت ها فعال نباشد.

2- فاصله بین موقعیت ها و تقسیم بندی صفحه منظم نیست

3-بهتر بود در مورد قسمت پایینی سایت یه تجدید نظری می کردید!

در کل طرح خیلی خوبی زدید. ممنونم

از 100 امتیاز 80 امتیاز

عرض سلام خدمت دوستان گلم

عزیزان ممنون از مشارکتتون، اما حالا می پردازیم به نقات قوت و ضعف موقعیت گذاریتون.

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

این هم طرح ایشون

[ATTACH=CONFIG]1946[/ATTACH]

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

نکات قوت:

1- سعی شده حتی الامکان تمام بخش ها تحت پوشش قرار بگیرد.

2-هدر سایت یکپارچه نیست و چند تکه کار شده.

3- هم موقعیت راست داریم و هم چپ.

نقات ضعف:

1-متاسفانه نکته ای که تقریبا 80 درصد دوستان رعایت نکردن نبودن نظم و انضباط در فاصله ببن موقعیت هاشون بود به این نحو که در طرح ایشون فاصله بین user 4 ,5 ,6 با موقعیت های user7,8,9,10 متفاوت هست و این نظم در کار خیلی مهم هست.

2-اسلاید شو بهتر بود که به صورت یکپارچه طراحی نمیشد.

3-موقعیت logo بیش از حد بزرگ است.

در کل از 100 امتیاز 70 امتیاز

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

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

موفق باشید

سلام youngboy عزیزم

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

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

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

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

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

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

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

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

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

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

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

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

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

سلام

ابتدا وارد cpanel سایتت بشو و بعد در مسیر اصلی جوملا روی فایل configuration.php راست کلیک کن و بر روی permission کلیک بفرمایید ابتدا تمام تیک ها رو بزن تا عدد زیر باکس به 777 تغییر پیدا کنه و بعد تنظیمت رو انجام بده. توجه داشته باش که حتما حتما حتما برای امنیت سایتت دوباره permission فایل مورد نظر رو به حالت قبل برگردون تا قابل ویرایش نباشه.