آموزش تبدیل PSD به HTML و CSS رایگان – گام به گام و پروژه محور

طراحی وب‌سایت شامل مراحل مختلفی است و یکی از مهم‌ترین مراحل در زمان طراحی یک وب‌سایت تبدیل فایل‌های PSD به HTML است. در این راهنما با رویکردهای مختلف برای تسهیل فرایند تبدیل PSD به HTML و CSS آشنا خواهیم شد. اما پیش از آن کمی با مفاهیم کلی مورد بحث در این مقاله آشنا می‌شویم.

PSD چیست؟

PSD اختصاری برای عبارت «سند فتوشاپ» (Photoshop Document) است. فتوشاپ یکی از محبوب‌ترین نرم‌افزارهای ادیت عکس است. با استفاده از این برنامه می‌توانید تصاویر را ویرایش کنید، با استفاده از رویکرد لایه‌بندی، طراحی‌هایی خلق کنید و طراحی‌های خود را در قالب‌های مختلف ذخیره نمایید.

فرمت فایل پیش‌فرض فتوشاپ PSD است. طراحان وب ترجیح می‌دهند که نخست طراحی‌های خود را در فتوشاپ اجرا کنند و سپس آن را به قالب HTML تبدیل نمایند در اغلب موارد فرایند تبدیل PSD به کد نه از سوی خود طراحان بلکه از سوی کارشناسان کدنویسی انجام می‌یابد.

HTML چیست؟

HTML اختصاری برای عبارت «زبان نشانه‌گذاری ابرمتن» (Hyper Text Markup Language) است. HTML یک زبان رایج برای ساخت صفحه‌های وب محسوب می‌شود. این زبان کدنویسی از تگ‌های پیش‌تعریف‌شده بهره می‌گیرد. اگر می‌خواهید طراحی‌های PSD را به HTML تبدیل کنید باید با مفاهیم و تگ‌های این زبان آشنا باشید.

نسخه‌های متخلفی از HTML وجود دارد، اما در زمان تبدیل طراحی به این زبان باید از جدیدترین نسخه آن بهره بگیرید تا مطمئن شوید که بیشترین سطح سازگاری را با مرورگرهای مختلف به دست می‌آورید. جدیدترین نسخه HTML در حال حاضر نسخه HTML5 است.

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

چرا مستقیماً کدهای HTML را نمی‌نویسیم؟

این یکی از پرکاربردترین سوالاتی است که در زمان بحث از فرایند تبدیل PSD به HTML شنیده می‌شود. چرا باید ابتدا یک طراحی PSD ایجاد کنیم و سپس دردسر تبدیل آن به قطعات کوچک و ساخت مجدد طراحی در قالب HTML را متحمل شویم؟

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

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

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

بدین ترتیب تنها محتوای متنی در فایل HTML ساخته می‌شوند. همه جنبه‌های گرافیکی دیگر وب‌سایت در قالب PSD طراحی می‌شوند.

رویکردهای مختلف برای تبدیل PSD به HTML

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

کدنویسی دستی

این امکان وجود دارد که شما کمی با کدنویسی آشنا باشید و از این رو بخواهید طراحی‌تان را خودتان به کد تبدیل کنید. البته این کار نیازمند برخی مهارت‌های فنی است. اما حتی اگر میانه خوبی با کدنویسی HTML نداشته باشید، باید تلاش کنید برخی تگ‌های ابتدایی این زبان را بشناسید تا بتواند کار تبدیل را به درستی اجرا کنید.

ابزارهای خودکار تبدیل

برخی ابزارهای خودکار برای تبدیل فایل فتوشاپ به HTML نیز معرفی شده‌اند. با این که این ابزارها کار خود را نسبتاً به خوبی انجام می‌دهند، اما شما نمی‌توانید انتظار یک تبدیل کاملاً دقیق (pixel-perfect) را از آن‌ها داشته باشید. اگر کیفیت کار چندان اهمیتی ندارد، می‌توانید از این ابزارها کمک بگیرید. در ادامه مشکلاتی که ممکن است در زمان استفاده از این ابزارها با آن‌ها مواجه شوید و روش‌های رفع این مشکلات را بررسی می‌کنیم.

اجزای مختلف وب‌سایت

در این بخش ابتدا با اجزای مختلفی که یک وب‌سایت دارد آشنا می‌شویم.

لوگو

لوگوی سایت معمولاً در اغلب لی‌آوت‌های طراحی در هدر صفحه وب قرار می‌گیرد.

هدر

هدر به بخش فوقانی صفحه وب گفته می‌شود. بسته به چیدمان صفحه وب، هدر می‌تواند شامل لوگوی شرکت، تگ‌لاین، تصویر، انیمیشن، اسلایدر و منوی ناوبری باشد.

بدنه وب‌سایت

بدنه (Body) وب‌سایت شامل محتوای متنی و دیگر مؤلفه‌های سایت از قبیل ماژول ورود کاربر خواهد بود.

پس‌زمینه

منوی ناوبری

فوتر

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

قطعه‌بندی

