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

دوشنبه, ۱۲ام بهمن , ۱۳۸۸ | ۲۱ دیدگاه

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

مرحله اول
ابتدا یک فایل جدید با سایز ۱۰۲۴ در ۱۲۰۰ پیکسل می سازیم.

مرحله دوم
حرف G را روی صفحه کلید فشار دهید تا ابزار رنگ آمیزی یا همان Paint Bucket Tool انتخاب شوند و با کمک این ابزار پشت زمینه کار را به رنگ #۳E4C54 تغییر دهید.

مرحله سوم
در این مرلحه قصد ساخت بالای سایت یا همان هدر را داریم.حرف M را روی صفحه کلیک فشار دهید تا اینبار ابزار Rectangle Marquee Tool انتخاب شود و همانند تصویر بخش بالایی سایت را انتخاب و به رنگ #۱F2B33 تغییر می دهیم. ( این کار را در یک لایه جدید انجام دهید)

مرحله چهارم
روی لایه هدر راست کلیک نمایید و blending options را انتخاب نمایید.(روش دیگر برای دسترسی به این بخش دوبار کلیک روی لایه مورد نظر می باشد) و سپس تنظیمات زیر را اعمال نمایید

مرحله پنجم
در این مرحله می خواهیم در هدر و بخش بالای سایت دکمه هایی ساده درست نماییم. با کمک ابزار Rectangle Marquee Tool که در مراحل قبل از آن استفاده نمودیم سه مستطیل هم سایز ایجاد می کنیم که رنگ یکی از آنها با بقیه متفاوت می باشد. کد رنگ اولین منو #FC4F83 می باشد و دو منوی دیگر کد #۲۷۳۴۳C را دارا می باشند.

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

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

مرحله هشتم
در این مرحله Sidebar و منوی کناری را طراحی خواهیم کرد. برای این کار ابزار Rounded Rectangle Tool را انتخاب می کنیم و radius آنرا ۱۰ پیکسل قرار می دهیم و رنگ پیش زمینه را #ECF1F3 قرار می دهیم و همانند تصویر زیر آنرا رسم می کنیم.

مرحله نهم
در این مرحله با کمک ابزار Rectangle Marquee Tool همانند شکل زیر منطقه ای را انتخاب می نماییم و رنگ آنرا #۰۰۰۰۰۰ قرار می دهیم.

مرحله دهم
با دوبار کلیک روی لایه مشکی رنگی که در حال کار کردن روی آن هستیم وارد تنظیمات blending options می شویم و همانند تصویر زیر آنرا تنظیم می نماییم.

و روی نوار Gradient کلیک نمایید و همانند زیر آنرا تنظیم نمایید :

مرحله یازدهم
اکنون با کمک ابزار نوشتن تیتر بخش را می نویسیم.

مرحله دوازدهم
در این مرحله مجددا ابزار Rectangle Marquee Tool را انتخاب می کنیم و دقیق زیر بخش ” شاخه های موجود” همانند تصویر زیر منطقه مورد نظر را انتخاب و مشکی رنگ می کنیم.

مرحله سیزدهم
همانند گذشته به بخش تنظیمات این لایه و blending options آن می رویم و همانند تصویر زیر عمل می نماییم:

مرحله چهاردهم
در این مرحله ابزار نوشتن را انتخاب و با رنگ #۳E4C54 منو ها را پر نمایید. مراحل بالا را آنقدر طی کنید تا منویی شبیه زیر داشته باشید :

مرحله پانزده
با کپی نمودن لایه های بالا می توانیم به نتیجه زیر برسیم و من دیگر آن مراحل را ذکر نمی کنم. اکنون بخش Sidebar سایت همانند شکل زیر شده است.

مرحله شانزده ام
در این مرحله فضای محتوای سایت را طراحی می کنیم برای این کار ابزار Rounded Rectangle Tool را انتخاب می کنیم radius کار را دوباره ۱۰ پیکسل انتخاب می کنیم و با رنگ سفید #FFFFFF همانند شکل زیر رسم می نماییم.

مرحله هفدهم
وارد تنظیمات blending options مخصوص به لایه ای که در مرحله شانزده ام برای بخش محتوا ایجاد نموده ایم می شویم و همانند زیر تنظیمات را تغییر می دهیم.

مرحله هجدهم
در این مرحله جای تصاویر را در بخش محتوای سایت در نظر خواهیم گرفت برای این کار مجددا ابزار Rounded Rectangle Tool را با همان radius 10 پیکسل انتخاب می کنیم و با پیش زمینه #ECF1F3 فضایی همانند زیر برای آن اختصاص می دهیم.

مرحله نوزدهم
وارد تنظیمات blending options لایه قبل می شویم و همانند زیر آنرا ویرایش می کنیم.

مرحله بیستم
در این مرحله از لایه خود یک کپی در کار ایجاد می کنیم برای این کار روی لایه مورد نظر راست کلیک و گزینه duplicate layer را انتخاب کنید و ok نمایید. لایه جدید را انتخاب نمایید و بخش زیرین آنرا همانند تصویر زیر انتخاب و پاک نمایید برای پاک نمودن یک انتخاب روی کیبرد دکمه Delete را فشار دهید. برای درک بهتر می توانید تصویر زیر را الگو قرار دهید.

مرحله بیست و یکم
در حال حاضر می خواهیم بخش بالایی و هدر هر منطقه که تصویر در آن قرار می گیرد را طراحی نماییم. برای این کار وارد تنظیمات blending options این لایه می شویم و همانند زیر آنرا تغییر می دهیم.


نتیجه ای همانند زیر در حال حاضر خواهیم داشت :

مرحله بیست و دوم
همانند هنگامی که منو را می ساختیم با کمک ابزار نوشتن نام تصویر و اسم انتخابی خود را در تیتر قرار دهید. و با رفتن به تنظیمات blending options لایه متن خود آنرا همانند زیر تغییر دهید.


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

مرحله بیست و سوم
در این مرحله بخش صفحه بندی سایت را طراحی می کنیم ظاهر آن بسیار ساده است و برای متن و اعداد از کد رنگ #۱F2B33 و برای صفحات فعال نیز همان رنگ صورتی که در سایت بکار بردیم را استفاده نموده ام.

مرحله آخر
به مرحله آخر خوش آمدید ! فقط می خواهیم فوتر و فضای زیرین سایت را طراحی کنیم. برای این کار ابزار Rectangle Marquee Tool را برداشته فضایی همانند تصویر زیر را انتخاب کرده و با رنگ #۲۷۳۴۳C
پر می کنیم.

و در بخش blending options این لایه تنظیمات زیر را اعمال می نماییم

و متن مورد نظر خود را در بخش فوتر سایت قرار دهید.

امیدوارم این آموزش مفید بوده باشه هر جا در مورد استایل ها و نکات مختلف مشکلی داشتید می توانید به فایل PSD مراجعه نمایید و یا کامنت بگذارید. موفق باشید

پستهای مرتبط :

طراحی قالب سایت

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

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

آموزش طراحی و کدنویسی وب سایت (از ابتدا تا انتها)

Be Sociable, Share!


