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




6 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰

form مهدی
در:
سلام میشه به من کمک کنید من چجوری برای وب سایتم لینک بزارم؟ اگه میشه برای ایمیلم جواب را ارسال کنید.
۲۰:۲۹:۰۸ ۱۳۹۸/۱۰/۲۹

form مهدی
در:
سلام من مهدی هستم. چجوری باید برای سایتی که ساختم آدرس بسازم که وقتی در سرچ گوگل بنویسیم برایمان بیاورد.
۱۹:۴۶:۲۳ ۱۳۹۸/۱۰/۲۸

form sadegh
در:
سلام من میخوام قالب وبلاگم رو تغییر بدم و تاریخ یا تعداد کامنت های مطالب پربازدید رو بهش اضافه کنم ولی طبق جدولی که...
۱۲:۳۰:۰۳ ۱۳۹۸/۱۰/۲۸

form امیر علی
در:
سلام من یه وبلاگ برای امان زمان ساختم الان وقتی میخوام از مدیریت برم توش میاره که فیلتره ولی وقتی ادرسش رو سرچ میکنم میاره...
۲۰:۲۶:۲۷ ۱۳۹۸/۱۰/۲۷

form حمید شیخلر
در:
سلام خسته نباشید دوست عزیز من یه راهنمایی میخواستم یه شخصی برنامه بله رو دانلود کرده ولی مخفیانه شماره تلفن من رو داده پیامک کد...
۱۷:۴۷:۴۸ ۱۳۹۸/۱۰/۲۶

form سید محسن
در:
من داخل وبلاگم تو بلاگفا یک متن نوشتم ولی 4 بار تکرار شده علتش چیه؟
۱۵:۰۵:۳۱ ۱۳۹۸/۱۰/۲۴

form ainaz
در:
سلام من در صفحم عکس گذاشتم ولی عکسم تیکه تیکه افتاده باید چکار کنم
۲۰:۵۶:۵۷ ۱۳۹۸/۱۰/۲۳

form zb84
در:
هنگام آپدیت افزونه های وردپرس به این ارور برخورد میکنم لطفا راهنمایی کنید.
۲۱:۳۴:۲۷ ۱۳۹۸/۱۰/۲۲

form esmaeel
در:
سلام من فونتا رو اوکی می کنم تو وبسایت وقتی با کامپیوتر میرم فونتا درسته ولی وقتی با گوشی میرم فونت نمیاد مشکلش چی میتونه...
۱۹:۲۹:۰۹ ۱۳۹۸/۱۰/۱۹

form john
در:
سلام خدمت شما ببخشید آیا میشه از کد های پی اچ پی هم داخل وبلاگ استفاده کرد؟
۱۳:۴۴:۱۵ ۱۳۹۸/۱۰/۱۸

form ابوالفضل شیخیانی
در:
عالی بود، ممنون بابت این پستتون
۲۲:۳۰:۴۰ ۱۳۹۸/۱۰/۱۶

form بهنام
در:
سلام من میخوام برای یک متغیر دو تا مقدار تعیین کنم مثلا هم باشه واضح تر بگم میخوام بگم اگه...
۱۷:۱۶:۳۶ ۱۳۹۸/۱۰/۱۶
آگهی