فایل PSD که ایجاد کرده‌اید، معمولاً از چند لایه مختلف تشکیل یافته است و باید قطعه‌بندی (Slice) شود. قطعه‌بندی یک اصطلاح فنی است که برای اشاره به تجزیه یک تصویر منفرد بزرگ به چند تصویر کوچک‌تر گفته می‌شود. یک مزیت استفاده از نسخه قطعه‌بندی‌شده PSD در صفحه HTML این است که صفحه‌ها سریع‌تر بارگذاری می‌شوند. اگر کل فایل PSD باید در یک فایل تصویر منفرد ارائه شود، بارگذاری صفحه مدت زیادی طول می‌کشد و می‌تواند روی تجربه کاربری تأثیر سوئی داشته باشد. برای قطعه‌بندی یک تصویر می‌توانید از ابزارهای متناسب در فتوشاپ بهره بگیرید.

در فتوشاپ سه گزینه برای قطعه‌بندی صفحه وب به اجزای کوچک‌تر تعبیه شده است که «نرمال» (Normal)، «نسبت ابعادی ثابت» (Fixed Aspect Ratio) و «اندازه ثابت» (Fixed Size) نام دارند. اگر از گزینه نرمال برای قطعه‌بندی فایل PSD استفاده می‌کنید، نسبت تصویر در زمان کشیدن خطوط قطعه‌بندی نمایش می‌یابند.

قطعه‌بندی به روش «نسبت ابعادی ثابت» اجازه می‌دهد که بخش‌های قطعه‌بندی شده بر اساس تصاویر عرضه شده تغییر ابعاد بدهند. برای نمونه اگر می‌خواهید عرض قطعه جدا شده را سه برابر بکنید کافی است عدد 3 را در فیلد عرض وارد کنید و ارتفاع را برابر با 1 تنظیم نمایید.

در حالتی که بخواهید همه قطعه‌ها دارای عرض و ارتفاع ثابتی باشند، باید از گزینه Fixed Size استفاده کنید. در این روش باید اندازه‌های مورد نیاز را بر حسب پیکسل خودتان وارد نمایید. یک روش دیگر برای قطعه‌بندی فایل PSD افزودن خطوط راهنما به تصویر با استفاده از گزینه در ابزار Slice است. زمانی که از این گزینه استفاده می‌کنید، فایل به طور خودکار بر اساس خطوط راهنماهایی که قرار داده‌اید برشش می‌یابد. به خاطر داشته‌ باشید که در زمان استفاده از این گزینه، اقدامات قبلی قطعه‌بندی که انجام داده‌اید خنثی می‌شوند.

زمانی که فایل PSD خود را قطعه‌بندی کردید، باید آن را ذخیره کنید. به این منظور به منوی فایل رفته و با استفاده از گزینه Save For The Web فایل را ذخیره کنید. این تصاویر را در دایرکتوری images که قبلاً ایجاد کره‌اید ذخیره نمایید.

ایجاد دایرکتوری‌های مورد نیاز

همواره بهتر است دایرکتوری‌های مورد نیاز را روی رایانه لوکال ایجاد کنید تا بتوانید به روشی سازمان‌دهی شده عمل کنید. فهرست این دایرکتوری‌ها به شرح زیر است:

• فولدر اصلی با نام وب‌سایت یا هر نام دیگری که در مراحل بعدی به آسانی آن را شناسایی کنید.
• یک پوشه درون پوشه اصلی برای درج تصاویر که نام آن را images می‌گذاریم. این پوشه جایی است که همه عکس‌هایی که در وب‌سایت استفاده می‌شوند را در آن قرار می‌دهیم.
• یک پوشه برای قرار دادن فایل‌های CSS استایل‌شیت‌ها درون پوشه اصلی که نام آن را styles می‌گذاریم.

کار با صفحه HTML

زمانی که پوشه‌های مورد نیاز را ساختید، نوبت آن می‌رسد که صفحه HTML را ایجاد کنید. این کار شبیه به کنار هم قرار دادن قطعات یک پازل جورچین است. به این منظور می‌توانید از نرم‌افزارهای صفحه‌ساز مانند Dream Weaver استفاده کنید. فرض کنید که می‌خواهید صفحه اصلی وب‌سایت را ایجاد کنید. یک فایل جدید در Dream Weaver ایجاد کرده و نام آن را index.html بگذارید و در پوشه اصلی ذخیره کنید.

گام بعدی ایجاد فایل استایل‌ها است. این کار را می‌تواند در خود Dream Weaver انجام دهید و یک فایل جدید به نام style.css در پوشه CSS ایجاد کنید. ما باید یک استایل‌شیت ایجاد کنیم که همه اطلاعات مرتبط با استایل‌بندی صفحه وب از قبیل اندازه فونت، رنگ پس‌زمینه، موقعیت قرارگیری تصاویر، حاشیه‌ها و غیره را در اختیارمان قرار دهد.

استایل‌شیت CSS باید به صفحه HTML لینک شود تا استایل‌های موردنظرتان در این صفحه بازتاب یابند. بنابراین نام صفحه را در تگ title قرار دهید و استایل‌شیت را با استفاده از تگ link لینک کنید. اطمینان حاصل کنید که تگ صحیح را در href وارد کرده‌اید.

