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

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

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

شروع کار : یک صفحه جدید در ابعاد ۱۲۰۰*۱۲۰۰ پیکسل و با رنگ پس زمینه دلخواه بسازید.سپس پس زمینه را به رنگ “۴۲۴۲۴۲#” و background را “#۱۹۱۹۱۹” قرار دهید. حالا ابزار “gradient tool ” و گزینه ” radial gradient ” را انتخاب کنید.

سپس “radial gradient ” را انتخاب و مطابق شکل زیر از بالای صفحه تا حدود نیمی از صفحه بکشید.

ساختن عنوان سایت

ابزار “text type tool ” را انتخاب کنید و عنوان و لوگوی دلخواه وب سایتتان را در قسمت باالا سمت چپ تصویر بنویسید.متن زیر با قلم “verdana” و اندازه فونت “pt 36 ” نوشته شده است.

سپس روی لایه ای که متن عنوان و لوگو را نوشتید راست کلیک کرده و گزینه blending options را اعمال کنید و مطابق با شکلهای زیر تغییرات را در آن اعمال کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

ساختن search box

ابزار “rounded rectangle tool ” را انتخاب کرده و “radius ” آن را “۱۵ px” قرار دهید. سپس یک مستطیل با اندازه متوسط در قسمت بالا سمت راست بکشید.

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

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

حالا با استفاده از ابزار “rounded rectangle tool ” با ” “radius =5 px یک مستطیل کوچکتر داخل مستطیل قبلی بکشید.

وقتی مستطیل داخلی را رسم کردید، یک لایه جدید بازکرده و در سمت راست مستطیل داخلی یک مربع کوچک رسم کرده و لایه مربع کوچک را مخفی کنید تا بعدا مورد استفاده قرار گیرد.

حالا به لایه مستطیل داخلی رفته و روی آن راست کلیک کرده و “blending options ” را انتخاب کنید.

سپس استایل های زیر را به مستطیل داخلی اضافه کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

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

حالا استایل های زیر را به لایه مربع کوچک اضافه کنید :

در سمت چپ کلید آبی و سمت راست مستطلیل سفید یعنی جایی که محل فیلد جستجو است دو خط “۱ px” رسم کنید.(مطابق شکل زیر ) خط اول دارای رنگ سیاه و خط راست رنگ سفید است. سپس “blend mode” لایه( مربع کوچک ) را به “soft line ” تغییر دهید.

در نهایت search box طرح شما باید شبیه زیر باشد :

ساختن navigation سه بعدی

