طرح فتوشاپ هنوز هم قابل تبدیل به HTML و وردپرس است؛ تفاوتش با فیگما، چالش‌های فایل PSD و کارهایی که قبل از ارسال باید انجام بدهی.
خیلی‌ها فکر می‌کنند با آمدن فیگما، طرح فتوشاپ دیگر به درد سایت نمی‌خورد. واقعیت این است که هنوز طراح‌های زیادی، مخصوصاً طراح‌های گرافیک و تبلیغات، طرح سایت را در فتوشاپ می‌کشند و آرشیو بزرگی از طرح‌های PSD در شرکت‌ها مانده که هیچ‌وقت کد نشده‌اند. خبر خوب: این طرح‌ها کاملاً قابل تبدیل‌اند. فقط باید بدانی چه تفاوتی با فیگما دارند.
PSD با فیگما چه فرقی دارد؟
فیگما برای طراحی رابط کاربری ساخته شده و خیلی از اطلاعاتی که برنامه‌نویس لازم دارد را مستقیم نشان می‌دهد: فاصله‌ها، رنگ‌ها، فونت‌ها و حتی رفتار بخش‌ها در اندازه‌های مختلف. فتوشاپ ابزار ویرایش تصویر است و طرح سایت در آن بیشتر یک «تصویر لایه‌لایه» است.
در عمل یعنی موقع تبدیل PSD:
- فاصله‌ها اندازه‌گیری می‌شوند، نه خوانده. باید با ابزار انتخاب، فاصله‌ی هر بخش را دقیق درآورد.
- رفتار ریسپانسیو حدس زده نمی‌شود، طراحی می‌شود. فایل PSD معمولاً فقط نسخه‌ی دسکتاپ دارد و نسخه‌ی موبایل باید بر اساس منطق طرح ساخته شود.
- افکت‌ها باید به CSS ترجمه شوند. سایه‌ها، گرادیان‌ها و حالت‌های ترکیب لایه در فتوشاپ گاهی معادل مستقیم در CSS ندارند و باید نزدیک‌ترین حالت ساخته شود.
برای همین تبدیل PSD معمولاً کمی بیشتر از فیگما زمان می‌برد، ولی نتیجه همان‌قدر دقیق است.
مراحل تبدیل PSD به HTML
۱. بررسی و مرتب‌سازی لایه‌ها
اول فایل را باز می‌کنم و ساختارش را می‌خوانم: گروه‌ها، لایه‌های مخفی، نسخه‌های قدیمی که پاک نشده‌اند. هر بخش صفحه، یعنی هدر، هیرو، خدمات و فوتر، باید مشخص باشد.
۲. استخراج دارایی‌ها
عکس‌ها، آیکون‌ها و تصویرسازی‌ها جدا می‌شوند. آیکون‌ها در صورت امکان به SVG تبدیل می‌شوند تا در هر اندازه‌ای تیز بمانند. عکس‌ها با فرمت WebP و چند اندازه‌ی مختلف خروجی می‌گیرند تا سایت سبک بماند.
۳. تعریف سیستم طراحی
رنگ‌ها، فونت‌ها و اندازه‌های تکراری از طرح درمی‌آیند و به متغیرهای CSS تبدیل می‌شوند. اگر طراح در دو جا دو رنگ خیلی نزدیک به هم استفاده کرده باشد، اینجا یکی می‌شوند تا ظاهر یکدست بماند.
۴. کدنویسی دسکتاپ و ساخت نسخه‌ی موبایل
صفحه با HTML معنایی و CSS تمیز ساخته می‌شود. بعد نسخه‌ی موبایل و تبلت بر اساس همان سیستم طراحی چیده می‌شود: ستون‌ها زیر هم می‌روند، فونت‌ها متناسب کوچک می‌شوند و منو به منوی کشویی تبدیل می‌شود.
۵. تعامل و جزئیات
هاور دکمه‌ها، منوی موبایل، اسلایدر و فرم‌ها با جاوااسکریپت سبک ساخته می‌شوند. چیزهایی که در یک تصویر ثابت دیده نمی‌شوند، مثل حالت فوکوس فیلدها یا پیام خطای فرم، طبق حال‌وهوای طرح طراحی می‌شوند.
قبل از فرستادن فایل PSD این کارها را بکن
- لایه‌ها را Rasterize نکن. متن‌ها باید متن بمانند تا فونت و اندازه‌شان خوانده شود.
- فونت‌ها را همراه فایل بفرست یا حداقل اسمشان را بنویس.
- Smart Objectها را نگه دار. اگر تصویرسازی یا آیکون به‌صورت Smart Object است، خروجی گرفتن از آن بی‌کیفیت نمی‌شود.
- نسخه‌ی نهایی را مشخص کن. اگر چند فایل یا چند Artboard داری، بگو کدام نهایی است.
- اگر نسخه‌ی موبایل نداری، بگو. ساخت نسخه‌ی موبایل از روی دسکتاپ کاملاً شدنی است، فقط باید از اول در قیمت و زمان حساب شود.
خیلی از این نکته‌ها همان‌هایی است که در چک‌لیست آماده‌سازی فایل فیگما آمده و برای PSD هم صدق می‌کند.
خروجی HTML یا وردپرس؟
اگر سایتت لندینگ یا سایت معرفی است و محتوایش کم عوض می‌شود، HTML خالص سریع‌ترین و ارزان‌ترین گزینه است. اگر می‌خواهی خودت متن‌ها و مقاله‌ها را عوض کنی، همان کد به قالب وردپرس تبدیل می‌شود. مراحلش را در تبدیل فیگما به وردپرس نوشته‌ام که برای PSD هم دقیقاً همان است.
جمع‌بندی
فایل PSD هنوز یک نقطه‌ی شروع کاملاً قابل‌قبول برای سایت است. کمی کار اندازه‌گیری و تصمیم‌گیری بیشتری دارد، ولی خروجی همان HTML تمیز، ریسپانسیو و سریع است. اگر طرح فتوشاپ داری، از صفحه‌ی تبدیل PSD به HTML جزئیات را ببین یا قیمت و زمان پروژه را همین حالا حساب کن.