اینک شروع به کار با استایل‌شیت می‌کنیم. در آغاز کار، کلاس و Wrapper را تعریف می‌کنیم. به فایل فتوشاپ بروید، کد رنگ پس‌زمینه را بردارید و آن را به فایل CSS اضافه کنید. این فایل باید بخشی از هدر در CSS باشد. به صفحه HTML که قبلاً تحت نام index.html ذخیره کرده‌اید بروید. بخش هدر را در صفحه HTML تعریف کنید. این کار باید درون تگ انجام گیرد. Wrapper را درون تگ هدر با تعریف کلاس wrapper ایجاد کنید.

اگر فایل ‌PSD را قبلاً قطعه‌بندی نکرده‌اید، اینک زمان آن است که کمر همت ببندید و این کار را به انجام برسانید. بخش لوگو را قطعه‌بندی کرده و در فایلی به نام logo.jpg در پوشه عکس‌ها ذخیره کنید. از تگ عکس برای درج لوگو در صفحه HTML استفاده کنید. کلاس مناسب تصویر را انتخاب کنید که در این مورد کلاس logo است.

قبل از این که این کار را فراموش کنید به فایل CSS رفته و این کلاس را در استایل‌شیت تعریف کنید. در CSS مقدار padding مناسب را برای موقعیت‌یابی درست لوگو اضافه کنید. فاصله لوگو را از بالا و سمت چپ صفحه می‌توانید در فایل PSD مشاهده کنید.

یک کلاس جدید در فایل CSS ایجاد کرده و کاری کنید که لوگو در سمت راست float شود. همچنین عرض صفحه را روی مقدار 920px تنظیم کنید. به صفحه HTML بازگردید. یک بخش جدید با استفاده از همان نام کلاس در آخر که در CSS داشتیم ایجاد کنید.

دوباره به فایل CSS بروید و یک کلاس جدید برای لینک‌های فوقانی روی صفحه ایجاد کنید. این کلاس را به صورت Float:right تنظیم کنید. موقعیت لینک‌ها را از بالا بر مبنای فایل PSD محاسبه کرده و این اعداد را در CSS ذکر کنید.

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

با این فرض که یک بخش لینک‌های فوقانی در صفحه خود دارید، متن لینک فوقانی را از فایل PSD برداشته و در HTML قرار دهید. این کار باید به نوبه خود در CSS نیز اعلان شود و اندازه فونت، رنگ فونت، padding و غیره مشخص شوند. هایپرلینکی برای لینک فوقانی ایجاد کنید. همواره کارهایتان را به طور مرتب ذخیره کنید تا بر اثر بروز مشکلی کارهایی که ذخیره نشده‌اند از دست نروند.

مرحله بعدی در فرایند تبدیل PSD به HTML، ایجاد منوی ناوبری است. برای ایجاد منوی ناوبری باید یک لیست نامرتب در صفحه HTML ایجاد می‌کنیم. همه این صفحه‌ها را در لیست نامرتب قرار دهید. برای مثال موارد زیر چیزهایی هستند که معمولاً در این منوها قرار می‌گیرند:

Home, About Us, Services, Why Choose Us, Blog and Contact Us

به فایل CSS بروید و خصوصیت‌های استایل‌بندی را به منوی ناوبری اضافه کنید. یک عامل مهم که باید به خاطر بسپارید تعیین مقدار text decorations:none است. اگر این کار را فراموش کنید استایل‌بندی پیش‌فرض روی لینک‌ها اعمال می‌شود یعنی رنگ آن‌ها آبی و فونت زیرخط دار را می‌بینید. این امر موجب تأثیر سوئی روی طراحی، جنبه زیبایی‌شناختی و طرح رنگی وب‌سایت می‌شود. حاشیه و فاصله‌گذاری لازم را به آیتم‌های منوی ناوبری اضافه کنید. خانواده فونت را نیز تعریف کنید، چون در غیر این صورت از فونت پیش‌فرض استفاده می‌شود که احتمالاً با طراحی و تم شما تناسبی نخواهد داشت.

بهترین رویه‌های تبدیل PSD به HTML

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

نخستین حوزه‌ای که شایسته توجه زیادی است، بحث DOCTYPE است. اعلان نادرست DOCTYPE موجب بروز مشکلاتی در نمایش صفحه وب شما می‌شود. شما باید به مرورگر اعلام کنید که نوع کدنویسی HTML که استفاده کرده‌اید چیست تا این مرورگرها بتوانند فایل شما را به درستی نمایش دهند.

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

اندازه فایل‌های قطعه‌بندی شده را بررسی کنید. این اندازه‌ها را در محدوده معقولی حفظ کنید. اگر اندازه فایل بیش از حد بالا باشد، صفحه‌های وب زمان بیشتری برای بارگذاری نیاز خواهند داشت. بنابراین در زمان قطعه‌بندی فایل PSD باید توجه ویژه‌ای به این موضوع داشته باشید که عکس‌ها با اندازه‌های بسیار متفاوت برش نیابند و همچنین ملاحظات اندازه فایل نیز نادیده گرفته نشوند. همچنین تلاش کنید فایل HTML را تا حد امکان سبک حفظ کنید. زمانی که کدهای غیرضروری و تگ‌های درون‌خطی CSS را وارد فایل HTML می‌کنید، موجب سنگین شدن آن می‌شوید. اجتناب از استفاده از تگ‌های درون‌خطی CSS یکی از بهترین رویه‌ها در زمان تبدیل PSD به HTML است.