دو خط ۱ px روئ همدیگر با حدود ۱۰۰ px فاصله و در پایین کادر جستجو و عنوان سایت بسازید .(مانند شکل زیر) رنگ خط بالایی را سیاه ( #۰۰۰۰۰۰) و خط پایینی را سفید (#ffffff) انتخاب کنید. سپس blend mode لایه را به Overlay تغییر دهید.

مانند شکل زیر :

ابزار “rectangle tool ” را انتخاب کنید و مستطیلی به عرض همان خطی که در مرحله قبل ساختیم ، رسم کنید.

مستطیل را با رنگ سفید پر کنید و به مسیر زیر بروید :

Edit —–> transform —- >perspective

سپس گوشه بالا سمت چپ شکل مستطیل را drag(کشیدن و بازی کردن) کنید تا چیزی شبیه شکل زیر شود.

همچنین یک خط ۱ px به رنگ سیاه سفید در بالای مستطیل رسم کرده و هیچ فاصله ای بین دو شی باقی نگذارید.

سپس روی لایه مستطیل راست کلیک کرده و blending options را اتنخاب کنید.

سپس style های زیر را به این لایه اضافه کنید:

ابزار ” elliptical marquee tool ” را برای کشیدن یک بیضی بزرگ انتخاب کنید. این بیضی باید کمتر از نیمی از مستطیل ما را پوشش دهد.

بیضی را با رنگ سیاه ( #۰۰۰۰۰۰) پر کنید و opacity آن را ۵۰% قرار دهید. اطراف مستطیل خود را انتخاب کرده و سپس نواحی انتخابی را معکوس (inverse) کنید. لایه بیضی را انتخاب کرده و delet کنید.

مانند شکل زیر :

اضافه کردن navigation Icons

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

همچنین یک درخشش و روشنایی به اولین آیکن اضافه کردم تا شناور بودن آن را بخوبی نشان بدهد.

هریک از آیکن ها را duplicate کرده وسپس تمام لایه های آیکن های duplicate شده را دریک لایه ترکیب کنید.

سپس لایه ترکیب شده را به زیر تمام لایه های آیکن بکشید. و برای وارونه کردن آیکن ها به شکل عمودی به مسیر زیر بروید

Edit — > transform — > flip vertically

سرانجام آیکن های ترکیب شده را به اندازه ۲ px تیره و مبهم کنید. برای اینکار به مسیر زیر بروید:

Filter — > blur — > Guassian blur

برای پایان navigation یک برچسب به اولین آیکن خود اضافه کنید تا حالت شناور بودن را کاملتر کنیم.

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

ساختن content area (مکان محتویات)

از ابزار ” rectangle tool ” برای ایجاد مستطیل بزرگ برای مکان محتویاتمان استفاده کنید.

این مستطیل باید هم عرض مستطیل navigation و در پایین آن باشد. وهمچنین نباید بین آنها فاصله ای باشد.

حالا تنظیمات زیر را روی مستطیل رسم شده (برای محتویات) اعمال کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

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

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

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

ساختن footer

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

که برای اینکار دو خط ۱ px روی هم استفاده کردم . در نهایت blend mode لایه footer را به overlay تغییر دهید.

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

امیدوارم از آموزش بالا لذت برده باشید و نظرات خود را با ما در میان بگذارید.

پ ن : این پست توسط نویسنده میهمان سینا ی عزیز نوشته شده که با وجود سن وسال کمی که داره اما مهارت خوبی و از خودش نشان داده و امیدوارم شاهد فعالیتهای بیشتری از سینا جان در آِ تی تی باشیم.

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

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

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

ساخت Flash PhotoGallery توسط PhotoShop

Photoshop Layout یک بلاگ عکس

ساخت Header سایت یا وبلاگ

Be Sociable, Share!


۱۹ دیدگاه


  1. سعید
    ۳۰ فروردین ۱۳۸۹

    ممنون از شما. سینا جان بهت خوش آمد میگم




  2. کامران
    ۳۰ فروردین ۱۳۸۹

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




  3. مونا
    ۲ اردیبهشت ۱۳۸۹

    ممنون آموزش خوبی بود




  4. ramin
    ۹ اردیبهشت ۱۳۸۹

    سلام ..سایت بسیار خوب و مفیدی هست .. ولی ای کاش برای منبع (سایت خارجی ) این اموزش هم معرفی میکردین !




  5. مهدی
    ۱۳ اردیبهشت ۱۳۸۹

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




  6. ایمان
    ۱۷ خرداد ۱۳۸۹

    دمت گرم میشه اینا رو ایبوک کنی واسه دانلود؟




  7. مهران
    ۲۰ تیر ۱۳۸۹

    عالی بود دمت گرم




  8. nazi
    ۲۹ تیر ۱۳۸۹

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




  9. mohade3
    ۳ مرداد ۱۳۸۹

    perfect!!!!!!




  10. سیمین
    ۱۴ مرداد ۱۳۸۹

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




  11. فرشاد
    ۱۶ مرداد ۱۳۸۹

    سلام
    دستتون درد نکنه
    فوق العاده هستش
    نمیخوام هندونه زیر بغلتون بدم
    ولی باور کنید اگه بدون هیچ چشم داشتی
    ۱-آموزش html به صورت جزء به جزء یعنی قابل فهم تر
    ۲-آموزش css
    ۳-آموزش جاوا اسکریپ
    ۴-آموزش php
    ۵-آموزش آجاکس
    ۶-آموزش فتوشاپ
    ۷-آموزش ساختن نرم افزار مدیریت محتوا برای وبسایت
    همه اینهایی رو که گفتم از ساده تا پیشرفته به صورت قابل فهم برای همه در سایتتان بزارید باور کنید آمار بازدیدتان وحشتناک میشه و اونوقت میتونید از طریق دیگر از وبسایتتان درآمد کسب کنید
    البته خود شما در این زمینه استادید
    البته شاید چیزایی که گفتم خیلی زیاد باشه نه !
    دلیل اینکه گفتم قابل فهم تر واسه اینه که شما یه سری به سایت استاد آنلاین بزنید متوجه منظورم میشید
    خلاصه همینم که گذاشتید از سرمون زیادیه
    ممنون از زحمات شما
    موفق باشید




  12. mehran
    ۲۱ مرداد ۱۳۸۹

    سیمین خانم شما می توانید به وسیله پاک کن سایه ها را تا اونجایی که می خواهید کوچک کنید




  13. فرشاد
    ۲۱ مرداد ۱۳۸۹

    سلام یه ایمیل از طرف شما برای من اشتباهی اومده
    پاسخی که به سیمین خانوم دادین به ایمیل من اومده




  14. باران
    ۳۱ مرداد ۱۳۸۹

    سلام
    احتراماً
    بسیار عالی وزیبا

    با تشکر




  15. حسیبن
    ۲۷ شهریور ۱۳۸۹

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




  16. کیهان
    ۸ آبان ۱۳۸۹

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




  17. آرمین
    ۲۳ دی ۱۳۸۹

    سلام

    کارتون خیلی خوبه

    جهت همکاری تو یک پروزه بزرگ لینترنتی به تیم خوبی
    مثل شما نیاز دارم.

    اگه تمایل داشتین که باهم همکار ی کنیم در زمینه طراحی صفحات
    وب با من تماس بگیرین




  18. هادی موسوی
    ۲ بهمن ۱۳۸۹

    بابا واقعا دمتون گرم . مر۳۰




  19. امید
    ۷ بهمن ۱۳۸۹

    بسیار عالی
    من امیدم یه طراحم که می خوام از شما چیز یاد بگیرم اینم ایمیلمه omiddez1370@yahoo.com لطفا اگه بیکار بودین برام یه سری آموزش بذارین ممنون …
    رضمن بسیار مطلب جالبیه
    ممنون از همتون
    =====منو فراموش نکنید من ازین به بعد بازید کننده دائم شما هستم=====



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