روش تبدیل فایل psd به کد HTML

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

روش‌های تبدیل psd به html

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

کدنویسی دستی

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

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

امروزه ابزارهای خود کار برای تبدیل psd به html ایجاد شده‌اند. هرچند که این ابزارها کوشش بسیار خیر در این باره دارا هستند، ولی باز هم نمی‌قدرت از آن‌ها انتظار داشت که یک تبدیل به طور کامل دقیق (Pixel-Perfect) انجام دهند. البته در‌صورتی‌که کیفیت عمل برایتان اساسی نیست، می‎‌توانید تنها به سعی این ابزارها تکیه فرمائید. البته با یقین معدود‌تر کسی پیدا می‌گردد که چنین مرحله مهمی در ساخت سایت برایش اهمیت نداشته باشد!

چند نکته درمورد تبدیل psd به html

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

قطعه‌بندی

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

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

متخصصان این حوزه همواره توصیه می‌کنند که دایرکتوری موردنیاز بر روی رایانه لوکال تشکیل داد نمائید تا از این روش بتوانید به روش سازماندهی شده کار نمائید. فهرست دایرکتوری‌ها را در ذیل آورده‌ایم:

فولدر اصلی به نام وبسایت یا هر اسم دیگری که در نصیب‌های آینده به آسانی آن را بیابید.

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

یک فایل برای قرار دادن فولدر‌های CSS استایل صفحه‌ها داخل فولدر مهم که نام آن styles نهاده می‌گردد.

کار با شیت html

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

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