از شلخته کاری در کد اجتناب کنید. همواره از نام‌های کلاس کاملاً مشخص استفاده کنید تا در مراحل بعدی که نیاز به ادیت CSS خواهید داشت به سادگی بتوانید کارکردهای هر کدام را تشخیص دهید. برای هر تصویری که اضافه می‌کنید از خصوصیت alt بهره بگیرید. خصوصیت‌های alt مهم هستند زیرا اگر به هر دلیلی تصویر بارگذاری نشد، خصوصیت‌های alt می‌توانند سرنخی در مورد محتوای گرافیکی در اختیار بیننده قرار دهند.

از یک سنت استاندارد نام‌گذاری برای فایل‌ها استفاده کنید. در واقع باید از نام‌گذاری تصادفی فایل‌ها مانند pic1 و pic2 یا right1 و right2 اجتناب کنید، چون در این روش نمی‌توانید محتوای تصویر را بی‌درنگ با نگاه کردن به نام آن درک کنید و از نظر سئو نیز مناسب نیست. همچنین از کاراکترهای خاص در نام‌گذاری فایل‌ها استفاده نکنید. همواره از فونت‌های استاندارد بهره بگیرید. استفاده از فونت‌های نامعمول ممکن است در مواردی که این فونت روی رایانه رندر کننده صفحه وب موجود نباشند، روی یکپارچگی طراحی صفحه وب تأثیر منفی بگذارد.

پروژه عملی تبدیل PSD به HTML

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

برای شروع این فایل PSD (+) را دانلود کنید. همچنین برای ادیت کد نیاز به یک ادیتور دارید که می‌توانید از sublime، Vscode و یا هر ادیتور دیگری که در کار با آن احساس راحتی می‌کنید بهره بگیرید. ابتدا طراحی که برای دانلود ارائه شده را در فتوشاپ باز کنید.

یک دایرکتوری جدید با نام پروژه ایجاد کنید که داخل آن دو دایرکتوری دیگر به نام CSS برای قرار دادن فایل‌های استایل‌شیت و دیگری به نام images برای قرار دادن تصاویر ایجاد می‌کنیم.

در ادامه ادیتور کد را باز کرده و دو فایل ایجاد کنید. فایل اول به نام index.html است که فایل اصلی وب‌سایت محسوب می‌شود و باید در ریشه دایرکتوری قرار داشته باشد. یک فایل دیگر نیز به نام style.css ایجاد می‌کنیم که درون دایرکتوری CSS قرار می‌گیرد. این همان فایلی است که استایل‌های مورد نیاز چیدمان صفحه را در آن می‌نویسیم. پس کدهای HTML درون فایل index.html و کدهای CSS در فایل style.css نوشته می‌شوند. اکنون شروع به نوشتن کد نمونه در فایل index.html می‌کنیم. این کد برای اغلب پروژه‌های قطعه‌بندی HTML مناسب است:

در کد فوق خط <!doctype html> را داریم که به مرورگر اعلام می‌کند که این یک کد HTML5 است. عنوان صفحه درون تگ <title></title> قرار گرفت است و فایل با نام style.css نیز که در دایرکتوری CSS قرار دارد اتصال یافته است. اکنون رکورد زیر را داریم:

در کد چنین چیزی را می‌بینیم:

این بخش ضروری است زیرا موجب می‌شود که تگ‌های HTML5 در مرورگرهای قدیمی از قبیل اینترنت اکسپلورر 8 یا قدیمی‌تر نیز کار کنند. اگر نیازی به پشتیبانی از این مرورگرها ندارید، می‌توانید این کد را حذف کنید. در ادامه کد درون تگ‌های <body> و </body> را داریم.

اکنون اگر فایل index.html را درون مرورگر باز کنیم با عبارت متنی Sample text مواجه می‌شویم. در بخشش فوقانی یک نوار سیاه رنگ به همراه لوگو و منوی ناوبری وجود دارد که می‌توان آن را header. نامید. سپس یک بلوک با تصویری بزرگ و یک متن تبلیغاتی وجود دارد که آن را hero. می‌نامیم. سپس یک ناحیه خالی وجود دارد که محتوای اصل در آن قرار می‌گیرد. این بخش را نیز middle. می‌نامیم، اما شما می‌توانید هر عنوانی که مفید می‌دانید روی آن بگذارید. در نهایت بلوک.footer را داریم.

همه محتوای صفحه به صورت «مرکرگزا» (centered) تنظیم شده است. دو بلوک نخست و همچنین فوتر به اندازه کل عرض صفحه کشیده می‌شوند. محتوای اصلی روی پس‌زمینه سفید میانی نیز دارای عرضی برابر با نواحی کشیده شده است. از آنجا که بلوک‌های دارای محتوا و نه بلوک‌های بصری (پس‌زمینه و تصویر قهرمان) دارای عرض یکسانی هستند، می‌توانید از کانتینرهایی با عرض یکسان برای مرکزگرا کردن آن‌ها بهره بگیرید. کار خود را با کدنویسی HTML بلوک‌های اصلی آغاز می‌کنیم:

به این نواحی مقداری استایل اضافه می‌کنیم. ابتدا از ابزار Eric Meyer (+) برای ریست کردن همه مشخصه‌های تگ بهره می‌گیریم. کافی است کد را کپی کرده و در ابتدای فایل CSS قرار دهید. سپس کدهای CSS زیر را اضافه می‌کنیم:

اکنون با استفاده از کد زیر، زیرخط‌ها را لینک‌ها حذف می‌کنیم، چون در طراحی ما چنین حالتی ندارند:

در این بخش از فرایند تبدیل PSD به HTML فتوشاپ را باز کرده و عرض محتوای اصلی را اندازه‌گیری کنید. به این منظور کافی است از ابزار Rectangular Marquee Tool بهره بگیرید یا کلید میانبر M را بزنید.

در پنل اطلاعات یا با جابجایی کرسر ماوس روی بخش مورد نظر می‌بینید که عرض آن برابر با 1140 پیکسل است. اکنون ما عرض بلوک.container را می‌دانیم. اگر نگاهی دقیق‌تر به طراحی داشته باشید، متوجه خواهید شد که هدر و فوتر دارای بافت شطرنجی مشابهی در پس‌زمینه هستند. با زدن کلیدهای Ctrl+H گرید را غیرفعال کرده و زوم کنید تا این عناصر تکراری بافت را مشاهده کنید. با زدن کلیدهای Ctrl+Shift+C می‌توانید آن را به کلیپ‌بورد کپی کنید.

در ادامه فرایند تبدیل PSD به HTML سند جدیدی ایجاد کنید بافت را در آن کپی نمایید. با زدن کلیدهای Ctrl+Alt+Shfit+S این فایل را برای وب ذخیره کنید. از پریست JPEG استفاده کنید، کیفیت را روی 60% قرار دهید و روی Save کلیک کنید. در کادری که باز می‌شود، پوشه images را انتخاب کرده و نام تصویر را bg-texture.jpg بگذارید. سپس ابزار Eyedropper را برداشته و روی فوتر کلیک کنید. اکنون کد رنگ بلوک‌های تیره را در اختیار دارید و می‌توانید در استایل‌ها وارد کنید تا این نواحی تا زمانی که تصویر هنوز آپلود نشده است، به رنگ تیره مورد نظر دربیایند.

اندازه‌ها را در CSS وارد کنید:

اینک اگر مرورگر را رفرش کنید، نتیجه‌ای مانند زیر می‌بینید:

متن در نواحی تیره سفید است، زیرا از مشخصه color: #fff استفاده کرده‌ایم. در ادامه تصویر را از بلوک.hero ذخیره کنید. کافی است لایه دارای تصویر را انتخاب کرده و همزمان با گرفتن کلید Alt روی آیکون چشم کلیک کنید.

لایه مفقود دارای تصویر را انتخاب کنید. ناحیه تصویر مورد نیاز را انتخاب کرده و با عنوان bg-hero.jpg ذخیره کنید

ارتفاع تصویر ذخیره شده (که 465 پیکسل است) را اندازه‌گیری کرده و در مشخصه‌های تصویر در CSS قرار دهید:

اکنون تصویر را اضافه کرده‌ایم و در میانه بلوک قرار داده‌ایم. مشخصه ;background-size: cover به مرورگر اعلام می‌کند که تصویر پس‌زمینه را تا بیشینه اندازه آن چه ارتفاع و چه عرض باشد، بکشد. اکنون تصویری مانند زیر را در مرورگر می‌بینید:

در این بخش از تبدیل PSD به HTML به کدنویسی عناصر هدر می‌پردازیم لوگو را در قالب PNG24 ذخیره کرده و نام آن را logo.png بگذارید. پس کد مربوط به هدر را در فایل HTML بنویسید:

ما از کلاس slogan. برای شعار سایت استفاده کردیم و ناوبری را به صورت یک لیست از لینک‌ها که درون تگ nav در HTML5 قرار گرفته اضافه نمودیم. اکنون صفحه وب ما در مرورگر به صورت زیر درآمده است:

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

مشخصه ;float: left برای قرار دادن عناصر در یک جا و سازمان‌دهی بیشتر ضروری است. اکنون شعار سایت را استایل‌بندی می‌کنیم.

ما از خانواده فونت Times New Roman و اندازه 16 استفاده می‌کنیم و از استایل italic و رنگ سفید با شفافیت 45% بهره گرفته‌ایم.

در این بخش از تبدیل PSD به HTML منوی ناوبری را استایل‌بندی می‌کنیم. هر عنصر آیکون ناوبری خاص خود را دارد. برای کاهش زمان لازم برای بارگذاری صفحه، یک sprite (ترکیبی از چند تصویر) برای آیکون‌ها ایجاد می‌کنیم. به این ترتیب مرورگر به جای چند تصویر، تنها یک تصویر را بارگذاری می‌کند. به این منظور یک سند جدید در فتوشاپ ایجاد کنید و همه آیکون‌ها را روی آن بکشید.

این فایل را با نام nav-icons.png ذخیره کنید. گام بعد در فرایند تبدیل PSD به HTML نوشتن کد CSS برای منو است. ما باید ناوبری nav. را با استفاده از کد ;float: right در سمت راست قرار دهیم، چون یک لیست است و آیتم‌هایش به طور پیش‌فرض به طور عمودی چیدمان می‌یابند. سپس باید این آیتم‌ها را درون مشخصه قرار دهیم. هر آیتم منو یک حاشیه خاکستری در سمت چپ خود دارد و از این رو برای هر عنصر از مشخصه‌های ;border-left: 1px solid #2c323d استفاده می‌کنیم:

نتیجه چیزی مانند تصویر زیر است:

چنان که می‌بینید، همه عناصر در جای خود قرار گرفته‌اند، اما پس‌زمینه هدر همچنان موجود نیست. دلیل این امر آن است که float روی عناصر درون هدر درست تنظیم نشده است. این کار به یک اصلاً کوچک نیاز دارد که به نام clearfix شناخته می‌شود. این مشخصه را روی همه عناصر container. اعمال می‌کنیم، زیرا عنصر والد آن‌هایی است که float را برایشان تنظیم کرده‌ایم.

اکنون همه چیز درست شده است:

در این بخش به استایل‌بندی عناصر منو می‌پردازیم. به لینک‌ها رنگ سفید می‌دهیم، حاشیه را تعیین کرده و زیرخط را نیز از لینک‌ها حذف می‌کنیم:

خانواده فونت منو را نیز تعیین می‌کنیم. اگر روی لینک کلیک کنید، می‌بینید که چنین فونتی در سیستم عامل وجود ندارد:

این وضعیت مشکلی ایجاد نمی‌کند. ما از فونت Open Sans استفاده کرده‌ایم که می‌توانید آن را در دایرکتوری فونت گوگل (+) پیدا کنید. زمانی که فونت را یافتید روی دکمه‌های زیر کلیک کنید:

سپس روی متن‌های موجود در طراحی کلیک کرده و lettering و ضخامت را تعریف کنید:

در این بخش گزینه‌های normal, semi-bold و bold را داریم.

زبان را انتخاب کرده و کد را از گام 3 کپی کنید:

این کد را در تگ <head> قرار دهید:

اکنون می‌توانید از این فونت در CSS با استفاده از کد زیر بهره بگیرید:

از آنجا که این فونت بر اساس طراحی فونت اصلی صفحه و منو است، می‌توانید این خانواده فونت را برای کل سند به کار بگیرید. همچنین می‌توانید رنگ اصلی و اندازه 16 را برای متن موجود در سند تنظیم کنید.

مرورگر را رفرش کنید تا به‌روزرسانی‌ها را مشاهده کنید. چنان که می‌بینید فرایند تبدیل PSD به HTML و کدنویسی صفحه چندان هم پیچیده نیست!

اکنون حالت hover را برای لینک منو تعریف می‌کنیم.

اینک دکمه‌ها را اضافه می‌کنیم. به این منظور کافی است مشخصه ;position: relative را به تگ اضافه کنیم و آیکون‌ها را با یک «شبه‌عنصر» (pseudo-element) رندر کنیم:

پارامترهای اندازه و موقعیت آیکون مورد نظر را برای هر لینک تعیین کنید. به این منظور می‌توانید از این ابزار (+) کمک بگیرید. کافی است تصویر را آپلود کنید و روی آیکون کلیک کنید تا اندازه و موقعیت آن را در اسپرایت پیدا کنید.

مقادیر مورد نیاز را کپی کرده و در CSS قرار دهید:

اکنون منوی زیر را در مرورگر خود ملاحظه می‌کنید:

کار خود را با بخش hero. ادامه می‌دهیم. محتوای این بلوک را به HTML اضافه می‌کنیم. در این بخش یک هدلاین، یک پاراگراف متنی و دو دکم با استایل یکسان اما رنگ‌های مختلف داریم. کد HTML به صورت زیر است:

اکنون استایل‌های هدر و پاراگراف را می‌نویسیم. اندازه و ضخامت متن و همچنین تورفتگی و ارتفاع‌ها را در فتوشاپ اندازه‌گیری کنید. از آنجا که همه متن موجود در بلوک سفید رنگ است و در مرکز قرار دارد باید مشخصه‌های color: #fff و ;text-align: center را روی کلاس hero. اضافه کنید:

اکنون به بررسی روش ایجاد دکمه‌ها می‌پردازیم. این دکمه‌ها با استفاده از یک تگ <a> با کلاس عمومی btn. ساخته شده‌اند که استایل عمومی برای آن می‌نویسیم. کلاس مرتبط btn-green. و btn-blue. نیز برای هر رنگ ایجاد شده است:

برای ایجاد گوشه‌های گرد از border-radius استفاده می‌کنیم و با استفاده از box-shadow یک سایه به بخش تختانی حاشیه اضافه می‌کنیم:

