تبلیغات
آموزش فتوشاپ - ادامه اموزش كام به كام طراحی سایت
آموزش فتوشاپ
آموزش سریع وآسان فتوشاپ
اموزش طراحی سایت به شكل قدم به قدم

*.توجه عکس زیر متحرک است دقت کنید

design-psd-site-5

آموزش طراحی سایت در فتوشاپ-قسمت اول

خب الان شما باید این رنگ رو به بکگراند بدید

۹e9e9e

الان تصویر هیدر من تا اینجاآموزش طراحی سایت در فتوشاپ-قسمت اول

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

من یه قسمت رو برای لوگو در نظر گرفتم سمت چپ حالا شما هر لوگویی دوست دارید بدید این لوگوی من تا اینجا

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

گام سوم

حالا با رنگ زیر

۳۳۹eaa

از قسمت بالا به مقداری که در تصویر می بینید ۴۱ سانتی متر یک مستطیل رسم کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

با همون رنگی که گفتم یک شکل مانند من رسم کنید توجه کنید از قسمت تولبار رِدیوس رو روی ۵۰ درصد تنظیم کرده باشید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

search box

خب تصویر شما باید الان این شکلی شده باشه

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس در یک لایه ی جدید بالای همین لایه اون رو با رنگ زیر پر کنید

۰۵۴۵۴c

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

حالا  محیط باکس سرچ رو به صورت سلکت شده در بیارید و در یک لایه ی جدید بالای همین لایه  اون  رو با رنگ سفید پر کنید و بعدش نصف اون رو به همون روشی که نصف شکل ایکون(حرف اس) رو طراحی کردید پاک کنید و اوپاسیتیش رو روی ۳ بذارید مانند تصویر زیر

آموزش طراحی سایت در فتوشاپ-قسمت اول

گام چهارم

حالا با فونت بی یکان یا فونتی که نزدیک به این فونت هست متن جستجو کنید رو با رنگ زیر تایپ کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

حالا به تصویر بالون مراجعه کنید و سپس یکبار کلید های زیر رو بزنید

CTRL+A

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

CTRL+C

حالا به تصویر اصلی خودمون برگردیم و یکبار کلید های زیر رو بزنید

ALT+SHIFT+CTRL+V

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

تصویر شما باید الان این شکلی شده باشه

آموزش طراحی سایت در فتوشاپ-قسمت اول

حالا لایه ی بالون رو انتخاب کنید و یکبار کلید های زیر رو بزنید تا بتونید سایز اون رو یکم کوچیکتر کنید

CTRL+T

و سپس اون رو مانند تصویر زیر تغییر بدید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

گام پنجم

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

رنگ زیر رو انتخاب کنید

۷becf0

ابزاز زیر رو انتخاب کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

سپس یک شکل مانند تصویر زیر رسم کنید

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

تصویر شما باید الان اینجوری شده باشه

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

۳۴۶۸۶a

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

مانند تصویر زیر

آموزش طراحی سایت در فتوشاپ-قسمت اول

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

CTRL+J

کپی بگیرید و اون رو به قسمت های دیگه که نیاز داریم پست کنید می تونید به اندازه ی ۱۰ سانتی که جدا کردید رنگ بریزید

آموزش طراحی سایت در فتوشاپ-قسمت اول

من وقتی که جابجا میکردم این شکل هارو به هم نچسبودنم یکم فضا گذاشتم تا بیشتر کلید ها به چشم بیاد……..

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

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

آموزش طراحی سایت در فتوشاپ-قسمت اول

ادامه دارد…

منتظر قسمت بعدی آموزش باشید

آموزش طراحی سایت در فتوشاپ-قسمت اول







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


درباره وبلاگ

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

بنماید.آموزشهای این وبلاگ گزیده ای از بهترینها می باشد.
مدیر وبلاگ : عبدالله خلیلی
نویسندگان
نظرسنجی
آیا ازمطالب وبسایت راضی هستید







جستجو

آمار وبلاگ
کل بازدید :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
تعداد نویسندگان :
تعداد کل پست ها :
آخرین بازدید :
آخرین بروز رسانی :
us پاور بانک

سیستم افزایش بازدید و محبوبیت پلاس هاست لینوکس
eXTReMe Tracker

statistics

static1.freebitco.in/banners/468x60-3.png تماس با ما عروسک سال اسب نماد سال 93 فرصت استثنایی کسب و کار اینترنتی

هاست ویندوز

                    
 
 

محصولات ویژه