طراحی قالب سایت در فتوشاپ # ۲

یکشنبه, ۱۷ام آذر , ۱۳۸۷ | ۶۴ دیدگاه

امروز با توجه با درخواستها و تعداد گزینه های جستجو شده در موتورهای جستجو تصمیم گرفتم که نحوه ساختن قالب سایت در فتوشاپ و در صورتیکه استقبال خوبی بشه و در مرحله بعدش نحوه 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 طرح را دانلود نمایید :

همچنین در این رابطه بخوانید :

طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب)

Be Sociable, Share!


۶۴ دیدگاه


  1. سجاد
    ۱۸ آذر ۱۳۸۷

    عالی و کامل بود، اگه ممکن اون خودآموز رو هم بنویس.




  2. علی
    ۱۹ آذر ۱۳۸۷

    آقا اگه نحوه کانورت PSD به html را هم بگی دیگه نور علی نوره.




  3. سپیده
    ۱۹ آذر ۱۳۸۷

    سلام
    ممنون خیلی مفید بود




  4. babak
    ۳۰ آذر ۱۳۸۷

    آیا بجز pad راهی برای اسلایس چندین تصویر به یکباره وجود دارد؟




  5. سعید
    ۳۰ آذر ۱۳۸۷

    سلام
    خیلی خوب بود. لطفاً چگونگی تبدیل PSD به HTML را نیز توضیح دهید.




  6. محمد علي
    ۱ دی ۱۳۸۷

    سلام مرسی خیلی عالی بود اگه امکان داره نحوه کانورت هم توضیح بده لطفا.




  7. Hassan
    ۱ دی ۱۳۸۷

    خیلی ممنون و خسته نباشید




  8. رایان گراف
    ۲۷ دی ۱۳۸۷

    سلام دوست عزیز و گرامی
    واقعا خوشحالم از اینکه در اینجا محیطی فراهم آوردی تا دوستانی که علاقمند هستند جمع شوند و به مطالب مورد نیازشان برسند.
    من حدود ۶ سالی هست که فتوشاپ کار میکنم و عاشق این برنامم.۰البته به صورت تجربی!)و کم کم علاقمند به طراحی سایت شدم خیلی تلاش کردم تا بدونم از کجا باید شروع کنم.خلاصه اینکه بعد ۲ سالی تازه دستم اومد که راه اندازی سایت شامل چه مراحلی هست.بعد هم با فرانت پیج شروع کردم و … و از اونجا که میتونم با فتوشاپ قالب طراحی کنم.فقط مشکل من این بود که نمی دونستم چطور اونو باید در فرانت پیج وارد کنم و لینک گذاری و بقیه کارا رو روش انجام بدم …که اونم فهمیدم باید اسلایس بندی و برش داده بشه و بعد بصورت save for web ذخیره بشه.من اینکاروکردم.”””ولی مشکلی که دارم اینه که نمی دونم تو فرانت پیج چطور باید مطالب نوشتاریمو وارد کنم در جایی که قبلا تو فتوشاپ طراحی کردم و برش خورده؟؟؟”””
    چون در فرانت پیج رو قسمت مورد نظر کلیک میکنم بصورت عکس هستش و قابلیت اینو نداره که بتونم نوشنه هامو وارد کنم…(کمظورم همون قسمت content bar هستش.
    حالا اگه شما بتونید به من کمک کنید واقعا لطف بزرگی در حق بنده کردید.




  9. کامران
    ۲۷ دی ۱۳۸۷

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




  10. رایان گرافیک
    ۲۷ دی ۱۳۸۷

    با سلام
    ممنونم اینقده زود جواب پیاممو دادی.
    این نشونه اهمیت شما به بازدید کننده ها از سایتتون هستش.
    انشاالله زودتر آماده شه و همه استفاده کنند.
    من فقط مشکلم اینه که برا وارد کردن نوشته هام …
    ولی صبر می کنم تا آماده شه.میتونید از طریق ایمیلم خبرم کنید ؟
    راستی راجب MMB ،چون فکر کردم جای این برنامه فقط تو سایت شما کمه!
    به همین خاطر پیشنهاد دادم …
    احتمال زیاد همه استقلبال خواهند کرد.
    اگه کاری در زمینه طراحی داشتید رو شاگرد خودتون۰رایان گراف) میتونید حساب کنید …




  11. سعيد
    ۳۰ دی ۱۳۸۷

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




  12. DaRiOuShJh
    ۱۶ بهمن ۱۳۸۷

    مرسی
    خیلی جالب بود




  13. تریتی
    ۲۴ بهمن ۱۳۸۷

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




  14. امير
    ۱۲ اسفند ۱۳۸۷

    چی شد پس این کانورتش به HTML ؟
    ما بی صبرانه منتظریم




  15. کامران
    ۱۲ اسفند ۱۳۸۷

    من خیلی شرمنده ام
    خیلی خودآموز طولانی ولی به محض اینکه سرم خلوت بشه ادامشو مینویسم(نصفشو نوشتم)
    دیگه آخر سال و سر همه حسابی شلوغ




  16. محمود
    ۱۹ فروردین ۱۳۸۸

    سلام
    مطالب خیلی خوبی دارید.
    فقط یک سیستم عضو گیری کم داره!!




  17. مهرداد
    ۶ اردیبهشت ۱۳۸۸

    سلام دوست عزیز اولین باره که به سایت شما سر می زنم ولی جواب خیلی از سوالهامو اینجا پیدا کردم راستش من php و asp رو بادم ولی در مورد ظاهر سایت همیشه مشکل دارم خیلی از نرم افزار ها رو امتحان کردم ولی چیزی که می خواستم نشد ولی با فتوشاپ دستم بازتر می شه امیدوارم اموزش کامل convertرو هم بزاری




  18. کامران
    ۷ اردیبهشت ۱۳۸۸

    مهرداد جان ما دارین رو این آموزش کار میکنیم و قسمت اون تحت نام :

    طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب در فتوشاپ)

    در صفحه ابتدایی سایت آمادست که میتونی ازش استفاده بکنی.




  19. عادل نسب الحسینی
    ۱۴ خرداد ۱۳۸۸

    مطالب بسیار عالی و به زبان ساده نوشته شده اند که بنده مدتها بود به دنبال آن بودم
    واقعا جای تشکر دارد
    دستتون درد نکنه




  20. Robin
    ۱۴ تیر ۱۳۸۸

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




  21. شیما
    ۲ مرداد ۱۳۸۸

    دوست من می تونی به من بگی این جستجو رو چه جور فعال کردی در سایتت…من با فرونت پیج کار می کنم و هنوز در گذاشتن جستجو در سایت مشکل دارم….مطلبتم عالی بود…




  22. علی
    ۳۱ مرداد ۱۳۸۸

    خیلی خوبه حتما ادامه بده . مرسی




  23. امین
    ۱۳ شهریور ۱۳۸۸

    بسیار عالی بود
    ممنون




  24. اصغر
    ۱۰ مهر ۱۳۸۸

    با تشکر از زحمات شما




  25. مسعود
    ۲ آبان ۱۳۸۸

    واقعا خوشم از سایت و این مطلب اومد
    اگه میشه یا اون خود آموز را بنویس یا برام ایمیل کن
    lordpageon@yahoo.com

    تشکر فراوان



دیدگاه خود را بنویسید