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

[tohid 10]

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

[Mohammad Yousefi 14]

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

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

به طور مثال ارسال پست با محتوایی که شما فرستادین اسپم محسوب میشه، به جای اینکه بپرسید

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

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

ممنون از دوستان

از دکمه می پـــسندم استفاده بفرمایید.

در نهایت آرزو سربلندی شما را داریم

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

[tohid 10]

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

من هم مطالب قبلی رو خوندم book

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

[مهرداد 10]

سلام دوستان.

من تازه عضو شدم و همه مطالب قبلی رو هم خوندم.:ad54ad:

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

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

من سعی میکنم تا آخر امشب پوزیشن های سایت رو طراحی کنم با فتوشاپ. هرچند برام سخته یکم. چون با ابزار slice آشنایی ندارم.

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

فقط یه سوال، این منو رو با چه ابزاری طراحی کنیم؟؟ همون سه موقیتی که استاد فرمودن؟؟؟:21:

[miladsaeedi 14]

سلام دوستان.

من تازه عضو شدم و همه مطالب قبلی رو هم خوندم.:ad54ad:

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

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

من سعی میکنم تا آخر امشب پوزیشن های سایت رو طراحی کنم با فتوشاپ. هرچند برام سخته یکم. چون با ابزار slice آشنایی ندارم.

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

فقط یه سوال، این منو رو با چه ابزاری طراحی کنیم؟؟ همون سه موقیتی که استاد فرمودن؟؟؟:21:

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

خوش آمدی- انشاء الله در زمان آموزش قدم به قدم طراحی منو با ابزارها هم آشنا خواهی شد.

موفق باشی

[akbari 11]

سلام دوستان.

من تازه عضو شدم و همه مطالب قبلی رو هم خوندم.:ad54ad:

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

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

من سعی میکنم تا آخر امشب پوزیشن های سایت رو طراحی کنم با فتوشاپ. هرچند برام سخته یکم. چون با ابزار slice آشنایی ندارم.

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

فقط یه سوال، این منو رو با چه ابزاری طراحی کنیم؟؟ همون سه موقیتی که استاد فرمودن؟؟؟:21:

مهرداد جان اگر در ضمینه فتو شاپ مبتدی هستی برو به این تاپیک و کتاب آموزش فتوشاپ رو دانلودکن!

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

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

[مهرداد 10]

خوب به کمک خدا تونستم پوزیشن های قالب سایتمو بعد از کلی سر و کله زدن با فتوشاپ، طراحی کنم.:1dco2x0p1lilzhfpg1t

فقط مونده منو ها. چه جوری باید سه حالت ACTIVE - HOVER - PASSIVE رو طراحی کنم؟؟:21:

اینم عکسش:

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

[miladsaeedi 14]

خوب به کمک خدا تونستم پوزیشن های قالب سایتمو بعد از کلی سر و کله زدن با فتوشاپ، طراحی کنم.:1dco2x0p1lilzhfpg1t

فقط مونده منو ها. چه جوری باید سه حالت ACTIVE - HOVER - PASSIVE رو طراحی کنم؟؟:21:

اینم عکسش:

سلام مهرداد عزیزم

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

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

[مهرداد 10]

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

من الان می خوام تلاش کنم که سه حالت منو رو طراحی کنم.

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

با فتوشاپ و فقط رسم سه خط سلیقه ای به عنوان active - hover - passive باید این کار و کنم یا طور دیگه ای است؟

تو یک فایل جداگانه یا توی همون فایل؟؟؟؟

[مهرداد 10]

خوب این هم از سه حالت منوی من.

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

این عکس مربوط میشه با سه حالت منوهای من. البته منوهای اصلی ( یعنی شامل زیر منوها نمیشیه )

[miladsaeedi 14]

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

[tohid 10]

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

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

http://jupload.ir/do.php?imgf=joomlaforum.ir_13440155221.jpg

http://jupload.ir/do.php?imgf=joomlaforum.ir_13440156001.jpg

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

[مهرداد 10]

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

خواهش میکنم آقای سعیدی. منتظر ادامه آموزش هستیم

[bachehayesangar 10]

سلام

به نظر من قالب های مذهبی بهتره

چون بقیه قالب ها رو به راحتی میتونند پیدا کنند

[Vahid Taheri 74]

سلام

به نظر من قالب های مذهبی بهتره

چون بقیه قالب ها رو به راحتی میتونند پیدا کنند

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

در پناه حق

[miladsaeedi 14]

آخه ما منتظر هستیم بخدا.

چرا کلاس دیر به دیر تشکیل میشه؟!؟!!!:65d6a5d6s:

سلام به دوستان گلم و آرزوی قبولی طاعات و عبادات

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

[Vahid Taheri 74]

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

برای اینکه تاپیک شلوغ نشه و دوستان دیگه هم بتونن از این تاپیک بهره مند بشن خواهشندم از دادن پستهای اسپم نظیر(ما منتظریم.استاد پس چرا نمیای و ...)خودداری کنید

