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





4 × 5
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

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

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

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

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

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

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.