طراحی قالب سایت در فتوشاپ # ۲
در تاریخ ۱۷ آذر ۱۳۸۷ توسط کامران 6,765 بازدید.
امروز با توجه با درخواستها و تعداد گزینه های جستجو شده در موتورهای جستجو تصمیم گرفتم که نحوه ساختن قالب سایت در فتوشاپ و در صورتیکه استقبال خوبی بشه و در مرحله بعدش نحوه Convert کردن یک فایل psd به html رو توضیح بدم. در صورتیکه این مطلب براتون جالبه حتما در قسمت نظرات این مطلب و اعلام کنید تا اون خودآموز رو هم بنویسم .
( میتوانید نتیجه نهایی کار را در اینجا مشاهده نمایید )
برای شروع کار فایلی جدید با ابعاد ۸۰۰*۸۰۰ و رزولویشن ۷۲ پیکسل در فتوشاپ باز کنید و رنگ پس زمینه را سفید معین کنید. ابزار Rectangle Tool را انتخاب کنید و مانند شکل زیر مستطیلی در بالای صفحه بکشید و بعد از آن افکتهای زیر را به لایه آن بدهید و نام این لایه را top بگذارید :
بازهم توسط ابزار Rectangle لایه دیگری دقیقا مماس با همین لایه و کمی عریضتر در زیر آن بکشد و افکتهای مشابه اشکال زیر را به آن اعمال کنید و نام این لایه را header بگذارید. نتیجه کار شما باید مشابه شکل زیری شود :
از این لایه Duplicate بگیرید، نام آنرا footer بگذارید و آنرا به پایین صفحه منتقل کنید :
توسط رنگ ۸۸۷۶۳d# و ابزار Type Tool منوی Navigation خود را مشابه شکل زیر بنویسید. همچنین توسط رنگ سفید و بر روی لایه header نام سایت sLogon را بنویسید :
مشاهده میکنید که نام سایت را در قسمت سمت راست header نوشتیم و الان متوجه دلیل این کار خواهید شد. ابزار Rounded Rectangle Tool را انتخاب کنید و مشابه شکل زیر لایه ای رسم کنید و opacity این لایه را مساوی ۶۰% قرار دهیدو افکتهای زیر را بر روی آن اعمال نمایید :
اکنون مشابه شکل زیر در قسمت بالایی لایه ایجاد شده و توسط آیکونهای دلخواه ۳ ShortCut برای Home,Rss و Contact ایجاد کنید :
همچنین در قسمت میانی این لایه عکسی به دلخواه و البته متناسب با رنگهای استفاده شده وارد کنید و Opacity آنرا ۹۰% تعیین نمایید :
قسمت پایینی این لایه برای کادر ورود “Login” در نظر گرفته شده است، مشابه شکل زیر و به دلخواه کادر ورود و اجزا مورد نیاز یک کادر ورود را وارد نمایید. (البته دقت نمایید که در یک سایت این قسمت میتواند توسط CSSپیاده سازی شود)
اکنون قسمت محتوی یا “Content” را به ۳ قسمت تقسیم میکنیم :
برای قسمتهای ایجاد شده متنها و مثالهایی وارد نمایید و در پایین هر قسمت Button هایی توسط ابزار Rectangle Tool ایجاد نمایید و رنگ آنهارا برای همخوانی با رنگهای موجود مشابه رنگهایی که برای Buttonهای کادر Login در نظر گرفتیم (مانند Read More, . . .) تعبه نمایید و افکتهایی مانند شکلهای زیر با آنها بدهید تا طرح ما خالی نباشد :
در آخرین قسمت به طرح فوق و در قسمت footer موارد لازم مانند Copy Right و Quick Link های مهم را وارد نمایید.
طرح نهایی شما باید مشابه شکل زیر شده باشد :
برای مشاهده عکس بزرگتر بر روی آن کلیک نمایید .
نکته مهم : تمیز کار کردن برای هر طراحی از اصول کار محسوب میشه و شما باید قسمتهای مختلف را توسط Folder بندی در قسمت لایه ها از هم جدا کنید و برای لایه های کلیدی “نام” در نظر بگیرید تا در مراجعات بعدی کار کردن با فایل مربوطه آسان شود . میتوانید از اینجا فایل نهایی و PSD طرح را دانلود نمایید :
همچنین در این رابطه بخوانید :
طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب)



































