miladsaeedi

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

سلام دوستان.

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

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

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

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

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

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

Share this post


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

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

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

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

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

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

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

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

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

موفق باشی

Share this post


Link to post
Share on other sites

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

سلام دوستان.

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

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

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

اینم عکسش:

ba716f4a7265.png

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

Share this post


Link to post
Share on other sites

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

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

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

اینم عکسش:

ba716f4a7265.png

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

a3a3c407f823.png

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

سلام

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

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

Share this post


Link to post
Share on other sites
سلام

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

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

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

در پناه حق

Share this post


Link to post
Share on other sites
آخه ما منتظر هستیم بخدا.

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

موفق باشین

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

Share this post


Link to post
Share on other sites

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

[ATTACH=CONFIG]2124[/ATTACH]

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

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

[ATTACH=CONFIG]2125[/ATTACH]

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

Share this post


Link to post
Share on other sites

حالا برای اینکه کار جلوه بهتری داشته باشه زمینه اون رو از سفید به خاکستری تغییر میدهیم. (کد رنک پس زمینه 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:

Share this post


Link to post
Share on other sites

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

[ATTACH=CONFIG]2131[/ATTACH]

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
سلام ..راستش من این پست رو از اول تا همینجاشو دنبال کردم ولی واقعا خیلی چیزاشو متوجه نشدم شاید برای اینکه تازه کردم..مثلا در مورد پوزیشن بچه ها و توضیحاتی که خود استاد داد خیلی از معانی رو متوجه نشدم...کمی گنگ شدم در حال حاضر.....میخواستم بدونم برای بهتر شدن دیدم باید چه کار کنم و از چه منبعی کمک بگیرم....

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

موفق باشین

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

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

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

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

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


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

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

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


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