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

یکی از تکنیک هایی که در کارهای گرافیکی و به خصوص در طراحی قالب با فتوشاپ ممکن است به شکل های مختلف مورد استفاده طراحان وب قرار گیرد، تکنیک ایجاد المان ها و جلوه های سه بعدی است که به طور خلاصه منظور از این نوع طراحی، در واقع عمق دادن به نمای ظاهری یا برجسته کردن قسمت هایی از کار و در واقع بهره بردن از فضای دو بعدی (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>
<!-- https://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 و خاصیت های آن دارد.

دسته بندی: مهارتهای وب » طراحی وب

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
زیبا سازی فرم های وب با CSS
قابلیت های کاربردی CSS3 در طراحی وب
آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS

دیدگاه

۳ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

مهتاب

۰۰:۰۹ ۱۳۹۲/۰۱/۲۹

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

محمد

۱۵:۳۷ ۱۳۹۲/۰۱/۱۴

چرا انقدر زجر میدید؛ خیلی راحت با css میشه این کارو انجام داد دردسر هم نداره خیلی هم راحت لود میشه و سنگین نیست نیاز به نرم افزار هم نداره استاندارد هم هست

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

reza

۱۵:۱۰ ۱۳۹۱/۰۶/۲۹

با سلام
میشه یه توضیح در مود اینکه چطور میشه یه قالب با قابلیت تغییر و کش اومدن عرض ایجاد کرد؟ یعنی با کوچک شدن عرض پنجره ,قالب تغییر میکنه و باز هم همه ی مطالب قابل مشاهده هست که بیشتر کاربردش واسه اینکه گوشی ها و تبلت ها هم بتونن به راحتی از مطالب سایت استفاده کنن! مثل: سایت webiran.co یا smashingmagazine.com
مرسی

سلام
برای طراحی این نوع قالب ها کافی است از مقادیر درصدی به جای پیکسل در css استفاده کنید، به فرض اگر عرض قالب 900px است، برای گوشی ها و تبلت ها به صورت %100 مقدار دهی کنید، البته سایر لایه ها و عناصر نیز باید با این نوع مقداردهی متناسب شوند، نکته دیگر اینکه از بلاک های div استفاده کنید نه از جداول.

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