۴۳ نظر
سجاد
۱۸ آذر ۱۳۸۷
عالی و کامل بود، اگه ممکن اون خودآموز رو هم بنویس.
علی
۱۹ آذر ۱۳۸۷
آقا اگه نحوه کانورت PSD به html را هم بگی دیگه نور علی نوره.
سپیده
۱۹ آذر ۱۳۸۷
سلام
ممنون خیلی مفید بود
babak
۳۰ آذر ۱۳۸۷
آیا بجز pad راهی برای اسلایس چندین تصویر به یکباره وجود دارد؟
سعید
۳۰ آذر ۱۳۸۷
سلام
خیلی خوب بود. لطفاً چگونگی تبدیل PSD به HTML را نیز توضیح دهید.
محمد علی
۰۱ دی ۱۳۸۷
سلام مرسی خیلی عالی بود اگه امکان داره نحوه کانورت هم توضیح بده لطفا.
Hassan
۰۱ دی ۱۳۸۷
خیلی ممنون و خسته نباشید
رایان گراف
۲۷ دی ۱۳۸۷
سلام دوست عزیز و گرامی
واقعا خوشحالم از اینکه در اینجا محیطی فراهم آوردی تا دوستانی که علاقمند هستند جمع شوند و به مطالب مورد نیازشان برسند.
من حدود ۶ سالی هست که فتوشاپ کار میکنم و عاشق این برنامم.۰البته به صورت تجربی!)و کم کم علاقمند به طراحی سایت شدم خیلی تلاش کردم تا بدونم از کجا باید شروع کنم.خلاصه اینکه بعد ۲ سالی تازه دستم اومد که راه اندازی سایت شامل چه مراحلی هست.بعد هم با فرانت پیج شروع کردم و … و از اونجا که میتونم با فتوشاپ قالب طراحی کنم.فقط مشکل من این بود که نمی دونستم چطور اونو باید در فرانت پیج وارد کنم و لینک گذاری و بقیه کارا رو روش انجام بدم …که اونم فهمیدم باید اسلایس بندی و برش داده بشه و بعد بصورت save for web ذخیره بشه.من اینکاروکردم.”"”ولی مشکلی که دارم اینه که نمی دونم تو فرانت پیج چطور باید مطالب نوشتاریمو وارد کنم در جایی که قبلا تو فتوشاپ طراحی کردم و برش خورده؟؟؟”"”
چون در فرانت پیج رو قسمت مورد نظر کلیک میکنم بصورت عکس هستش و قابلیت اینو نداره که بتونم نوشنه هامو وارد کنم…(کمظورم همون قسمت content bar هستش.
حالا اگه شما بتونید به من کمک کنید واقعا لطف بزرگی در حق بنده کردید.
کامران
۲۷ دی ۱۳۸۷
سلام به شما
این سئوالی که شما پرسیدید رو من نمیتونم تو چند خط جواب بدم و هم اکنون در حال تهیه خودآموز سایت قدم به قدم از طراحی قالب سایت در فتوشاپ تا تبدیل فایل psd به html هستم و مطمئنم که جواب اکثر سئوالاتتون رو در اونجا خواهید گرفت
پس منتظر بمانید تا اون پست آماده بشه
رایان گرافیک
۲۷ دی ۱۳۸۷
با سلام
ممنونم اینقده زود جواب پیاممو دادی.
این نشونه اهمیت شما به بازدید کننده ها از سایتتون هستش.
انشاالله زودتر آماده شه و همه استفاده کنند.
من فقط مشکلم اینه که برا وارد کردن نوشته هام …
ولی صبر می کنم تا آماده شه.میتونید از طریق ایمیلم خبرم کنید ؟
راستی راجب MMB ،چون فکر کردم جای این برنامه فقط تو سایت شما کمه!
به همین خاطر پیشنهاد دادم …
احتمال زیاد همه استقلبال خواهند کرد.
اگه کاری در زمینه طراحی داشتید رو شاگرد خودتون۰رایان گراف) میتونید حساب کنید …
سعید
۳۰ دی ۱۳۸۷
بیصبرانه منتظر آموزش بعدی این سری هستم
DaRiOuShJh
۱۶ بهمن ۱۳۸۷
مرسی
خیلی جالب بود
تریتی
۲۴ بهمن ۱۳۸۷
آقای کامران امشب کلی مطلب از وب شما دانلود کردم وقتی می گم این سایت با همه ی سایت هایی که تا به حال دیدم فرق می کنه مامانم خیلی خوشحال می شه چون من خیلی خوشحال هستم امیدوارم شما هم همیشه خوشحال باشید.
امیر
۱۲ اسفند ۱۳۸۷
چی شد پس این کانورتش به HTML ؟
ما بی صبرانه منتظریم
کامران
۱۲ اسفند ۱۳۸۷
من خیلی شرمنده ام
خیلی خودآموز طولانی ولی به محض اینکه سرم خلوت بشه ادامشو مینویسم(نصفشو نوشتم)
دیگه آخر سال و سر همه حسابی شلوغ
محمود
۱۹ فروردین ۱۳۸۸
سلام
مطالب خیلی خوبی دارید.
فقط یک سیستم عضو گیری کم داره!!
مهرداد
۰۶ اردیبهشت ۱۳۸۸
سلام دوست عزیز اولین باره که به سایت شما سر می زنم ولی جواب خیلی از سوالهامو اینجا پیدا کردم راستش من php و asp رو بادم ولی در مورد ظاهر سایت همیشه مشکل دارم خیلی از نرم افزار ها رو امتحان کردم ولی چیزی که می خواستم نشد ولی با فتوشاپ دستم بازتر می شه امیدوارم اموزش کامل convertرو هم بزاری
کامران
۰۷ اردیبهشت ۱۳۸۸
مهرداد جان ما دارین رو این آموزش کار میکنیم و قسمت اون تحت نام :
طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب در فتوشاپ)
در صفحه ابتدایی سایت آمادست که میتونی ازش استفاده بکنی.
عادل نسب الحسینی
۱۴ خرداد ۱۳۸۸
مطالب بسیار عالی و به زبان ساده نوشته شده اند که بنده مدتها بود به دنبال آن بودم
واقعا جای تشکر دارد
دستتون درد نکنه
Robin
۱۴ تیر ۱۳۸۸
با سلام و خسته نباشید.
من تازه عضو این سایت شدم و حقیقتا دنبال طراحی صفحات وب هستم ناگفته نماند که در این زمینه هم اصلا تجربه کاری ندارم و حتی از فتوشاپ هم خیلی کم می دانم. به نظر شما می توانم با همین اطلاعات کم برای یادگیری طراحی صفحات وب از همینجا شروع کنم. در ضمن مطالبی را هم که خواندم تقریبا هشتاد درصد آن را فهمیدم.
با تشکر
شیما
۰۲ مرداد ۱۳۸۸
دوست من می تونی به من بگی این جستجو رو چه جور فعال کردی در سایتت…من با فرونت پیج کار می کنم و هنوز در گذاشتن جستجو در سایت مشکل دارم….مطلبتم عالی بود…
علی
۳۱ مرداد ۱۳۸۸
خیلی خوبه حتما ادامه بده . مرسی
امین
۱۳ شهریور ۱۳۸۸
بسیار عالی بود
ممنون
اصغر
۱۰ مهر ۱۳۸۸
با تشکر از زحمات شما
مسعود
۰۲ آبان ۱۳۸۸
واقعا خوشم از سایت و این مطلب اومد
اگه میشه یا اون خود آموز را بنویس یا برام ایمیل کن
lordpageon@yahoo.com
تشکر فراوان
بهاره
۱۸ آبان ۱۳۸۸
با سلام و تشکر
ممنوم می شم اگه بگید چطور textbox هایی که در بالا طراحی شده را میتوان در صفحه وبی که با asp.net2 ساخته میشود فعال نمود؟
و چطور می شه button ای که image هست را البته بدون استفاده از Imagebutton فعال کرد در asp.net2.
امید
۲۹ آبان ۱۳۸۸
فوق العاده ای!؟!؟!؟!؟!؟!!!!!
SHEYDA
۰۳ دی ۱۳۸۸
ممنون از کار زیبا و عالیتون.
بهار
۲۲ دی ۱۳۸۸
با سلام و خسته نباشید
من یک سوال داشتم که ممنون ویشم راهنماییم کنین..
نمیدونم چرا با فتوشاپ که کار میکنم فقط یک لایه دارم یعنی back ground.. و هرکه rectangel رسم میکنم بازم یک لایه بیشتر ندارم
مصلح
۰۲ اسفند ۱۳۸۸
بسیییار عالی احسنت دنیا رو دنبال این آموزش گشتم پیدا نکردم
اگه برات ممکنه نحوه تبدیل به html اش رو هم بذار که دعا میکنم
که دست به ریگ بیابون بزنی طلا بشه
نام (لازم)
۲۳ اسفند ۱۳۸۸
با سلام
لطفا چند کتاب برای آموزش طراحی وب سایت معرفی کنید. در ضمن برنامه های معروف در این زمینه را هم معرفی کنید.
با تشکر
حورا
۱۴ اردیبهشت ۱۳۸۹
با سلام و تشکر از سایت خوبتون
من اگه بخوام یه قالب برای وبلاگ طراحی کنم هم از این روش می تونم ؟
کامران
۱۴ اردیبهشت ۱۳۸۹
طراحی قالب در فتوشاپ یک مسئله است کد دهی آن بر اساس سیستم وبلاگت یک مسئله دیگر. اما مرحله اول رو با همین روش میتونید انجام بدهید اما برای مرحله دوم باید کد دهی بلد باشید و با سیستم وبلاگت هم آشنا باشی
حورا
۱۴ اردیبهشت ۱۳۸۹
ممنون که اینقدر سریع جواب دادین !
حالا شما تو سایتتون یه همچین آموزشی برای کد دهی دارین ؟
و یه چیز دیگه منظورتون از سیستم وبلاگ چیه ؟
باز هم خیلی خیلی از سایت خوب و مدیریت عالی تون ازتون تشکر می کنم .
کامران
۱۴ اردیبهشت ۱۳۸۹
ما کدهی بصورت کلی رو آموزش دادیم، اما برای یک سرویس خاص مثل پرشین بلاگ رو نه
حورا
۱۵ اردیبهشت ۱۳۸۹
از کجا می تونم یه آموزشی چیزی واسه پرشین بلاگ گیر بیارم ؟
یا اینکه اصلا چه فرقی می کنن با هم ؟
نادر
۱۱ خرداد ۱۳۸۹
سلام کارتون حرف نداشت و کمک زیادی به من کردین .
واقعا ازتون ممنونم و امیدوارم تو کارتون بیش از پیش موفق باشین .
نادر.
نیلوفر
۱۵ مرداد ۱۳۸۹
ممنون ، جالب بود
موفق باشید
احسان
۱۷ مرداد ۱۳۸۹
سلام
قسمت دیگه آموزش که قولشو دادید آماده نشد؟
lنگار
۰۴ شهریور ۱۳۸۹
عالی/.ممنون مامنتظر یادگیری اچ تی ام ال کردن فایل پی اس دی مون هستیم.
کامران
۰۴ شهریور ۱۳۸۹
نگر جان ۲ ۳ تا آموزش در این زمینه تو سایت وجود داره . برو تو بخش طراحی وب سایت میبینیشون
نگار
۰۴ شهریور ۱۳۸۹
عالی/.ممنون مامنتظر یادگیری اچ تی ام ال کردن فایل پی اس دی مون هستیم.
TATAR
۱۰ شهریور ۱۳۸۹
واقعا خوشم از سایت و این مطلب اومد
اگه میشه یا اون خود آموز را بنویس یا برام ایمیل کن
من خیلی به این آموزش ها احتیاج دارم.
tatar.bonfire@hotmail.com
نظر شما چیست ؟