واضح آرشیو وب فارسی:سایت ریسک: طراحی قالب 3 بعدی سایت در فتوشاپ(توپ)همراه با psd LOOX 23 ارديبهشت 1389, 03:26سلام، امروز قصد دارم نحوه ساختن یک لایه سه بعدی در فتوشاپ را به شما آموزش دهم. این طرح دارای یک لایه صاف و براق که الهام گرفته شده از سیستم عامل از مکینتاش است می باشد. و ظاهر آن لطیف و رنگ خاکستری است. اول از همه میتوانید خروجی 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 تغییر دهید. () شکل نهایی طرح ما باید شبیه عکس زیر باشد : () امیدوارم از آموزش بالا لذت برده باشید منبع:فتوشاپ استار pdfشم سعی می کنم تو اولین فرصت بذارم:rose: scup 23 ارديبهشت 1389, 07:37خیلی علی بود..... مشکل اینجاست که نگفتی فونتش چه سایزی هست؟ LOOX 23 ارديبهشت 1389, 21:22خیلی علی بود..... مشکل اینجاست که نگفتی فونتش چه سایزی هست؟ خوب دوست عزیز شما مگه فایل psd رو دانلود نکردین؟ اونجا چند نوع نوشته هست سایز کدومش ؟ kamifa 1986 28 ارديبهشت 1389, 09:25خيلي عالي بود. موفق باشي داش ممد 28 ارديبهشت 1389, 14:45اونوقت چطوری برای سایت استفاده کنیم LOOX 01 خرداد 1389, 01:41اونوقت چطوری برای سایت استفاده کنیم برای گرافیک سایت مورد استفاده قرار می گیره:paint: sonix 01 خرداد 1389, 04:33یه زحمتی بکشی فایل HTML اش رو هم بذاری عالی میشه :rose: vafa_0000 27 بهمن 1389, 22:28سلام. میخواستم بدونم چطوری میشه یه قالب رو با فتوشاپ طراحی کرد و بعد اونو به html تبدیل کرد ؟ Saeed 27 بهمن 1389, 22:48سلام. میخواستم بدونم چطوری میشه یه قالب رو با فتوشاپ طراحی کرد و بعد اونو به html تبدیل کرد ؟ vafa_0000 جان طراحی قالب رو که در پست اول به صورت کامل توضیح دادهـ شدهـ ، برای html کردن طرحتون راههای زیادی وجود داره که بنظرم بهترین روش اسلایس دستی هستش ، البته فتوشاپ هم این امکان رو داره که من پیشنهاد نمیکنم !! :rose: قفل !! Saeed 28 اسفند 1389, 10:19نسخه Html این قالب رو میتونید از زیر دریافت کنید :دی
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 992]