در این مرحله از فرایند تبدیل PSD به HTML فوتر را ایجاد می‌کنیم. به این منظور تگ nav. را با کلاس footer-nav. به ناوبری اختصاص می‌دهیم. ستون‌های جدیدی را با column. اضافه می‌کنیم. سپس برای هر کدام یک عنوان به صورت یک div و یک کلاس title. و یک لیست از لینک‌ها اضافه می‌کنیم:

حاشیه‌هایی در ابتدا و انتهای فوتر اضافه کرده و عنوان و لیست را استایل‌بندی می‌کنیم:

در این وهله از تبدیل PSD به HTML آیکون‌های شبکه‌های اجتماعی را اضافه می‌کنیم. شما می‌توانید آن‌ها را به شکل تصویر برش داده و در کد قرار دهید و یا از تصاویر پس‌زمینه برای لینک‌ها استفاده کنید، اما استفاده از روش فونت آیکون بهتر است. به این منظور از این ابزار تولید آیکون (+) استفاده می‌کنیم.

آیکون‌هایی که لازم دارید را انتخاب کنید، اندازه، رنگ و دنباله خروجی را تعیین کنید. حالت hover را انتخاب کرده و Button Color را روی transparent تنظیم کنید. سپس روی دکمه socicon.zip دانلود کنید تا فایل‌ها دانلود شوند. اکنون باید یک دایرکتوری برای فونت‌ها ایجاد کنید و فایل‌ها را درون آن استخراج نمایید. در ادامه کد را کپی کرده و درست پس از تگ nav.footer-nav قرار دهید. آیکون‌ها را طوری تغییر اندازه بدهید که در soc li a. با طراحی اولیه تطبیق یابند.

در این بخش از تبدیل PSD به HTML کپی‌رایت را اضافه می‌کنیم. یک بخش جدید به صورت div.copyright اضافه کرده و محتوا را داخل آن قرار می‌دهیم:

در سکشن ul.soc یک حاشیه تحتانی به صورت ;margin:0 0 79px اضافه می‌کنیم. اینک صفحه ما به صورت زیر درآمده است:

اکنون در فرایند تبدیل PSD به HTML زمان آن رسیده که سه بلوک بزرگ میانه صفحه را ایجاد کنیم:

اگر این بلوک‌ها را به دقت بررسی کنید، متوجه خواهید شد که هر سه در واقع یک بلوک هستند که محتوای آن‌ها متفاوت است. از این رو باید یک بلوک ایجاد کرده، آن را استایل‌بندی کنیم و سپس از آن کپی گرفته و با محتوای مورد نیاز پر کنیم. ما تصاویر موجود در این بلوک‌ها را در قالب jpg ذخیره می‌کنیم. حاشیه هر بلوک و حاشیه کلی سه بلوک در بخش تحتانی با استفاده از CSS ایجاد می‌شوند. اگر عکس‌ها شفاف نباشند، همواره می‌توان آن‌ها را در قالب JPG ذخیره کرد و به این ترتیب حجم کمتری اشغال می‌کنند و کیفیت نسبتاً مناسبی نیز خواهند داشت. به عنوان یک قاعده کلی نسبت فشرده‌سازی 60% غالباً کفایت می‌کند. تنها در صورتی به نسبت فشرده‌سازی 70 یا 80% نیاز خواهید داشت که روی عکس متن موجود باشد و بخواهد آن را به صورت تصویر ذخیره کنید.

تصاویر بزرگ بالایی به صورت photo1, photo2 و غیره نام‌گذاری شده‌اند. اکنون کد HTML را نوشته و تصاویر ذخیره شده را درون آن قرار می‌دهیم. به این منظور div.blocks را ایجاد کرد و درون بلوک‌ها قرار می‌دهیم. نمونه‌ای از یکی از بلوک‌ها به صورت زیر است:

در این مرحله باید float:left را به بلوک‌های درونی اضافه کنیم تا آن‌ها را به صورت افقی هم‌راستا بسازیم و clearfix را نیز همانند روشی که قبلاً استفاده کردیم، به کار بگیریم. به این منظور به ابتدای CSS بازمی‌گردیم و عنصر را می‌نویسیم:

اکنون عرض بلوک‌ها و حاشیه‌های بین آن‌ها را در فتوشاپ اندازه‌گیری می‌کنیم عرض آن‌ها 351 پیکسل و حاشیه سمت راست 43 پیکسل است. از آنجا که تنها یک ردیف بلوک وجود دارد، بهتر است حاشیه چپ را نیز تعیین کنیم و آن را برای بلوک اول با استفاده از سلکتور first-child غیرفعال کنیم.

در این مرحله از تبدیل PSD به HTML مشخصه margin-bottom: 75px to div.blocks را اضافه کنید. یک حاشیه برای بلوک‌های div.block اضافه کرده و لبه را تنظیم کنید. می‌توانید اندازه مارجین و رنگ حاشیه را از فایل فتوشاپ بگیرید. از آنجا که بلوک‌ها گوشه‌های گرد دارند، باید border-radius مورد نیاز را تعریف کنید. همچنین از مشخصه ertical-align: top; برای حذف حاشیه غیرضروری دکمه از تصاویر استفاده کنید.

