parsgreen.com
article

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

web-photoshop-css-3d

یکی از تکنیک هایی که در کارهای گرافیکی و به خصوص در طراحی قالب با فتوشاپ ممکن است به شکل های مختلف مورد استفاده طراحان وب قرار گیرد، تکنیک ایجاد المان ها و جلوه های سه بعدی است که به طور خلاصه منظور از این نوع طراحی، در واقع عمق دادن به نمای ظاهری یا برجسته کردن قسمت هایی از کار و در واقع بهره بردن از فضای دو بعدی (2D، مخفف Dimensional) برای خلق جلوه های سه بعدی (3D) است، البته همان طور که در آموزش های گذشته دیدیم، تسلط بر فتوشاپ در طراحی وب تنها یک قسمت کار است و برای تکمیل آن باید تا حدود زیادی با استایل نویسی css نیز آشنا باشیم.

منظور از طراحی سه بعدی چیست؟


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

برای خلق جلوه های سه بعدی از کجا شروع کنیم؟


قبل از هر چیز بهتر است با توجه به طرحی که در ذهن دارید، اندازه و میزان فضای مورد نیاز را در قالب خود (بر روی کاغذ یا به صورت کدنویسی html و css) تعریف کنید، سپس لایه ای در فتوشاپ ایجاد کرده و پیش نمایش کار را ترسیم نمائید، به طور مثال فرض کنید می خواهیم یک بلاک با سایه ای سه بعدی داشته باشیم، برای این کار تصویر کلی بلاک به همراه سایه آن را در فتوشاپ ترسیم می کنیم:
web-3d-css

ایجاد بلاک با سایه سه بعدی در فتوشاپ


ایجاد جلوه های ویژه با فتوشاپ بسته به میزان آشنایی و تسلط شما بر این نرم افزار کاربردی، می تواند کاری سخت و حرفه ای یا بر عکس ساده و راحت باشد، به هر صورت برای خلق یک بلاک با سایه سه بعدی مراحل زیر را انجام می دهیم.
- ابتدا برای خلق یک بلاک با گوشه های تیز، از ابزار Rectangle Tool که در قسمت نوار ابزار ها قرار دارد استفاده می کنیم.
- سپس بر روی لایه مورد نظر کلیک راست کرده و گزینه Blending Options را انتخاب می کنیم.
- در ادامه برای ایجاد خطوط حاشیه ای و همچنین تنظیم سایه اولیه، از Stroke و Drop Shadow استفاده می کنیم، میزان سایه را طوری تنظیم نمائید که کل بلاک را پوشش دهد.
- اکنون بر روی آیکن کوچکی که در سمت راست لایه با حرف f مشخص است، کلیک راست کرده و گزینه Create Layer را انتخاب می کنیم تا لایه های مورد استفاده در طرح از هم جدا شده و بتوانیم به طور جداگانه بر روی سایه مورد نظر تنظیمات مربوط به حالت Perspective یا سه بعدی نمایی را انجام دهیم.
- در نهایت بر روی لایه مربوط به سایه کلیک کرده و وقتی در حالت انتخاب قرار گرفت، از قسمت منو ها، گزینه Edit => Transform => Perspective را انتخاب و تغییرات مورد نظر را بر روی سایه طوری اعمال می کنیم که به شکل نمونه بالا به نظر برسد (این قسمت بستگی به مهارت شما دارد).
تصویر زیر روند کلی کار را نشان می دهد.
web-3d-perspective

برش تصویر برای استفاده در html و css


پس از اینکه طرح و نمای کلی کار را آماده کردیم، باید برای انتقال آن به صورت کدهای html و استایل css، موارد مورد نیاز را برش زده، تصویر را تجزیه و در تصاویر جداگانه ای ذخیره کنیم، همان طور که در آموزش های قبل گفته ایم، طراحی وب با طراحی پروژه های دستکتاپی تفاوت هایی دارد، چرا که در اینجا باید از ترکیب گرافیک و کدنویسی css استفاده کنیم، به هر صورت تصویر اصلی را به صورت تکه های فرضی زیر برش می زنیم.
web-3d-convert

کدنویسی html  و css قالب سه بعدی