۲۱ دیدگاه


  1. Ali Afkhami
    ۱۲ بهمن ۱۳۸۸

    بسیار عالی بود به قولی محشر بود بسیار لطف کردید دوست عزیز امیدوارم شاهد پیشرفت و انقلابی در طراحی وب ایران باشیم.




  2. کامران
    ۱۲ بهمن ۱۳۸۸

    حمید رضا جان عالی بود . برات آرزوی موفقیت دارم




  3. حسین میری
    ۱۲ بهمن ۱۳۸۸

    واقعا قشنگ شده… خیلی دوست دارم یاد بگیرم هر کاری میکنم و سعی میکنم نمیشه و در نمیاد؟… .




  4. Reza
    ۱۲ بهمن ۱۳۸۸

    سلام.
    ممنون از اینهمه زحمت.
    فقط یه سوال، تا اینجاش یه تیکه ی جدی بود، تیکه جدی بعدی بردن و پیاده کردن این قالب توی html و ترجیحا با css هست. بسیار ممنون میشم اگه در اون زمینه هم زحمتش رو بکشید.




  5. tannaz
    ۱۲ بهمن ۱۳۸۸

    به به…اینم یه جور هویت دادنه خب به نوعی …




  6. حمید رضا
    ۱۳ بهمن ۱۳۸۸

    حسین میری عزیز : هر مرحله که مشکل دارید بفرمایید تلاش می کنیم با هم مشکل را حل کنیم.

    رضا جان : بله همان جور که اطلاع دارید طراحی وب متشکل از مراحل متفاوتی هست که به دلایل متعدد در کشور ما اکثرا همه مراحل توسط یک نفر انجام می شود.
    من سعی می کنم حتما مقالاتی در زمینه تبدیل psd به Html و css تهیه کنم.

    با تشکر از تمامی پیام ها




  7. ali
    ۱۳ بهمن ۱۳۸۸

    سلام
    اول اینکه فوق العاده اید.انشاالله که در تمامی مراحل زندگیتون موفق باشید .
    من می خواستم بدونم کی قراره ما تو این سایت مقاله آموزش طراحی وب سایت با PHP را یاد بگیریم؟؟؟؟یا حداقل با Javascript??

    بازم Tank’s




  8. کامران
    ۱۳ بهمن ۱۳۸۸

    علی جان جاوا اسکریپت که جلسه سوم و چهارمشه
    اما در باره php ما هیچ وقت همچین صحبتی نکردیم و فعلا هم قصد آموزششو نداریم چرا که ابزار و امکاناتشو نداریم




  9. محمد
    ۱۴ بهمن ۱۳۸۸

    سلام
    من محمد محمدی
    هستم
    اگر خواستید می تونم همین جا آموزش php & my sql بدم




  10. سیاوش
    ۱۴ بهمن ۱۳۸۸

    سلام.
    میشه از این طریق واسه مامبو هم قالب طراحی کرد؟




  11. کامران
    ۱۴ بهمن ۱۳۸۸

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




  12. فرهنگ د
    ۱۵ بهمن ۱۳۸۸

    آموزشهای شما بسیار مفید هستند
    خسته نباشید




  13. بهزاد
    ۱۷ بهمن ۱۳۸۸

    دستون درد نکنه



  14. […] خودآموز سوم […]




  15. مژده(جمع دخترونه)
    ۱ اسفند ۱۳۸۸

    بزرگترین مشکل من هم همون تبدیل فایل PSD به قالبه ! والا طراحیش سخت نیست 🙁

    من Html , Css رو بلدم ولی خوب PHP بلد نیستم 😐
    الانم در به در دنبال یه آموزشی هستم که بشه PSD رو به قالب وردپرس تبدیل کنه !




  16. کامران
    ۱ اسفند ۱۳۸۸

    http://www.p30help.ir رو ببین. برای ساخت قالب وردپرس




  17. حمید رضا
    ۱۳ اسفند ۱۳۸۸

    مژده : سعی می کنم به زودی یک مقاله در این مورد دقیق و کامل تهیه کنم ، کمی فرصت نیاز دارم.

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




  18. نويد سراب
    ۱۴ مرداد ۱۳۸۹

    شما اموزش خصوصی هم میدید من تهران میشینم

    اگه اره خوشحال میشم شاگرد شما باشم چون کارتون عالیه




  19. ice man
    ۲۸ شهریور ۱۳۸۹

    آقا دس خوش!!!
    ایول…




  20. سپیده
    ۱۶ اسفند ۱۳۸۹

    سلام
    اگه میشه بخش آموزش asp.net و sql server هم تدارک ببینید

    خیلی عالی میشه




  21. megapixels.ir
    ۴ اسفند ۱۳۹۰

    دروود دوست من
    از هنرمندان مگاپیکسل باشید
    در صورت امکان مگاپیکسل را در وب خود قرار دهید …

    megapixels.ir



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