قدیمیترها که از ما سوال میکردند میخواهی چکاره شوی؟ میگفتیم پزشک یا خلبان و از این دست؛ امروزه روز اگر از کودکی سوال کنی که میخواهی چکاره شوی، در میان جوابهایش اگر شنیدید که گفت “طراح وب سایت” تعجب نکنید!
برای طراحی یک وب سایت باید در وهله اول دچار کمی خلاقیت و ذوق هنری باشید اما اگر ندارید و در عوض به جایش خیلی علاقه دارید، جای نگرانی نیست چون با کمی ممارست و تمرین و مطالعه، شاخصههای لازم برای درک طراحی وب سایت را کسب میکنید.
در بخش اول میبایست وب سایت شما از جهت شکل و ظاهر بسته به نوع محتوایی آن طراحی گرافیکی شود. ابتدا ساختار اصلی آن را بر روی کاغذ ترسیم کنید تا یک شمای کلی از طرح در دست داشته باشید. این مطلب وب سایت ittutorial با عنوان اصول و پیش نیازهای طراحی وب سایت میتواند پیش مقدمهی ِ خوبی برای خواندن مطلب آموزشی ذیل باشد.
اغلب گرافیستهای وب از برنامه فتوشاپ استفاده میکنند. ما نیز این مطلب آموزشی که آماده سازی یک قالب psd وب بود را با برنامه فتوشاپ طراحی کردیم و در پایین مرحله به مرحله به شما مراحل کار را نشان خواهیم داد.
در این مقاله، در مرحله اول، به نحوه طراحی یک قالب وبسایت در فتوشاپ بصورت قدمبهقدم و در مرحله دوم، کدنویسی به زبان html , css برای قالب طراحی شده را بررسی میکنیم. بدیهیست مراحل تکراری پروژه جزء این مقاله نمیباشد و فقط به بیان تکنیکها و روشهای موجود میپردازیم. در پایان فایل پیاسدی قالب در اختیار کاربران قرار میگیرد. درصورت استفاده از همین قالب و ایجاد تغییرات جزئی، ذکر نام طراح قالب الزامیست.
روز اول : طراحی قالب وبسایت در فتوشاپ
همانطور که در عکس بالا میبینید، چهار مرحله پیش رو داریم.
مرحله اول: طراحی عکس پسزمینه
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
مرحله سوم: طراحی سرصفحه
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله اول: طراحی عکس پسزمینه
برای طراحی عکس پس زمینه به ۲ طرح (یک براش و یک پترن) احتیاج داریم که ابتدا به طراحی آنها میپردازیم.
طراحی پترن:
فتوشاپ را باز کنید و یک فایل جدید با طول و عرض ۳ پیکسل، بدون پس زمینه ایجاد کنید.
ابتدا تا آخر زوم کنید(Ctrl و +). با استفاده از ابزار “Pencil”، با رنگ سفید، روی سه نقطه مطابق شکل کلیک کنید. دقت داشته باشید رنگ انتخابی حتما سفید باشد. در اینجا برای مشخص شدن خط، از رنگ قرمز استفاده شده است.
مطابق عکس، از منوی “Edit”، روی گزینه “Define Pattern…” کلیک کنید.
در پنجره بازشده نامی را بدلخواه انتخاب کنید و روی “ok” کلیک کنید. با این کار فایل طراحی شده ما بصورت یک پترن ذخیره میشود و میتوانیم از آن در تنظیمات افکت روی لایه ها استفاده کنیم.
طراحی براش:
برای طراحی براش یا همان اشکال قلمو، میتوانید از روش فوق استفاده کنید. به این ترتیب که فایلی با اندازه دلخواه ایجاد کنید، سپس طرح خود را ایجاد کرده و در مرحله آخر در منوی ادیت به جای گزینه “Define Pattern…”، گزینه “Define Brush Preset…” را انتخاب کنید. در اینجا برای راحتی کار از براش های آماده استفاده می کنیم.
بسیار خوب، تا به اینجا ما مقدمات برای طراحی پسزمینه را آماده کردیم. حال فایل جدیدی را باز کنید. این فایل اصلی قالب هست و اندازه آن میتواند متغیر باشد. در اینجا اندازه فایل ما ۱۰۲۴*۸۱۱ هست.
لایه بکگراند را با کد رنگ ” ۱b1b1b” با استفاده از سطل رنگ پر کنید. سپس روی قسمت سمت راست لایه دوبار کلیک راست کرده تا پنجره “Layer Style” باز شود. تنظیمات افکت های این لایه را مطابق عکسهای زیر اعمال کنید.
همانطور که در عکسها میبینید، کد رنگهای استفاده شده مشخص شده و از پترن ساخته شده طبق دستورالعمل بالا، استفاده شده است.
لایه جدیدی ایجاد کنید. از این لایه برای نمایش براش ها استفاده میکنیم. با استفاده از براش های ارائه شده، با سلیقه خودتان و با رنگ دلخواه، اشکالی را مانند شکل زیر ایجاد کنید.
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۳d3d3d” پر کنید و افکتهای زیر را اعمال کنید.
مرحله اول تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله دوم: طراحی نوار کلید ها و کادر جستجو
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکتهای زیر را اعمال کنید.
در این مرحله میتوانید منوهای مورد نظر را با ابزار “Type Tool” مانند شکل زیر ایجاد کنید. اما این کار ضروری نیست؛ چون تمام متنها، منوها و فرم ها (جعبه جستجو) با استفاده از اچتیامال ایجاد میشوند و نیازی به ایجاد در فتوشاپ نیست!
مرحله دوم تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله سوم: طراحی سرصفحه
لایهی جدیدی ایجاد کنید و مطابق شکل مستطیلی رسم کنید و آنرا با رنگ “۰۰۰۰۰۰″ پر کنید و افکتهای زیر را اعمال کنید.
حال از لایه ایجاد شده یک کپی بگیرید. برای اینکار روی لایه راست کلیک کرده و گزینه “Duplicate Layer…” کلیک کنید. لایه جدید را مطابق شکل کوچک کنید. برای تغییر اندازه، از کلیدهای ترکیبی Ctrl + T استفاده کنید.
مطابق آنچه در قبل گفته شد، میتوانید عکس و متنها را در فتوشاپ ایجاد کنید، اما این کار لزومی ندارد و دلیل اضافه کردن آن در این مقاله، تشخیص مکانهای اجزای صفحه، برای کد نوشتن به زبان اچتیامال است. لوگوی سایت خود را طراحی کنید و در قسمت مشخص شده در عکس قرار دهید.
برای طراحی نوار “عضو شوید”، ابتدا با استفاده از ابزار “Pen Tool” شکلی را مطابق شکل زیر و با رنگ “deff00″ ایجاد کنید و افکت زیر را بر روی لایه اعمال کنید.
مرحله سوم تمام شد. به یاد داشته باشید که کار خود را به طور پیدرپی ذخیره کنید.
مرحله چهارم: طراحی قسمت تبلیغات و قسمت مطالب
مرحله چهارم را با استفاده از توضیحات قبلی میتوانید به طور کامل طراحی کنید، اما آنچه که در اینجا مهم است، نحوه چیدمان مطالب و تبلیغات است. برای مثال در عکس زیر همانطور که میبینید در ابتدای صفحه با توجه به قسمت تبلیغات صفحه ۳ ستونه است و در ادامه صفحه به فرم ۲ ستونه تغییر شکل میدهد.
لازم به ذکر است که طراحی این جداول در فتوشاپ فقط بمنظور معین کردن جاهای جداول جهت طراحی در زبان اچتیامال هست، لذا طراحی این جدولها در “روز دوم: کد نویسی به زبان اچتیامال برای قالب وبسایت” توضیح داده خواهد شد.
در این مقاله سعی شده تا با استفاده از ساده ترین راهها، برای طراحی یک قالب مطلوب استفاده شود. در ادامه این سری از مقالات با متدهای پیشرفتهتر و جذابتر آشنا خواهید شد که لازمه آن، مسلط بودن بر مباحث این مقاله هست.
قالب نهایی کار(PSD) (328 bytes, 851 hits)
بسیار کامل و مفید توضیح دادید
از شما تشکر می کنم….
امتیاز:
0 
0
متشکر
روز دوم کی خواهد بود!!؟
امتیاز:
0 
0
سلام، تهیه اینجور مقالات کمی وقت گیر هست. سعی می کنم در کمترین فرصت قسمت دوم رو آماده کنم. ممنون از نظرتون
امتیاز:
0 
0
با سلام
مطلب جالبی است خسته نباشید.
از خبرنامه کامپیوتر و وب در تورنتو کانادا هستیم. مطلب شما را در سایت http://www.PcWebPaper.com استفاده خواهیم کرد. جهت اطلاع و همکاری متقابل.
با تشکر
روابط عمومی
خبرنامه کامپیوتر و وب
امتیاز:
0 
0
سلام، لطفا اگر استفاده می کنید، نام منبع رو هم ذکر کنید. ممنون از نظرتون
امتیاز:
0 
0
نام پریانا با یه لینک به اصل مقاله رو گذاشتیم. میتونید به لینک زیر ببینید. خیلی ممنون
http://pcwebpaper.com/index.php?option=com_content&view=article&id=201:2009-12-21-00-48-10&catid=24:2009-11-02-18-11-03&Itemid=22
امتیاز:
0 
0
واقعا عالی بود. دست شما درد نکنه. منتظر دومین روز هستم.
امتیاز:
0 
0
سلام
آیا امکانش هست نحوه ی تبدیل قالب PSD به html رو هم آموزش بدید؟
متشکرم
امتیاز:
0 
0
سلام،
۲ نوع کلا میشه قالب طراحی شده psd رو به html تبدیل کرد. یکی با استفاده از ابزار Slice فتوشاپ هست که راحت ترین راه هست، اما بیشتر این روش برای سایت های شخصی، معرقی شرکت و از این قبیل سایت ها استفاده میشه . روش دوم که کمی سخت تر هست و ادامه این مقاله با این روش خواهد بود؛ اجزای قالب رو به عکس تبدیل می کنیم و مستقیما دستورات ایجاد جدول ها و فرم بندی کار رو با استفاده از کدنویسی html انجام می دهیم. ممنون از نظرتون
امتیاز:
0 
0
ممنون بابت توضیحتون.
اگر بتونید بجای جداول (table ها) از div استفاده کنید خیلی عالی میشه.
استفاده از جداول تقریبا منسوخ شده است و معایب آن مشخص است.
با تشکر از زحمات شما
امتیاز:
0 
0
سلام، حرف شما درسته و موافقم. اما این مقاله برای دوستانی هستش که اصلا طراحی وب کار نکردند و این شروع کارشون هست. طبیعتا هرچقدر سریعتر به یک قالب (نه خیلی خوب) معمولی برسند براشون جذاب تر خواهد بود. و گذشته از اون روال این سری از مقالات نکات طراحی و ترفندهای وب ۲ هست و بحث ما بصورت تخصصی روی زبان های تهیه سایت نیست. و قسمت دوم این مقاله صرفا برای آشنایی مختصر دوستان با html است.
در آینده احتمالا مقاله ای در مورد سایت های پویا با استفاده از زبان PHP تهیه کنم که توی اون سعی می کنم بیشتر به سمت استاندارد های موجود در وب ۲ بریم.ممنون از یادآوریتون
امتیاز:
0 
0
مرسی
ولی اصل همون روز دومه :دی
امتیاز:
0 
0
سلام…
ممنون بابت این مطلبتون…مخواستم ببینم میشه یکم عرض قالب رو بزرگتر کرد….؟؟
و اینکه میتونم برای وبلاگم این قالب رو بسازم یا فقط برای سایت هاست…؟
امتیاز:
0 
0
سلام،
بله میشه عرضش رو بزرگتر هم طراحی کرد بستگی به سلیقه و نیاز خودتون داره. روش و مراحل انجام کار برای وبلاگ هم به همین ترتیب هست اما، برای اکثر سیستم های وبلاک ایرانی نمی تونید از این روش طراحی ۳ ستونه استفاده کنید. ضمن اینکه برای طراحی قالب وبلاگ باید به راهنمای نوشتن قالب وبلاگتون مراجعه کنید و از تگ هایی که در اونجا معرفی شده استفاده کنید.
امتیاز:
0 
0
سلام دوست عزیز.
چه خوبه که این حرکت داره تو وب سایتهای ایرانی رواج پیدا میکنه و تجربه های عملی تری در اختیار مخاطبان قرار می گیره.
امتیاز:
0 
0
سلام
مطلب خیلی خوبی بود. البته نباید از نظر دور داشت که ابزار باید در کنار هنر استفاده کننده قرار بگیرد تا همچین اثر زیبایی خلق شود.
ممنونم و پیروز باشید
امتیاز:
0 
0
سلام.
خیلی مطلب مفیدیه
منتظر روز دوم هستم
امتیاز:
0 
0
[hجالب بود دستون درد نکنه، اگه ممکنه در مورد تنظیمات هدر هم توضیح بدید ممنون میشم.
امتیاز:
0 
0
ففوق العاده بود!
فقط اگه بگید چه جوری کی شه یه عکسی رو اضافه کرد?!
یعنی همون Insert کرد؟چون تو برنامه های مختلف کار خیلی آسونیه . مثلا توی آفیس می شه عکسو کپی و بعد توی جایی که داری کار می کنی پیست کرد… یا اصلا گزینه ی insert picture داره….
ولی توفتوشاپ هر کاری کنی یه فایل جدید باز میکنه!
بسیار ممنون
امتیاز:
0 
0
اگه منظورتون رو درست فهمیده باشم جوابش اینه: وقتی عکستون رو با فتوشاپ باز کردید و توی یک فایل دیگه باز شد با موس بکشید و بندازیدش توی جایی که میخواید مثلا فایل همین طرح. یا همه عکس رو با Ctrl + a انتخاب کنید بعد کپی کنید (Ctrl+c) و بعد توی هر فایلی که میخواید پیست کنید (Ctrl+v)
امتیاز:
0 
0
خیلی ممنون، عالی بود
مدتها بود که به دنبال همچین سایتی می گشتم که مطالب درآن به خوبی وبه طور کامل توضیح داده شود.
امتیاز:
0 
0
سلام…
شرمنده که یادم رفت از راهنماییتون تشکر کنم…
من پریانا رو homepage خودم کردمتا اگه شما مطلب جدیدی دادین برم بخونم،اما مثل اینکه ما دبیرستانی ها سرمون خلوت تر از شماست!
می خواستم یه زحمت دیگه بهتون بدم،اگه می شه وبسایت خودتونو یا وبسایتی که آموزش طراحی به زبون شیوا و روان (مثل آوزش های خودتون) رو داره و شما میشناسین رو به من معرفی کنین….
فجیحا منتظر جوابتون هستم!
راستی اگه نشد اینجا اعلام کنین) اینم از ایمیلم s.shaigan@yahoo.com
امتیاز:
0 
0
سلام.
اول مرسی.. بعد اینکه کدهای html پس چی؟ من پیداشون نکردم؟
امتیاز:
0 
0
سلام
قسمت دوم هنوز تکمیل نشده زمانی که انتشار پیدا کرد لینک قسمت دوم هم اضافه میشه. ممنون از توجهتون
امتیاز:
0 
0
سلام
لطفا بگید چه جوری می تونم این قالب رو توی وبلاگم قرار بدم.
تشکر
امتیاز:
0 
0
ببخشید یک سوال دیگه هم داشتم چه جوری شما این همه متن رو توی یک پست قرار دادید من توی وبلاگم بیشتر از ۶۰کیلو بایت نمی تونم قرار بدم.
بازم سوال:من تو صفحه ی جدیدی که توی وبلاگم ایجاد میکنم چه جوری می تونم یک پست توی اون صفحه ی جدید قرار بدم لطفا توضیح بدید.
لطفا جواب را به ایمیلم بفرستیت من با دیال آپ به اینترنت کانکت می شوم وچون سایت شما دیر لود می شود نمی توانم این سایت را باز کنم.
خیلی ممنون.
امتیاز:
0 
0
سلام قبلا هم گفتم برای استفاده در وبلاگ باید متناسب با کدهای استاندارد سرویس دهنده وبلاگتون طراحی رو شروع کنید.
اگر از سرویس های وبلاگ ایرانی مثل میهن بلاگ، بلاگفا و … استفاده می کنید تقریبا نشدنی هست و طراحی به این صورت خیلی دردسر دارد. اما اگر از سیستمی مثل وردپرس استفاده می کنید این کار رو با خواندن چندید مقاله طراحی قالب برای وردپرس به راحتی می تونید انجام بدید که توضیح آن در اینجا نمی گنجد.
ایمیلی هم ندیدم که برای اون پاسخ رو ارسال کنم.
امتیاز:
0 
0
آموزش خوبی بود
امتیاز:
0 
0
آقا جون واقعا دستت درد نکنه اینو طراحی کردم
منتظر روز دوم هستم
امتیاز:
0 
0
سلام
خیلی خوب بود ولی آیا این منو ها و ابزاری که گفتید توی همه ورژن های فتوشاپ به یک شکل هست یا نه؟
چون من با فتوشاپ ۱۰کار میکنم و خیلی از این منوهایی که شما گفته بودید روشن نبود و اصلا نتونستم بعضی قسمتهاش رو انجام بدم اگه ممکنه من رو راهنمایی کنید .
متشکرم
امتیاز:
0 
0
بابا ایول هنوز روز ۲ نشده؟
من فکر کنم منزورت ماه ۲ بود
:)
امتیاز:
0 
0
دستت درد نکنه
اگه کاملش رو برام بفرستس ممنون میشم.
خیلی وقت بود دنبالش بودم!!!
مرسی
امتیاز:
0 
0
یا هم ممنون میشم هر وقتم کا لش کردی بهم اطلاع بدی میام
امتیاز:
0 
0
با سلام دوست گرانقدر
احترامآ به استحضار میرسانم این گروه نیاز به یک قالب سایت و یک قالب وبلاگ دارد لذا در صورت آمادگی قالب ها بصورت بسیار فوری منتظر ارتباط شما هستم .
با سپاس
طباطبائی
۰۹۱۲۵۲۷۱۵۵۳
۰۹۳۵۴۱۱۵۵۵۴
امتیاز:
0 
0
عالیه عالیه عالیه
امتیاز:
0 
0
بسیار عالی بود
شدیدا دنبال همچین چیزی می گشتم،
یه سوال:
سایزی که برای طول و عرض قالب اینجا در نظر می گیریم می تونیم وقتی روی وب سایتمون اعمال کردیم اونجا تغییر بدیم و سوال دومم اینکه برای جوملا هم میشه به همین ترتیب قالب طراحی کرد؟
امتیاز:
0 
0
سلام اگه میشه راهنمایی کنید این اسلایس کجاست؟ فقط لطفت یا ایمیل کنید. یا در نظرات وبلاگم بنویسید.
امتیاز:
0 
0