اکنون برای انتقال قالب طراحی شده از فتوشاپ به کدهای html و css، قالب فرضی زیر را کدنویسی می کنیم، در واقع هدف از این کد تنها آشنا کردن شما با نحوه خلق جلوه های ویژه در وب است.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | طراحی قالب با جلوه های سه بعدی</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.main-block{
    width:800px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    border:0px solid #CCC;
}
.side{
    width:239px;
    height:100%;
    background-image:url(3d-sid.jpg);
    background-position:bottom left;
    background-repeat:no-repeat;
    display:inline-block;
    float:right;
}
.page-top{
    width:561px;
    height:30px;
    background-image:url(3d-top.jpg);
    background-repeat:no-repeat;
    display:block;
    float:right;    
}
.page-mid{
    width:561px;
    height:540px;
    background-image:url(3d-mid.jpg);
    background-repeat:repeat-y;
    display:block;
    float:right;    
}
.page-bot{
    width:561px;
    height:30px;
    background-image:url(3d-bot.jpg);
    background-repeat:no-repeat;
    display:block;
    float:right;    
}
</style>
</head>
<body>
<div class="main-block">
<!-- سایدبار -->
<div class="side">
</div>
<!-- بلاک بالا -->
<div class="page-top">
</div>
<!-- بلاک محتوا -->
<div class="page-mid">
</div>
<!-- بلاک پائین -->
<div class="page-bot">
</div>
</div>
<hr />
برای خلق جلوه های سه بعدی در وب، کافی است کمی تجربه و در کنار آن فایل ها و المان های گرافیکی مناسب در اختیار داشته باشید.
</body>
</html>
توضیح:
- در کد بالا ابتدا یک بلاک اصلی با کلاس فرضی main-block با عرض 800 پیکسل ساخته ایم، این بلاک کل محتویات قالب ما را در بر می گیرد، همانطور که ملاحظه می کنید با استفاده از margin-left:auto و margin-right:auto لایه را در وسط صفحه تنظیم کرده ایم.
- سپس برای سایدبار آن، بلاکی با عرض 239 پیکسل در نظر گرفته ایم، اگر دقت کرده باشید، برای اینکه بلاک ها در کنار هم و در یک سطر قرار گیرند از display:inline-block استفاده کرده ایم، همچنین پس زمینه آن را طوری تنظیم کرده ایم که تصویر سایه سه بعدی در پائین و بدون تکرار قرار گیرد (با استفاده از background-position:bottom left و background-repeat:no-repeat).
- بلاک سمت چپ نیز در واقع متشکل از سه بلاک div است که به صورت همپوشانی بر روی هم قرار گرفته و یک لایه واحد را شکل داده اند، ملاحظه می کنید که از مقادیر background-repeat:repeat-y برای تکرار تصویر پس زمینه در لایه میانی استفاده شده است.

پیش نمایش آنلاین


در لینک زیر پیش نمایش کا را می توانید ملاحظه و بررسی کنید.
پیش نمایش
یادآور می شویم که هدف ما در این آموزش صرفا آشنایی شما با یکی از تکنیک های طراحی در وب بود، لذا در پروژه های کاربردی ممکن است نیاز به تنظیمات بیشتر و سازگار کردن لایه ها با سایر عناصر موجود در قالب باشد که این امر نیاز به تسلط بر css و خاصیت های آن دارد.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» زیبا سازی فرم های وب با css
commentنظرات (۳ یادداشت برای این مطلب ارسال شده است)
نویسنده: reza
زمان: ۱۵:۱۰:۰۰ - تاریخ: ۱۳۹۱/۰۶/۲۹
با سلام
میشه یه توضیح در مود اینکه چطور میشه یه قالب با قابلیت تغییر و کش اومدن عرض ایجاد کرد؟ یعنی با کوچک شدن عرض پنجره ,قالب تغییر میکنه و باز هم همه ی مطالب قابل مشاهده هست که بیشتر کاربردش واسه اینکه گوشی ها و تبلت ها هم بتونن به راحتی از مطالب سایت استفاده کنن! مثل: سایت webiran.co یا smashingmagazine.com
مرسی
پاسخ: 
سلام
برای طراحی این نوع قالب ها کافی است از مقادیر درصدی به جای پیکسل در css استفاده کنید، به فرض اگر عرض قالب 900px است، برای گوشی ها و تبلت ها به صورت %100 مقدار دهی کنید، البته سایر لایه ها و عناصر نیز باید با این نوع مقداردهی متناسب شوند، نکته دیگر اینکه از بلاک های div استفاده کنید نه از جداول.
نویسنده: محمد
زمان: ۱۵:۳۷:۳۰ - تاریخ: ۱۳۹۲/۰۱/۱۴
چرا انقدر زجر میدید؛ خیلی راحت با css میشه این کارو انجام داد دردسر هم نداره خیلی هم راحت لود میشه و سنگین نیست نیاز به نرم افزار هم نداره استاندارد هم هست
پاسخ: 
ممنون از پیشنهادتان، البته قابلیت های css محدود به موارد خاصی است و در تمام مرورگرها پشتیبانی نمی شود، ضمن اینکه این آموزش جهت آشنا کردن طراحان کم تر حرفه ای با تکنیک های خلق جلوه های سه بعدی در وب است.
نویسنده: مهتاب
زمان: ۰۰:۰۹:۳۱ - تاریخ: ۱۳۹۲/۰۱/۲۹
با سلام و تشکر از مطالب بسیار خوب و مفیدی که در اختیارمان گذاشتید.




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

7 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...