آموزش ساخت روبان ۳D برای سایت + PSD رایگان

[divider] مشخصات آموزش
برنامه: فتوشاپ
سطح: مقدماتی
زمان: ۳۰ دقیقه
[divider]

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

[divider]

نمونه‌هایی برای روبان ۳D در سطح وب

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

آموزش ساخت روبان با فتوشاپ و CSS

آموزش ساخت روبان با فتوشاپ و CSS (2)

آموزش ساخت روبان با فتوشاپ و CSS (3)

آموزش ساخت روبان با فتوشاپ و CSS (4)

آموزش ساخت روبان با فتوشاپ و CSS (5)

آموزش ساخت روبان با فتوشاپ و CSS (6)

 

 

 

 

 

 

 

[divider]

آموزش

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

[divider]

 

گام نخست: شروع

آموزش ساخت روبان با فتوشاپ و CSS (7)

 

فتوشاپ را باز کنید و یک سند جدید ایجاد کنید; سایز زیاد اهمیت ندارد. ما از طول ۶۰۰ پیکسل استفاده کردیم اما اگر برای طراحی وب دارید استفاده میکنید شما میتوانید از سایز دلخواه خودتان استفاده کنید.

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

 

گام دوم: ساختن اشکال اولیه

با استفاده از ابزار (rounded rectangle (U یک مستطیل به اندازه ی ۳۱۰px در ۴۴px ایجاد کنید و مقدار radius را ۴px کنید. اما اگر دوست داشتید که گوشه‌ی‌ مستطیل گرد نباشد میتوانید از ابزار rectangle استفاده کنید.

به طول توجه کنید : حواستان باشد که که این مستطیل ما باید مقداریش بر روی بکگراند قرار گیرد. من در اینجا  ۲۵px برای مستطیل از ۳۱۰px استفاده کردم که ۲۸۵px آن بر روی مستطیل روشن و ۲۵px آن بر روی بکگراند قرار میگیرد.

 

 آموزش ساخت روبان با فتوشاپ و CSS (8)

گام سوم

آموزش ساخت روبان با فتوشاپ و CSS (9)

 

حالا من میخواهم گوشه ی پایینیِ این مستطیل را صاف کنم  تا دیگر گرد نباشند. برای اینکار با استفاده از ابزار Convert Point  گره‌ها را گرفته و تا جایی آن‌ها را بکشید که زاویه‌ی مستطیل تبدیل به ۹۰ درجه شود.

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

گام چهارم

آموزش ساخت روبان با فتوشاپ و CSS (10)

 

حالا ما میخواهیم قسمتی از روبان را ببُریم. با استفاده از ابزار Polygonal Lasso میتوانید اینکار را انجام دهید. من کلید shift رو نگه میدارم تا این ابزار مجبور شود که زاویه ۴۵ درجه درست کند. اما شما میتوانید هرطور که دوست دارید آن را ببرید.

برای اینکه مستطیل خود را شبیه به فلش کنید به این صورت عمل کنید : ابتدا بر روی لایه ی مستطیل کلیک کنید و با استفاده از ابزار Polygonal Lasso و نگه داشتن کلید Shift یک فلش بسازید و سپس بر روی دکمه ی Add vector mask در پالت لایه‌ها کلیک کنید. (برای دقیقتر شدن کار از Ruler کمک بگیرید > ctrl+r)

آموزش ساخت روبان با فتوشاپ و CSS (11)

 

 

آموزش ساخت روبان با فتوشاپ و CSS (12)

گام پنجم

آموزش ساخت روبان با فتوشاپ و CSS (13)

 

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

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

گام ششم

آموزش ساخت روبان با فتوشاپ و CSS (14)

 

باز هم با استفاده از ابزار Convert Point نقطه ی پایین-راست مربع را تا جایی بالا ببرید که کمی‌پاین تر از نقطه ی بالا-راست قرار گیرد.

طرح شما باید چیزی شبیه به این شده باشد:

 

 آموزش ساخت روبان با فتوشاپ و CSS (15)

گام هفتم: لِیر استایل‌ها

بسیار خوب ; حالا ما همه ی شکل‌های اولیه مان را داریم، یعنی ما در ایم مرحله باید کمی‌افکت به شکل‌هامون اضافه کنیم.در این مرحله شما میتونید هر طور که دوست داریسم عمل کنید. اما من اتنظیماتی را که استفاده کردم به شما نشون میدهم.

این تنظیمات مربوط به شکل مستطیل است:

آموزش ساخت روبان با فتوشاپ و CSS (16)

آموزش ساخت روبان با فتوشاپ و CSS (17)

آموزش ساخت روبان با فتوشاپ و CSS (18)

این افکت‌ها بر روی شکل مربعی که زیر مستطیل قرار میگیرد اعمال میشوند :

آموزش ساخت روبان با فتوشاپ و CSS (19)

 

حالا چیزی شبیه به این باید به دست آمده باشد:

 

آموزش ساخت روبان با فتوشاپ و CSS (20)

گام هشتم: اضافه کردن متن

آموزش ساخت روبان با فتوشاپ و CSS (21)

 

 

حالا وقت اضافه کردن متن است! من از فونت Eureka با سایز ۱۸pt استفاده میکنم و یک افکت drop shadow بر روی آن اعمال میکنم. شما میتوانید متنتان را هر جور که دوست دارید طراحی کنید. این فقط نظر من بود.

 

آموزش ساخت روبان با فتوشاپ و CSS (22)

گام نهم: اضافه کردن خط چین

آموزش ساخت روبان با فتوشاپ و CSS (23)

 

 

ساختن خط چین از راه‌های زیادی قابل انجام است. اما من اینجا به شما یاد میدهم که چگونه میتوانید با استفاده از ابزار Text و “.” یک خط چین بسازید، البته نیازی هم به آموزش نیست. از تنظیمات بالا برای ساختن خط چین استفاده کنید و opacity لایه را ۵۰% کنید.

حال افکت زیر را به نقطه چین‌ها اعمال کنید:

آموزش ساخت روبان با فتوشاپ و CSS (24)

 

گام دهم: آخرین افکت

آموزش ساخت روبان با فتوشاپ و CSS (25)

 

 

شکل شما باید مانند روبان سمت راست شده باشد. اگر هم میخواهید که رویان سمت چپی را درست کنید فقط باید روبان سمت راست را کپی (ctrl+j) پیست کنید و با رفتن به مسیر Edit>Free Transform آن را بچرخانید.

 

راه‌های کد نویسی

خب، حالا ما روبانی را که طراحی کرده ایم را داریم. خب بهتر است که ما درباره ی کد نویسی آن صحبت کنیم. ما به طور عمیق وراد کدنویسی خط به خط آن نمیشویم. آموزش‌های زیادی برای کدنویسی اینطوری برای CSS وجود دارد که میتواند به شما در این مورد کمک کند. ما به طور مختصر این روش‌ها را معرفی میکنیم و در طی آموزش به شما لینک‌هایی برای درک عمیق تر میدهیم.

متود ۱ – CSS: تصویر پس‌زمینه

این روش آسان ترین و سر راست ترین راه است. این روش ار خواص پایه CSS برای پس‌زمینه استفاده میکند. روبان شما ممکن است کمی‌متفاوت شده باشد، بنابراین من درباره ی گام‌های ابتدایی آن توضیحاتی میدهم:

آموزش ساخت روبان با فتوشاپ و CSS (26)

 

  1. بریدن: روبان گرافیکی خود را با فرمت PNG ذخیره کنید (عکس بالا را نگاه کنید).
  2.  HTML: یک دستور DIV یا عنصر سربرگ درست کنید.
  3. CSS: عناصررا استایل بندی کنید تا از تصویرمان به عنوان “background-image” استفاده کنیم.
  4. ازخاصیت  “background-position” برای جا به جایی تصویر و کامل کردن افکت استفاده کنید. ممکن است شما بخواهید از یک عدد صحیح مثبت استفاده کنید تا طرحتان از از چهار چوب بیرون بزند.
  5. از خاصیت بالشتکی استفاده کنید تا متن را در طرح قرار دهید.

نقاط قوت:  این متود ساده ترین متود برای این کار بود و پایان رساندن آن راحت است.

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

 

متود ۲: درب‌های کشویی CSS

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

آموزش ساخت روبان با فتوشاپ و CSS (27)

 

  1. بریدن: ربانتان را سه قسمت کنید و هر قسمت را به عنوان فایل PNG سیو کنید.
  2. HTML: سه تا المان بسازید . یکی سمت راست ، یکی وسط و دیگری سمت چپ. این باعث میشود که شما بتوانید نیمه ی وسطی را چند بار تکرار کنید تا اندازه اش بزرگ شود.
  3. CSS: المان‌ها را استایل بندی کنید و برای “background-image” از روبان استفاده کنید.
  4. از خاصیت “background-position” استفاده کنید تا روبان را در جای مناسب قرار دهید.
  5. با استفاده از خاصیت بالشتکی متناتان را در قسمت وسط بگذارید. قسمت‌های راست و چپ باید خالی باشند.

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

نقاط ضعف: این روش میتواند ترفند خوبی باشه برای اینکه طرح ما در تمام مرورگر‌ها به خوبی نمایش داده شود.

 

متود سوم: تکنیک‌های CSS3

در این روش شما دیگه نیازی به عکس ندارید! بلکه میتونید با تکنیک‌های CSS3 همان چیز‌هایی را که در فتوشاپ اعمال کردید در اینجا هم اعمال کنید. در واقع شما باید تمام این طرح رو با کد ایجاد کنید و دیگر عکسی نباید درست کنید. (درباره CSS3)

نقاط قوت: نیازی به عکس ندارد! این به این معنی است که حجم سایت شما کمتر میشود و تغییر دادن آن تنها با ویرایش چند متغیر در CSS انجام میشود.

نقاط ضعف: این متود فقط در مرورگر‌های IE8, Safari 4.0, and Firefox 3.5 به بالا کار خواهد کرد.

 

نتیجه

پیش از همه چیز امیدورام که شما از این آموزش لذت برده باشید. این آموزش یکی از راحت ترین روش‌ها برای اضافه کردن کمی‌عمق به سایت شما است و میتوانید از این جور طرح‌ها در قسمت‌های زیادی از طرحتان استفاده کنید.

دانلودفایل‌های مورد نیاز

One comment

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *