راهنمای تبدیل PSD به  HTML

عصر تکنولوژی حال حاضر دائماً در حال تغییر و پیشرفت است. این امر مستلزم آن است که ما هم بتوانیم کارهای مختلف را با تکنیک های مدرن و در زمان کمتر انجام دهیم. طراحی یک سایت نیز که مهم ترین مهره برای افزایش حضور آنلاین کسب و کارهای بزرگ و کوچک است، از این قاعده مستثنی نیست. تکنیک های مدرن و سریع زیادی برای طراحی سایت وجود دارد. اما یکی از این تکنیک ها، تبدیل فایل های PSD به کدهای HTML است. با این کار می توانید تصاویر استاتیک را به یک رابط تعاملی واقعی تبدیل کنید. اما شیوه کلی انجام این کار به چه ترتیب است؟ در این آموزش ما را همراهی کنید تا با هم فرآیند تبدیل PSD به HTML را بررسی کنیم.فرایند کلی تبدیل PSD به HTML چگونه است؟به طور کلی فرآیند تبدیل یک فایل با فرمت PSD به کدهای HTML از نقطه شروع تا پایان به این ترتیب است: ابتدا طرح هایی را در فتوشاپ ایجاد و ادیت می کنیم. سپس این تصاویر را به شکلی منطقی برش می دهیم و از هم جدا می کنیم. در نهایت آنها را میان کدهای HTML می گنجانیم تا در بخش های مشخصی از سایت نمایش داده شوند.در کدام قسمت های سایت می توانیم از فایل های PSD استفاده کنیم؟فایل های PSD در واقع گرافیک های بصری هستند که در جای جای سایت استفاده می شوند. مهم ترین بخش هایی از سایت که می توان فایل های PSD را در آنها قرار داد، شامل موارد زیر می شوند:· هدر: هدر بالاترین بخشی است که در سایت دیده می شود. این بخش می تواند شامل لوگو، تصویر، اسلایدر، انیمیشن، منوی ناوبری و ... باشد.· لوگو: لوگوی سایت که معمولاً در هدر قرار می گیرد.· بدنه سایت: این بخش نیز مربوط به محتوای بدنه صفحات مختلف سایت می شود.· فوتر: که پایین ترین بخش سایت است و معمولاً شامل آیکون های شبکه های اجتماعی، اطلاعاتی کلی و عمومی درباره سایت و ... می شود.روش های تبدیل PSD به HTMLبه طور کلی 3 روش برای تبدیل یک فایل PSD به کدهای HTML وجود دارد. این روش ها عبارت اند از:1. استفاده از ابزارهای تبدیل خودکار2. استفاده از یک فریم ورک سمت کاربر3. کدنویسی دستی فایل های HTMLهر یک از این روش ها دارای معایب و مزایای ویژه خود هستند. بنابراین شما باید بر اساس نیازها و همینطور توانایی هایی که دارید، مسیر ایده ال خود را انتخاب کنید. در ادامه این 3 روش را بیشتر باز می کنیم.استفاده از نرم افزارهای تبدیل PSD به HTMLدر اولین روش به نسبت روش های دیگر، نیاز کمتری به دانش کدنویسی و آشنایی با کدهای HTML دارید. در این روش می توانید از ابزارهای آماده مختص تبدیل PSD به HTML استفاده کنید؛ مانند نرم افزار HTML Butcher. این نرم افزارها فایل PSDرا از شما می گیرند و کدهای HTML آنها را به شما تحویل می دهند. هر چند که این روش ساده ای محسوب می شود؛ اما طبیعی است که نمی توان دخالت چندانی در نتیجه داشت. در واقع امکان سفارشی سازی جزئیات در این روش چندان مهیا نیست.علاوه بر این، در این روش ممکن است پیکسل های فایل PSD به دقت و با جزئیات تبدیل نشود. این در حالی است که در روش کدنویسی دستی، پیکسل ها با دقت بیشتری به HTMLتبدیل می شوند.البته با همه این تفاسیر باز هم روش استفاده از یک ابزار برای تبدیل خودکار PSD به HTML می تواند در بسیاری از مواقع تصمیم درستی باشد. به ویژه زمانی که دانش و تخصص چندانی در نوشتن کدهای HTML نداریم.استفاده از یک فریم ورک سمت کاربراین روش به نسبت دو روش دیگر، بیشترین دانش را از کدنویسی سمت کاربر نیاز دارد. فریم ورک ها امروزه در همه حوزه های برنامه نویسی حرف اول را می زنند. فریم ورک در واقع چهارچوب هایی هستند که هم برنامه نویسی را راحت تر می کنند و هم خیال برنامه نویس را از بابت استاندارد و بهینه بودن کدها آسوده می کنند. وقتی قرار است فایل های PSD را تبدیل به کدهای HTML کنیم، باید کدهای بخش سمت کاربر (Front-end) را دستکاری کنیم. بنابراین در این روش باید از یک فریم ورک برای کدهای سمت کاربر استفاده کنیم.اما یک معضل بزرگ در این روش وجود دارد و آن، زمان و هزینه زیادی است که می طلبد. در واقع اگر خودتان نحوه کدنویسی در یک فریک ورک برای سمت کاربر را بلد نباشید، باید از یک برنامه نویس متخصص کمک بگیرید.کدنویسی دستیروش سوم نیز روش راحتی است که نتیجه کاملاً خوب و قابل قبولی هم به دنبال خواهد داشت. در این روش کدهای HTML را دستکاری می کنیم و فایل های PSD خود را در آنها می گنجانیم. دقت کنید که در این روش نیز باید دانش قبلی نسبت به ساختار اصلی کدهای HTML داشته باشید تا بتوانید ضمن نوشتن کدهای HTML، فایل های PSD خود را در آنها جای دهید.در ادامه این روش را بیشتر بررسی کرده و مراحل کلی آن را به تفکیک بیان می کنیم.نحوه تبدیل PSD به HTML از طریق کدنویسی دستیوقتی از طرح هایی که در فتوشاپ دارید راضی بودید، مراحل زیر را طی کنید.مرحله اول: برش دادن طرح در فتوشاپدر اولین مرحله باید طرح های فایل PSDخود را در همان فتوشاپ به قسمت های کوچک تر تبدیل کنید. با این کار لود شدن این طرح ها در کدهای HTML نیز سریع تر خواهد بود.برای این کار ابزارهای برش متنوعی در فتوشاپ وجود دارند. برای مثال یکی از این ابزار، Slice tool است. پس طرح خود را به شکلی منطقی به کمک ابزارهای برش، از هم جدا کنید. بهترین ترتیبی که برای جدا کردن این طرح می توانید در نظر بگیرید، این است که کل طرح را به 3 بخش زیر تقسیم کنید:1. بک گراند2. هدر و بخش های جداکننده3. فوتر و باقی قسمت هاسپس از این طرح ها از مسیر Save for web<Export <File خروجی بگیرید.نکته: وقتی طرح های خود را با استفاده از Slice tool برش می دهید، بعد از این که از این مسیر از فایل خود خروجی می گیرید، بخش های مختلف به طور خودکار در فایل های جداگانه خروجی گرفته می شوند.مرحله دوم: ساخت پوشهبرای این که مدیریت و کنترل بهتری روی فرآیند تبدیل PSD بهHTML داشته باشید، یک پوشه جدید بسازید و فایل های جداگانه طرح های خود را که در مرحله قبل خروجی گرفتید، در آن قرار دهید. می توانید این پوشه را در پوشه حاوی فایل های اصلی سایت بسازید. برای نام آن نیز می توانید نام سایت را انتخاب کنید یا نام "images" را برای آن بگذارید.مرحله سوم: نوشتن کدهای HTMLحالا نوبت به ایجاد کدهای HTML می رسد. پس باید یک صفحه HTML جدید بسازید. برای این کار می توانید از یک صفحه ساز HTML مثل " Adobe Dreamweaver" استفاده کنید. اگر از این ابزار استفاده می کنید، یک فایل جدید با عنوان " index.html" بسازید و آن را در پوشه اصلی فایل های سایت خود ذخیره کنید.در فایل HTMLکه ساختید، کدها را با ترتیب زیر وارد کنید:1. Header: هدر سایت2. Hero: قسمت بزرگی که پایین هدر قرار می گیرد و می تواند شامل یک تصویر بزرگ و تمام صفحه باشد.3. Slideshow: برای نمایش محتواها به صورت اسلایدی.4. Content: محتوای بدنه صفحه شامل تصاویر، گزینه ها، متن و ... .5. Footer: فوتر سایت.مرحله چهارم: نوشتن کدهای CSSحالا که ساختمان اصلی صفحه خود را با کدهای HTML ساخته اید، می توانید به کمک کدهای CSS ظاهر این صفحه را بیشتر ادیت کنید. فرقی نمی کند که این کدها را داخل خود فایل HTML در بخش CSSها بنویسید یا در یک فایل جدا با نام " styles.css" در پوشه CSS قرار دهید.نکته: می توانید از کدهای جاوا اسکریپت نیز برای اضافه کردن قابلیت های حرفه ای و پویاتر به طرح خود استفاده کنید. با وارد کردن کدهای جاوا اسکریپت، در نهایت صفحاتی با قابلیت تعامل بسیار بیشتری خواهید داشت.تبدیل PSD به HTML در ودرپرسهمانطور که می دانید وقتی یک قالب را روی وردپرس خود نصب می کنید، یک سری پوشه به فایل های اصلی سایت تان اضافه می شود. هر یک از این پوشه ها شامل فایل های مشخصی هستند که متعلق به بخش های مختلف سایت هستند.حالا اگر از قالب های وردپرسی برای سایت خود استفاده می کنید و می خواهید فایل های PSD خود را داخل فایل های قالب خود بگنجانید، روش کلی انجام کار همان است. با این تفاوت که می توانید کدهای بخش های مختلف را در فایل های جداگانه قرار دهید.در پایانمهم ترین مرحله در فرآیند تبدیل PSD بهHTML کدنویسی و جای دادن فایل طرح های بصری در کدهاست. هر چند که طراحی این اِلِمان ها در فتوشاپ نیز ممکن است زمانبر باشند؛ اما نکته اینجاست که می توانید به جای طراحی عناصر جدید، از عناصری که در فضای وب موجودند، استفاده کنید. برای مثال مجموعه های بسیار متنوعی از انواع آیکون ها در منابع آنلاین مختلف در دسترس اند که می توانید همان ها را در فتوشاپ برش داده و وارد فایل های سایت خود کنید.این که آیا در مجموع تبدیل PSD به HTML این ارزش را دارد که برای آن وقت و احیاناً هزینه صرف کنید یا نه، به تعداد صفحات سایت، پیچیدگی های طرح های PSD، زمانی که در اختیار دارید و ... بستگی دارد. چرا که برای مثال اگر یک سایت صفحات زیادی داشته باشد، طبیعتاً وقت بسیار بیشتری را صرف خواهد کرد. در صورتی که اگر سایت مد نظر در ابتدای مسیر خود و متعلق به یک کسب و کار کوچک باشد، احتمالاً زمان و بودجه لازم برای انجام این کار موجود نیست.در هر صورت تبدیل PSD بهHTMLروشی است که به کمک آن می توانید طرح های بصری اختصاصی خود را داشته باشید و کنترل بیشتری بر کیفیت رابط کاربری و میزان تعامل بصری سایت با کاربران داشته باشید. امیدواریم این آموزش برایتان مفید واقع شده باشد.اگر به این دست مقالات علاقه دارید پیشنهاد می کنیم به مقالعه تبدیل قالب HTML به قالب وردپرس مراجعه کنید.این مقاله توسط تیم تحریریه ژاکت سرویس نوشته شده.