حاشیه تحتانی بلوک دارای تصاویر افراد را روی 13 پیکسل تنظیم کنید. در بلوک person. تصویر را به صورت float: left تنظیم کنید و منو را به سمت راست ببرید. سپس clearfix را طوری تنظیم کنید که بلوک به هم نریزد. رنگ و اندازه فونت را نیز تنظیم نمایید:

اینک کار ما در زمینه تبدیل PSD به HTML تقریباً به پایان رسیده است.

برای افزودن استایل‌های اضافی به بلوک‌های تحتانی باید از شبه‌سلکتور:after و:before استفاده کنیم. می‌توانید این موارد را روی blocks. به کار گیرید و موقعیت را در انتها تنظیم نمایید. به این منظور کد زیر را ;block position: relative اضافه کنید:

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

تصاویر مربعی فایل فتوشاپ را برش داده و با مشخصه border-radius: 50% به شکل دایره دربیاورید. تاریخ با استفاده از تگ <time> ایجاد می‌شود و عنوان درون <div> نوشته می‌شود. یک پاراگراف نیز با تگ <p> ساخته خواهد شد.

برای برش تصویر مربعی که با استفاده از ماسک در طراحی به دایره تبدیل کرده‌ایم باید کارهای زیر را انجام دهید. ابزار Move را بردارید و تیک گزینه‌های Auto-Select و Layer را بزنید.

سپس روی تصویر گرد کلیک کرده و آن را در پنل Laysrs انتخاب کنید.

ناحیه مورد نیاز تصویر را به دقت انتخاب کنید. تصویر باید همان اندازه ناحیه انتخاب را داشته باشد.

کلیدهای Ctrl + C و سپس کلیدهای Ctrl + N را بزنید تا یک سند جدید ایجاد شود و سپس با زدن کلیدهای Ctrl + V تصویر را در آن بچسبانید. با زدن کلیدهای Alt + Shift + Ctrl + S تصویر را برای وب و با فرمت jpg ذخیره کنید. بهتر است نام تصاویر را مانند بلوک‌ها بگذارید. برای نمونه عنوان news1.jpg مناسب به نظر می‌رسد. همین اقدامات را برای دو تصویر دیگر نیز تکرار کنید.

کد یکی از بلوک‌ها را بنویسید. نام بلوک والد را div.news گذاشته و هر یک از آیتم‌های خبری را div.news بنامید. یک boarder به میزان 2 پیکسل به بلوک اصلی بدهید و margin انتهایی را اضافه کرده و clearfix را نیز بیفزایید. اکنون کد HTML باید به صورت زیر باشد:

کد CSS نیز چنین است:

در نهایت نتیجه به صورت زیر خواهد بود:

این یک بخش جدید است و از این رو می‌توانید لینک‌هایی به تصاویر نیز اضافه کنید. بخش بعدی که روی آن کار می‌کنیم Featured on: است. از <ul> برای لیستی از تصاویر و از یک <div> معمولی با کلاس title. برای یک هدر کوچک استفاده می‌کنیم. بر اساس طراحی، لوگوها دارای حالت hover هستند و حالت اولیه آن‌ها به صورت شفافیت 50% است. با این حال در زمان ذخیره کردن باید شفافیت را روی 100% تنظیم کنیم که موجب از دست رفتن شفافیت می‌شود. در markup این شفافیت را با تنظیم مشخصه opacity به دست می‌آوریم. شما می‌توانید لوگوها، آیکون‌ها و دیگر عناصر غیر عکس را در قالب png ذخیره کنید تا مطمئن شوید که تصاویر بالاترین کیفیت را خواهند داشت.

کد HTML به صورت زیر است:

کد CSS ‌نیز چنین است:

یک مارجین تحتانی برای بلوک‌های news. و featured. ایجاد می‌کنیم. اکنون کارمان به پایان رسیده است. مرورگر را رفرش کنید تا ببینید که وب‌سایت ما اکنون دقیقاً همانند طراحی PSD است. اکنون با افزودن زیرخط به صورت حالت hover برای لینک‌ها و جزییات ظریف روی تصاویر و لینک‌های منو کمی به آن جان می‌بخشیم.

زیرخط‌ها را از حالت hover ناوبری و دکمه‌ها در بلوک hero. حذف کنید. یک شفافیت اندک به حالت‌های hover دکمه اضافه کنید:

اینک همه چیز آماده است و شما به صورت عملی با فرایند تبدل PDF به HTML آشنا شدید.

سخن پایانی

امیدواریم این راهنمای تبدیل PSD به HTML برای شما مفید بوده باشد. در انتهای این راهنما باید اشاره کنیم که فتوشاپ تنها روش برای طراحی ماکاپ‌های وب‌سایت نیست و امروزه نرم‌افزارهای زیادی از جمله فیگما، اسکچ، وب فلو و غیره به این منظور ارائه شده‌اند که در بسیاری موارد بهتر از فتوشاپ انجام وظیفه می‌کنند چون اصولاً فتوشاپ به منظور دیگری طراحی شده است. با این حال این راهنما برای کسانی که می‌خواهند همچنان از روش سنتی تبدیل PSD به HTML و CSS استفاده کنند راهگشا خواهد بود.