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

۱. اولین مرحله از تبدیل تم‌های فتوشاپ به صفحات HTML ایجاد یک فولدر جدید به نام webdites است که داخل آن نیز می‌بایست دو فولدر دیگر تحت عناوین images و css نیز ایجاد کنید. در این دو فولدر تمامی فایل‌های مربوط به تبدیل تم‌های فتوشاپ به صفحات HTML ذخیره می‌شوند.

۲. مرحله دوم  با باز کردن فایل فتوشاپ تم شروع می‌شود. در اینجا آموزش روی یک لوگو نمایش داده می‌شود. در نرم‌افزار فتوشاپ تمامی لایه‌های مرئی غیر از لایه Logo را نامرئی کنید. در قسمت Image گزینه Trim را انتخاب نموده و Transparent Pixels را تیک بزنید. در نهایت می‌توانید تصویر خود را در فولدر images به نام logo.png ذخیره نمایید.

۳. در این مرحله تغییراتی در تصویر پس‌زمینه داده می‌شود پس می‌بایست تمامی لایه‌ها به استثنای لایه background غیرفعال باشند. بعد می‌توان با گزینه Crop اندازه تصویر را کوچک کرد. پس از انجام تغییرات فایل را با فرمت png. ذخیره نمایید.

۴. اکنون وقت آن است که به سراغ xhtml رفته و تنظیمات قسمت عنوان را انجام داد. اینجا بهتر است از ویرایشگر متن Dreamweaver استفاده نموده و کدی که در ادامه آمده است کپی نمایید. این اولین ایندکس ایجاد شده در html است که می‌توان آن را در فولدر websites ذخیره نمود.

تبدیل تم‌های فوتوشاپ به صفحات HTML

۵. باز به فتوشاپ برمی گردیم و لایه welcome box را فعال می‌کنیم. در این صورت، با استفاده از ابزار Crop از چپ به راست و از بالا به پایین کادر برش را حرکت داده و به اندازه ۵ پیکسل در پایین کادر فاصله قرار می‌دهیم. در نهایت آن را در فولدر images تحت عنوان welcome-bg.png ذخیره می‌کنیم.

تبدیل تم‌های فوتوشاپ به صفحات HTML

۶. برای مرحله ششم، تمامی کارهای مرحله پنجم را تکرار می‌کنیم با این تفاوت که حرکت برش باید از پایین به بالا انجام شود. در نهایت می‌توان تصویر را تحت عنوان welcomebg-bottom.png ذخیره کرد.

۷. تا اینجا تنظیمات عکس‌ها انجام شده و تنها کاری که باید انجام داد این است اضافه کردن استایل، رنگ و تعیین موقعیت المان‌هاست. پس در  Dreamweaver یک فایل css.  ایجاد کرده و کد زیر را در آن کپی نمایید. این فایل را در فولدر css و به نام style.css ذخیره نمایید.

تبدیل تم‌های فوتوشاپ به صفحات HTML

۸. در این مرحله بهتر است فایل ایندکس را گسترده تر نماییم که لزوماً المان‌های متفاوت را در صفحا سایت در موقعیت اصلی خود قرار می‌دهند. کد html مربوط به این قسمت در زیر آورده شده است.

تبدیل تم‌های فوتوشاپ به صفحات HTML

۹. در مرحله بعد برای گذاشتن تصاویر thumbnail تنها کاری که باید کرد این است که به فتوشاپ مراجعه کرده و با استفاده از ابزار Crop تک تک تصاویر را برش می‌زنیم. بهتر است برای هر تصویر به اندازه ۵ پیکسل فاصله بگذاریم.

تبدیل تم‌های فوتوشاپ به صفحات HTML

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

تبدیل تم‌های فوتوشاپ به صفحات HTML

۱۱. مرحله بعد در فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML مربوط به قرار دادن markup ها در فایل html است که همراه با تگ های تصویری می باشند. دقت داشته باشید که دستور div به تنهایی در markup ها استفاده می شود و این امر برای قرار گرفتن div ها در موقعیت اصلی خود ضروری است. کدها زیر، شما را در این قضیه راهنمایی می نمایند.

تبدیل تم‌های فوتوشاپ به صفحات HTML

 

۱۲. برای تنها کادر پس‌زمینه از تکنیک بکار رفته برای welcome box استفاده می‌کنیم. به فتوشاپ مراجعه نموده، لایه About me box را فعال کزده و عمل برش را با استفاده از ابزار crop انجام دهید. همانطور که در مراحل ۵ و ۶ آورده شده است یک بار crop کرد از بالا یه پایین و بار دیگر از پایین به بالا خواهد بود.

تبدیل تم‌های فوتوشاپ به صفحات HTML

۱۳. برای داشتن button باید دو تصویر ایجاد شود پس در فتوشاپ لایه بالای لایه button که دربرگیرنده متن می باشد را نامرئی نمایید. سپس یک بار از بالا و یک بار از پایین عمل crop را انجام دهید.

۱۴. در این قسمت از فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML باید مجدداً  از ابزار crop استفاده کرده و عنوان تصویر بلاگ را برش بزنیم.

 تبدیل تم‌های فوتوشاپ به صفحات HTML

۱۵. در پایان هم نوبت به علائم شبکه‌های اجتماعی می‌رسد. پس در فتوشاپ تصاویر مربوط به هر کدام را crop کرده و تصاویر را در فولدر images ذخیره نمایید.

تبدیل تم‌های فوتوشاپ به صفحات HTML

منبع: www.webdesignermag.co.uk

 

طراحان
طراحان
گروه طراحان دپارتمان طراحی وب‌سایت است که فعالیت خود را از سال ۸۴ آغاز نموده. طراحان کلیه نیاز‌های شما را در راه اندازی، نگهداری و مدیریت انواع وب‌سایت‌های اینترنتی، فروشگاه‌های اینترنتی، سایت‌های خبری، پرتال‌های سازمانی، سایت‌های ویژه مشاورین املاک، سایت‌های ویژه آژانس‌های مسافرتی و رزرو و ... به‌صورت حرفه‌ای و کاربردی برطرف می‌نماید.