الان هم اون پست هارو حذف میکنم تا یه ذره تاپیک خلوت تر بشه و دسترسی به مطالب آسون تر

ضمنا از این پس برای آپلود تصویر یا فایل از آپلودسنتر انجمن استفاده کنین تا فایلها از بین نرن

موفق باشین

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

[miladsaeedi 14]

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

[ATTACH=CONFIG]2124[/ATTACH]

اولین کاری که میکنید این هست که کادر صحیحی رو در صفحه داشته باشید. توجه داشته باشید که این منو فضای 100% عرض قالب رو نمیگیره.

ابتدا وسط کادر رو هم طولی و هم عرضی مشخص میکنیم و با استفاده از نشانه گذاری ruller علامت میزنیم. با توجه به اینکه صفحه ما 700pxاست بر روی پیکسل 350 علامت میزنیم و در عرض بر روی 50 . این کار باعث میشه که کارمون تمیز انجام بشه و بتونیم منوها رو در سر جای خودشون قرار بدیم. سپس از هر دو طرف 10 پیکسل به طرف داخل علامت می زنیم. مطابق شکل زیر:

[ATTACH=CONFIG]2125[/ATTACH]

حالا همه چیز برای شروع کار آمادست توجه داشته باشید ما 8 منو داریم که برای هر کدام 85 پیکسل فضا در نظر گرفتیم که در مجموع می شود 680px پس در ایجاد صفحه سعی کنید به اندازه ها و صحیح شدن اونها توجه داشته باشید.

[miladsaeedi 14]

حالا برای اینکه کار جلوه بهتری داشته باشه زمینه اون رو از سفید به خاکستری تغییر میدهیم. (کد رنک پس زمینه dfdfdf#)

در این مرحله شروع می کنیم به جدا کردن صفحه با استفاده از ابزار نشانه گذاری به فاصله های 85 پیکسلی، توجه داشته باشید برای انجام این کار حسابی ZOOM کنید تا اندازه نشانه ها رو به درستی بزنید.

[ATTACH=CONFIG]2126[/ATTACH]

ایجاد جدا کننده منو

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

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

1- ابتدا یک لایه جدید با نام white div ایجاد کنید.

2- حالا با استفاده از ابزار line یک خط به عرض 1px و طول حدودل 90px ایجاد نمایید. توجه داشته باشید که رنگ این خط باید سفید باشد.

[ATTACH=CONFIG]2127[/ATTACH]

3- یک کپی از لایه white div بگیرید و نام آنرا black div بگذارید. خط جدید را دقیقا در مجاورت خط قبلی قرار داده و رن آنرا به مشکی تغییر دهید. برای تغییر دادن به رنگ مشکی می توانید ازمنوی Layer>Layer Style >color Overlay استفاده نمایید.

[ATTACH=CONFIG]2128[/ATTACH]

4-از پالت Layer مقدار opacity لایه black div را به مقدار 40% کاهش دهید.

[ATTACH=CONFIG]2129[/ATTACH]

5- جالا با استفاده از ابزار Eraser مقداری از بالا و پایین هر دو خط را محو نمایید.

[ATTACH=CONFIG]2130[/ATTACH]

جدا کننده منوی شما آماده شد!:thanks:

[miladsaeedi 14]

حالا برای اینکه کارهامون از همین ابتدا مرتب باشن دولایه white div و black div رو با هم در یک روه قرار می دهیم. برای این کار بعد از انتخاب کردن هر دو لایه با استفاده کردن ctrl + G آنها را در یک گروه قرار دهید و نام آنرا Div بگذارید. حالا با پایین مگه داشتن کلید Alt از این گروه 7 کپی بگیرید و بر روی نشانه گذاری های 58 پیکسلی قرار دهید مانند شکل زیر:

[ATTACH=CONFIG]2131[/ATTACH]

[tamana 10]

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

[miladsaeedi 14]

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

سلام و عرض خوش آمد گویی

ببین دو تا نکته اینجا مهمه

1.توانایی کار با فتوشاپ

2.اطلاعات اولیه در مورد قالب های سایت به خصوص قالب های فتوشاپ

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

[Vahid Taheri 74]

در تکمیل آموزشات دوست خوبمون آقای سعیدی بگم که برای دقت بیشتر در کار نشانه های smart guides رو اگر فعال کنین خیلی بهتون کمک میکنه.برای فعال کردش به منو view برین و رو Extras کلیک کنید یا ctrl+h رو بفشارید بعد در بخش view زیر گزینه Extras موس رو روی show قرار دهید در لیست باز شده smart guides رو فعال کنید.

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

موفق باشین

[mahan 11]

با سلام

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

شاد باشید و شادی بخش دیگران

[Vahid Taheri 74]

با سلام

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

شاد باشید و شادی بخش دیگران

روشون کلیک کنین بزرگ میشن

در پناه حق