قدیمیترها که از ما سوال میکردند میخواهی چکاره شوی؟ میگفتیم پزشک یا خلبان و از این دست؛ امروزه روز اگر از کودکی سوال کنی که میخواهی چکاره شوی، در میان جوابهایش اگر شنیدید که گفت “طراح وب سایت” تعجب نکنید!
برای طراحی یک وب سایت باید در وهله اول دچار کمی خلاقیت و ذوق هنری باشید اما اگر ندارید و در عوض به جایش خیلی علاقه دارید، جای نگرانی نیست چون با کمی ممارست و تمرین و مطالعه، شاخصههای لازم برای درک طراحی وب سایت را کسب میکنید.
در بخش اول میبایست وب سایت شما از جهت شکل و ظاهر بسته به نوع محتوایی آن طراحی گرافیکی شود. ابتدا ساختار اصلی آن را بر روی کاغذ ترسیم کنید تا یک شمای کلی از طرح در دست داشته باشید. این مطلب وب سایت 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, 4,403 hits)
بسیار کامل و مفید توضیح دادید
از شما تشکر می کنم….
متشکر
روز دوم کی خواهد بود!!؟
سلام، تهیه اینجور مقالات کمی وقت گیر هست. سعی می کنم در کمترین فرصت قسمت دوم رو آماده کنم. ممنون از نظرتون
واقعا حق با شماست. تهیه ی اینطور مطالب زحمت و همت می خواد. دست مریضاد
با سلام
مطلب جالبی است خسته نباشید.
از خبرنامه کامپیوتر و وب در تورنتو کانادا هستیم. مطلب شما را در سایت http://www.PcWebPaper.com استفاده خواهیم کرد. جهت اطلاع و همکاری متقابل.
با تشکر
روابط عمومی
خبرنامه کامپیوتر و وب
سلام، لطفا اگر استفاده می کنید، نام منبع رو هم ذکر کنید. ممنون از نظرتون
نام پریانا با یه لینک به اصل مقاله رو گذاشتیم. میتونید به لینک زیر ببینید. خیلی ممنون
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
واقعا عالی بود. دست شما درد نکنه. منتظر دومین روز هستم.
سلام
آیا امکانش هست نحوه ی تبدیل قالب PSD به html رو هم آموزش بدید؟
متشکرم
سلام،
۲ نوع کلا میشه قالب طراحی شده psd رو به html تبدیل کرد. یکی با استفاده از ابزار Slice فتوشاپ هست که راحت ترین راه هست، اما بیشتر این روش برای سایت های شخصی، معرقی شرکت و از این قبیل سایت ها استفاده میشه . روش دوم که کمی سخت تر هست و ادامه این مقاله با این روش خواهد بود؛ اجزای قالب رو به عکس تبدیل می کنیم و مستقیما دستورات ایجاد جدول ها و فرم بندی کار رو با استفاده از کدنویسی html انجام می دهیم. ممنون از نظرتون
ممنون بابت توضیحتون.
اگر بتونید بجای جداول (table ها) از div استفاده کنید خیلی عالی میشه.
استفاده از جداول تقریبا منسوخ شده است و معایب آن مشخص است.
با تشکر از زحمات شما
سلام، حرف شما درسته و موافقم. اما این مقاله برای دوستانی هستش که اصلا طراحی وب کار نکردند و این شروع کارشون هست. طبیعتا هرچقدر سریعتر به یک قالب (نه خیلی خوب) معمولی برسند براشون جذاب تر خواهد بود. و گذشته از اون روال این سری از مقالات نکات طراحی و ترفندهای وب ۲ هست و بحث ما بصورت تخصصی روی زبان های تهیه سایت نیست. و قسمت دوم این مقاله صرفا برای آشنایی مختصر دوستان با html است.
در آینده احتمالا مقاله ای در مورد سایت های پویا با استفاده از زبان PHP تهیه کنم که توی اون سعی می کنم بیشتر به سمت استاندارد های موجود در وب ۲ بریم.ممنون از یادآوریتون
مرسی
ولی اصل همون روز دومه :دی
سلام…
ممنون بابت این مطلبتون…مخواستم ببینم میشه یکم عرض قالب رو بزرگتر کرد….؟؟
و اینکه میتونم برای وبلاگم این قالب رو بسازم یا فقط برای سایت هاست…؟
سلام،
بله میشه عرضش رو بزرگتر هم طراحی کرد بستگی به سلیقه و نیاز خودتون داره. روش و مراحل انجام کار برای وبلاگ هم به همین ترتیب هست اما، برای اکثر سیستم های وبلاک ایرانی نمی تونید از این روش طراحی ۳ ستونه استفاده کنید. ضمن اینکه برای طراحی قالب وبلاگ باید به راهنمای نوشتن قالب وبلاگتون مراجعه کنید و از تگ هایی که در اونجا معرفی شده استفاده کنید.
سلام دوست عزیز.
چه خوبه که این حرکت داره تو وب سایتهای ایرانی رواج پیدا میکنه و تجربه های عملی تری در اختیار مخاطبان قرار می گیره.
سلام
مطلب خیلی خوبی بود. البته نباید از نظر دور داشت که ابزار باید در کنار هنر استفاده کننده قرار بگیرد تا همچین اثر زیبایی خلق شود.
ممنونم و پیروز باشید
سلام.
خیلی مطلب مفیدیه
منتظر روز دوم هستم
[hجالب بود دستون درد نکنه، اگه ممکنه در مورد تنظیمات هدر هم توضیح بدید ممنون میشم.
ففوق العاده بود!
فقط اگه بگید چه جوری کی شه یه عکسی رو اضافه کرد?!
یعنی همون Insert کرد؟چون تو برنامه های مختلف کار خیلی آسونیه . مثلا توی آفیس می شه عکسو کپی و بعد توی جایی که داری کار می کنی پیست کرد… یا اصلا گزینه ی insert picture داره….
ولی توفتوشاپ هر کاری کنی یه فایل جدید باز میکنه!
بسیار ممنون
اگه منظورتون رو درست فهمیده باشم جوابش اینه: وقتی عکستون رو با فتوشاپ باز کردید و توی یک فایل دیگه باز شد با موس بکشید و بندازیدش توی جایی که میخواید مثلا فایل همین طرح. یا همه عکس رو با Ctrl + a انتخاب کنید بعد کپی کنید (Ctrl+c) و بعد توی هر فایلی که میخواید پیست کنید (Ctrl+v)
خیلی ممنون، عالی بود
مدتها بود که به دنبال همچین سایتی می گشتم که مطالب درآن به خوبی وبه طور کامل توضیح داده شود.
سلام…
شرمنده که یادم رفت از راهنماییتون تشکر کنم…
من پریانا رو homepage خودم کردمتا اگه شما مطلب جدیدی دادین برم بخونم،اما مثل اینکه ما دبیرستانی ها سرمون خلوت تر از شماست!
می خواستم یه زحمت دیگه بهتون بدم،اگه می شه وبسایت خودتونو یا وبسایتی که آموزش طراحی به زبون شیوا و روان (مثل آوزش های خودتون) رو داره و شما میشناسین رو به من معرفی کنین….
فجیحا منتظر جوابتون هستم!
راستی اگه نشد اینجا اعلام کنین) اینم از ایمیلم s.shaigan@yahoo.com
سلام.
اول مرسی.. بعد اینکه کدهای html پس چی؟ من پیداشون نکردم؟
سلام
قسمت دوم هنوز تکمیل نشده زمانی که انتشار پیدا کرد لینک قسمت دوم هم اضافه میشه. ممنون از توجهتون
سلام
لطفا بگید چه جوری می تونم این قالب رو توی وبلاگم قرار بدم.
تشکر
ببخشید یک سوال دیگه هم داشتم چه جوری شما این همه متن رو توی یک پست قرار دادید من توی وبلاگم بیشتر از ۶۰کیلو بایت نمی تونم قرار بدم.
بازم سوال:من تو صفحه ی جدیدی که توی وبلاگم ایجاد میکنم چه جوری می تونم یک پست توی اون صفحه ی جدید قرار بدم لطفا توضیح بدید.
لطفا جواب را به ایمیلم بفرستیت من با دیال آپ به اینترنت کانکت می شوم وچون سایت شما دیر لود می شود نمی توانم این سایت را باز کنم.
خیلی ممنون.
سلام قبلا هم گفتم برای استفاده در وبلاگ باید متناسب با کدهای استاندارد سرویس دهنده وبلاگتون طراحی رو شروع کنید.
اگر از سرویس های وبلاگ ایرانی مثل میهن بلاگ، بلاگفا و … استفاده می کنید تقریبا نشدنی هست و طراحی به این صورت خیلی دردسر دارد. اما اگر از سیستمی مثل وردپرس استفاده می کنید این کار رو با خواندن چندید مقاله طراحی قالب برای وردپرس به راحتی می تونید انجام بدید که توضیح آن در اینجا نمی گنجد.
ایمیلی هم ندیدم که برای اون پاسخ رو ارسال کنم.
آموزش خوبی بود
آقا جون واقعا دستت درد نکنه اینو طراحی کردم
منتظر روز دوم هستم
سلام
خیلی خوب بود ولی آیا این منو ها و ابزاری که گفتید توی همه ورژن های فتوشاپ به یک شکل هست یا نه؟
چون من با فتوشاپ ۱۰کار میکنم و خیلی از این منوهایی که شما گفته بودید روشن نبود و اصلا نتونستم بعضی قسمتهاش رو انجام بدم اگه ممکنه من رو راهنمایی کنید .
متشکرم
بابا ایول هنوز روز ۲ نشده؟
من فکر کنم منزورت ماه ۲ بود
:)
دستت درد نکنه
اگه کاملش رو برام بفرستس ممنون میشم.
خیلی وقت بود دنبالش بودم!!!
مرسی
یا هم ممنون میشم هر وقتم کا لش کردی بهم اطلاع بدی میام
با سلام دوست گرانقدر
احترامآ به استحضار میرسانم این گروه نیاز به یک قالب سایت و یک قالب وبلاگ دارد لذا در صورت آمادگی قالب ها بصورت بسیار فوری منتظر ارتباط شما هستم .
با سپاس
طباطبائی
۰۹۱۲۵۲۷۱۵۵۳
۰۹۳۵۴۱۱۵۵۵۴
عالیه عالیه عالیه
خیلی استفاده کردم
ممنون
عالی بود
بسیار عالی بود
شدیدا دنبال همچین چیزی می گشتم،
یه سوال:
سایزی که برای طول و عرض قالب اینجا در نظر می گیریم می تونیم وقتی روی وب سایتمون اعمال کردیم اونجا تغییر بدیم و سوال دومم اینکه برای جوملا هم میشه به همین ترتیب قالب طراحی کرد؟
سلام اگه میشه راهنمایی کنید این اسلایس کجاست؟ فقط لطفت یا ایمیل کنید. یا در نظرات وبلاگم بنویسید.
سلام احمد اقا دیگخ محل ما نمیزاری بی معرفت (جلیل بودم)
سلام با عرض خسته نباشید
خواستم به عرض برسونم که در برنامه فتوشاپ من گزینه های define pattern & define brush فعال نیستند لطفا راهنمایی کنید
سلام بسیار عالی بود اما یکسال گذشت و خبری از قسمت دوم نشد.!!!!!!!!!!!!!!!!!!!!
سلام
ممنون میشم مطالب اموزش که قرار می دهید فایل PDF هم برای دانلود قرار بدهید
با تشکر
سلام.
داداش میشه ب من سایت یا برنامه ای رو معرفی کنی که بتونم کاتالوگ و بروشور گردشگری برای اژانس های هواپیمایی طراحی کنم خواهش میکنم کمکم کن چون واقعا بش نیاز دارم ممنون.
خدا نگهدار….
فوق العاده بود.بسیار ممنون.این مطلب رو تو لینک دونی گذاشتم
سلام خیلی ممنون لطفاً اگه امکان داره برام ایمیل کنید
سلام
یه خواهش دارم
میشه قسمت دوم این آموزش رو بعد از مدتها بذارین
یا شاید هم گذاشتین و من نمیبینم
خولهش میکنم که عجله کنین
سلام . اگر این آموزش دومی داره یعنی ادامه داره لطفا ادامه بدید که بدجوری در انتظارش هستیم و اگه نداره بگید تا بدجوری در انتظارش نمونیم .
az babat matlab mrc fogholade bod.montazere ghesmate 2 hastam
مرسی – وقتی که این قالبو ساختم چگونه میتونم براش هاست و www , nhldk, hdk این جور چیزا بدم در ضمن من ایا امکان گذاشتن اهنگ به قالب میشه لطفا پاسخ بدین خیلی ممنون میشم
لطفاً بگید چطوری می شه در سایت عضو گیری کنم.خوااااااااااااااااااااااااهش…..تو رو خداااااااااااااا!
خیلی عالیه . واقعا دستتون درد نکنه .اگه (ممکنه) این مطلب رو به ایمیل من هم بفرستید خیلی عالی میشه
در مورد قسمت دوم باید گفت:یوسف گمگشده باز اید به کنعان غم مخور!
عالی بود مررسسسسسسسسسسسسی:)
به به خوشبخت شی ننه
سلام دوست عزیز ممنون
واقعا عالی بود
فقط نمیدونم چرا براش های من سیاه سفید هستند
ممنون میشم کمکم کنید
اگه قسمت دوم هم بزارید عالی میشه
به درد کافی نمی خورد
ماله من خیلی خوب شد فقط اگه میشه زودتر این روز دوم رو بزارین خیلی خیلی ممنون
ممنون بسیار جالب بود دستتون درد نکنه/
خیلی خیلی ممنون
سلام.دمت گرم موفق باشی
زحمت کشیدی خیلی استفاده کردم ممنون در مورد header هم بیزحمت توضیح بدین
سلام مرسی از آموزش خوبتون. حالا چه جوری روی سایت بذاریمش؟
سلام و ممنون
من دنبال همچین آموزشهایی بصورت تصویری میگردم سراغ ندارید؟
برای خرید یا دانلود فرقی نمیکنه
زبانش هم فرقی نمیکنه (البته فارسی یا انگلیسی)
مطلب خوبه ولی عکس ها لود نمیشه
خیلی ممنون از آموزش خوبتون
پس قسمت های دیگه ی این آموزش کو کی آماده میشه ؟
ممنون از آموزشتون . از بزرگترین لذتهای دنیا یاد دادن و یاد گرفتنه .
بسیار عالی بود تشکر مخصوص من تازه وارد این جریان شدم
می خواستم توانایی درست کردن پوسته دلخواه را پیدا کنم که این مورد کمک زیادی کرد
خیلییییییییییییییییی ممنون عالی بود
سلام دوست عزیز من یه قالب طراحی کردم و لینک گذاری کردم حتی کد اون هم بدست اوردم ولی نمیدونم چجوری این قالب رو بیارم تو اینترنت میشه کمکم کنید
سلام
آغا دستت درد نکنه مطلب خوبی بود
به امید روزی که کامل شود؟!
سلام دوست عزیز
بخش دوم این آموزش کی حاضر می شه؟؟
من مشتاقانه منتظرم.
دوست عزیز می شه بگی slice چی هست و بگی که چطوری می شه با اون قالب psdرو به htmlتبدیل کنی
سلام و خسته نباشید
ببخشید باید اندازه صفحه ای که توی فتوشاپ باز میکنم چقدر باشه ؟؟؟؟
دست مریزادکارتون بیسته