انجمن اوستا
be Avesta forum khosh amadid
etelaate system neshan midahad ke shoma be onvane mehman vared shodid
baray estefadeh az hameye emkanat bayad sabte nam konid
agar dar forum ozv hastid be hesabe karbari khod vared shavid.
_____
Avesta forum be yek modir talar ke tavanaie jazbe afrad va modiriyat mataleb ra dashteh bashad niazmand ast leza agar kasi davtalab be modiriyat ast darkhast khod ra az tarigh pm be fasatechnology@yahoo.com ersal konad.
_____
lahazate khoshi ra baraye shoma arezoo mandim
انجمن اوستا
Would you like to react to this message? Create an account in a few clicks or log in to continue.

www.Avesta.gettalk.net www.Avestachat.tk
 
Homeتغیر آدرس انجمنSearchRegisterLog in

 

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

Go down 
AuthorMessage
Ali
مدیر کل سایت
مدیر کل سایت
Ali

تعداد پستها : 63
تاريخ عضویت : 2010-11-09
سن : 29
زادگاه : شیراز

آموزش طراحی قالب در فتوشاپ Empty
PostSubject: آموزش طراحی قالب در فتوشاپ   آموزش طراحی قالب در فتوشاپ Empty2010-11-12, 17:49


قدیمی‌ترها که از ما سوال می‌کردندمی‌خواهی چکاره شوی؟ می‌گفتیم پزشک یا خلبان و از این دست؛ امروزه روز اگراز کودکی سوال کنی که می‌خواهی چکاره شوی، در میان جواب‌هایش اگر شنیدیدکه گفت “طراح وب سایت” تعجب نکنید!

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

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

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

آموزش طراحی قالب در فتوشاپ Webthemepariyanaint
در این مقاله، در مرحله اول، به نحوه طراحی یک قالب وبسایت در فتوشاپبصورت قدم‌به‌قدم و در مرحله دوم، کدنویسی به زبان html , css برای قالبطراحی شده را بررسی می‌کنیم. بدیهی‌ست مراحل تکراری پروژه جزء این مقالهنمی‌باشد و فقط به بیان تکنیک‌ها و روش‌های موجود می‌پردازیم. در پایانفایل پی‌اس‌دی قالب در اختیار کاربران قرار می‌گیرد. درصورت استفاده ازهمین قالب و ایجاد تغییرات جزئی، ذکر نام طراح قالب الزامیست.
روز اول : طراحی قالب وبسایت در فتوشاپ


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

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

برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها می‌پردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
آموزش طراحی قالب در فتوشاپ 2
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگسفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتماسفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
آموزش طراحی قالب در فتوشاپ 3
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
آموزش طراحی قالب در فتوشاپ 4
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. بااین کار فایل طراحی شده ما بصورت یک پترن ذخیره می‌شود و می‌توانیم از آندر تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، می‌توانید از روش فوق استفاده کنید.به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجادکرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه“Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براشهای آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پس‌زمینه را آماده کردیم.حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن می‌تواندمتغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپسروی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” بازشود. تنظیمات افکت های این لایه را مطابق عکس‌های زیر اعمال کنید.
آموزش طراحی قالب در فتوشاپ 5
آموزش طراحی قالب در فتوشاپ 6
آموزش طراحی قالب در فتوشاپ 7
همانطور که در عکس‌ها می‌بینید، کد رنگ‌های استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده می‌کنیم.با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه،اشکالی را مانند شکل زیر ایجاد کنید.
آموزش طراحی قالب در فتوشاپ 8
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکت‌های زیر را اعمال کنید.
آموزش طراحی قالب در فتوشاپ 11
آموزش طراحی قالب در فتوشاپ 9
آموزش طراحی قالب در فتوشاپ 10
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
آموزش طراحی قالب در فتوشاپ 11-2
آموزش طراحی قالب در فتوشاپ 12
آموزش طراحی قالب در فتوشاپ 13
آموزش طراحی قالب در فتوشاپ 14
آموزش طراحی قالب در فتوشاپ 15
در این مرحله می‌توانید منو‌های مورد نظر را با ابزار “Type Tool” مانندشکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متن‌ها، منو‌ها وفرم ها (جعبه جستجو) با استفاده از اچ‌تی‌ام‌ال ایجاد می‌شوند و نیازی بهایجاد در فتوشاپ نیست!
آموزش طراحی قالب در فتوشاپ 16
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.




مرحله سوم: طراحی سرصفحه
لایه‌ی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکت‌های زیر را اعمال کنید.
آموزش طراحی قالب در فتوشاپ 17
آموزش طراحی قالب در فتوشاپ 18
آموزش طراحی قالب در فتوشاپ 19
آموزش طراحی قالب در فتوشاپ 20
آموزش طراحی قالب در فتوشاپ 21
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکارروی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدیدرا مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + Tاستفاده کنید.
آموزش طراحی قالب در فتوشاپ 22
مطابق آنچه در قبل گفته شد، می‌توانید عکس و متن‌هارا در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آندر این مقاله، تشخیص مکان‌های اجزای صفحه، برای کد نوشتن به زباناچ‌تی‌ام‌ال‌ است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده درعکس قرار دهید.
آموزش طراحی قالب در فتوشاپ 23
برای طراحی نوار “عضو شوید”، ابتدا با استفاده ازابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید وافکت زیر را بر روی لایه اعمال کنید.
آموزش طراحی قالب در فتوشاپ 24
آموزش طراحی قالب در فتوشاپ 25
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پی‌در‌پی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی می‌توانیدبه طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالبو تبلیغات است. برای مثال در عکس زیر همانطور که می‌بینید در ابتدای صفحهبا توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونهتغییر شکل می‌دهد.
آموزش طراحی قالب در فتوشاپ 26
لازم به ذکر است که طراحی این جداول در فتوشاپ فقطبمنظور معین کردن جاهای جداول جهت طراحی‌ در زبان اچ‌تی‌ام‌ال هست، لذاطراحی این جدول‌ها در “روز دوم: کد نویسی به زبان اچ‌تی‌ام‌ال برای قالبوبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترینراه‌ها، برای طراحی یک قالب مطلوب استفاده شود. در ادامه این سری ازمقالات با متد‌های پیشرفته‌تر و جذاب‌تر آشنا خواهید شد که لازمه آن، مسلطبودن بر مباحث این مقاله هست.



_________________________________________________________________________
تبليغـــــــــــــــــــــات مـــــــــــــــــــــــــمنوع
متخلفين بدون اخطار اخراج ميشوند

Back to top Go down
https://avesta.forumfa.net
 
آموزش طراحی قالب در فتوشاپ
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
انجمن اوستا :: انجمن اوستا :: فتوشاپ photoshop-
Jump to: