برای طراحی یک سایت اغلب گرافیست هایی که روی طراحی آن ها کار می کنند، نمونه و نتیجه کارهای خود را به صورت فایل های PSD که فرمت مخصوص فتوشاپ هست ارائه و در اختیار…
برای طراحی یک سایت اغلب گرافیست هایی که روی طراحی آن ها کار می کنند، نمونه و نتیجه کارهای خود را به صورت فایل های PSD که فرمت مخصوص فتوشاپ هست ارائه و در اختیار دیگران قرا می دهند. نکته مفیدی که این کار دارد این است که افراد متفاوت و یا صاحبان سایت به راحتی می توانند عناصر مختلف سایت را به صورت کاملا گرافیکی مشاهده کنند. پس از آن که کار طراحی تمام شد و فایل ها تحویل داده شدند، نوبت به افرادی می رسد که روی آن ها مار کنند و این طرح های گرافیکی را به کد تبدیل کنند. در این مطلب قصد داریم تا در مورد تبدیل طرح گرافیکی PSD به HTML، یکی از مراحل طراحی سایت صحبت کنیم. با رشدانا همراه باشید.
هنگامی که قصد تبدیل کردن طراحی‌های خود به صفحه‌های html را دارید، مسیر‌های متفاوتی پیش رو خواهید داشت. آشنایی کامل با این موارد، می‌تواند تا حد زیادی تبدیل psd به html را برایتان آسان کند. در ادامه چند مورد از مهم‌ترین گزینه‌هایی که امکان تبدیل عکس به کد html را دارد بررسی می‌کنیم.
ممکن است پس از آن که طرح گرافیکی را آماده کردید، خودتان تصمیم به کدنویسی آن نیز بگیرید. چنانچه دانش کمی در این حوزه دارید، بهتر است این کار را به متخصص آن بسپارید اما اگر همچنان مصمم به انجام این کار هستید، توصیه می‌کنیم در ابتدا تلاش کنید تا برخی تگ‌های ابتدایی زبان html را به طور کامل بشناسید تا بتوانید تبدیل psd به html را به صورت دستی انجام دهید.
امروزه ابزارهای خودکار برای تبدیل psd به html ایجاد شده‌اند. هرچند که این ابزارها عملکرد بسیار خوبی در این زمینه دارند، اما باز هم نمی‌توان از آن‌ها انتظار داشت که یک تبدیل کاملا دقیق (Pixel-Perfect) انجام دهند. البته اگر کیفیت کار برایتان مهم نیست، می‌توانید صرفا به عملکرد این ابزارها تکیه کنید. اما بدون شک کم‌تر کسی پیدا می‌شود که چنین مرحله مهمی در طراحی سایت برایش اهمیت نداشته باشد!
زمانی که می‌خواهید طراحی گرافیکی خود را به صفحات وب تبدیل کنید، باید به این اطمینان برسید که تمامی اجزا در موقعیت مناسب و مطلوبی قرار دارند و پس از تبدیل به کد، جنبه زیبایی شناختی و هماهنگی بصری آن به هم نمی‌ریزد. در ادامه چند نکته مهم که در کدنویسی حرفه‌ای به شما کمک می‌کند را شرح خواهیم داد.
فایل فتوشاپی که طراحی کردید، معمولا از چندین لایه گوناگون تشکیل شده و لازم است که قطعه‌بندی (Slice) شود. قطعه‌بندی یک اصطلاح فنی است که اشاره به تجزیه یک تصویر بزرگ به چندین تصویر کوچک دارد. مزیت استفاده از نسخه قطعه‌بندی شده psd در صفحه html در این است که صفحات کدنویسی شده درنهایت زودتر بارگذاری می‌شوند. این در حالی است که اگر تمام فایل فتوشاپ شما در یک تصویر ارائه شود، مدت زمان بارگذاری صفحه بسیار طولانی شده و تاثیر منفی بر تجربه کاربری سایت می‌گذارد.
متخصصان این حوزه همواره توصیه می‌کنند که دایرکتوری موردنیاز بر روی رایانه لوکال ایجاد کنید تا از این طریق بتوانید به شیوه سازماندهی شده عمل کنید. فهرست دایرکتوری‌ها را در زیر آورده‌ایم:
زمانی که به طور کامل پوشه‌های موردنیازتان را ساختید، زمان آن می‌رسد که صفحه html را کدنویسی کنید. این عمل شبیه به کنار هم چیدن قطعات پازل است. برای انجام این کار می‌توانید از نرم‌افزارهای صفحه سازی مانند Dream weaver استفاده نمایید. تصور کنید که می‌خواهید صفحه اصلی سایتتان را ایجاد کنید. بدین منظور، یک فایل جدید در Dream weaver ایجاد کنید و اسم آن را index.html بگذارید و در فایل اصلی ذخیره نمایید.
گام بعدی این است که فایل استایل‌ها را ایجاد کنید. این کار را می‌توانید در این نرم‌افزار انجام دهید و یک فایل جدید با نام style.css را در پوشه css بسازید. در این بخش لازم است یک استایل شیت ایجاد کنید تا همه اطلاعات مربوط به استایل بندی صفحه وب مانند اندازه فونت‌ها، رنگ پس زمینه، موقعیت قرارگیری تصاویر، حاشیه‌ها و… را در اختیار داشته باشیم.
با این که هزاران قالب آماده ی زیبا و کاربردی در سطح اینترنت وجود دارد اما بعضی از افراد و شرکت ها دوست دارند و یا نیاز دارند که یک قالب اختصاصی با طراحی رابط کاربری اختصاصی برای خود داشته باشند بنابراین یا خود قالب مورد نظر خود را طراحی می کنند و یا طراحی قالب را به دست یک متخصص رابط کاربری می سپارند و…، در ساخت و تبدیل فایل فتوشاپ به کد html و css مراحل مختلفی باید طی شود که در ادامه این مراحل را به شما معرفی خواهیم کرد.
اولین مرحله ای که باید انجام دهید تا به درک کاملی از شکل و ظاهر سایت باشید این است تا یک وایرفریم از سایت را طراحی کنید تا مشخص شود که صفحات چه بخش هایی را شامل می شوند. این کار نه تنها دید خوبی به شما می دهد بلکه باعث می شود تا مشتری هم نگران چگونگی سایت خود نیز نباشد. در وایر فریم حتما لازم است تا تمامی جزئیات مانند هدر های سایت، نوع قرار گیری مطالب، اسلاید شو ها، باکس های مختلف و… مشخص شود.
در مرحله بعدی تبدیل طرح گرافیکی PSD به HTML نوبت به آن رسیده است تا با اضافه کردن لایه های مختلف به طرح اولیه خود آن را کامل کنید و به نوعی گرافیکی کنید. حتما توجه داشته باشید که این کار تمامی نکته های مربوط به طراحی رابط کاربری را داشته باشید. به عنوان مثال انتخاب رنگ ها در این قسمت نقش مهمی را بازی می کنند. انتخاب درست رنگ با توجه به نوع سایت و سلیقه مشتریتان از اهمیت بسیار بالایی برخوردار است و کیفیت طراحی سایت شما تاثیر گذار خواهد بود.
پس از آن که طراحی خود را در فرآیند تبدیل طرح گرافیکی psd به html به اتمام رسید، نوبت به تبدیل کردن طرح به کد می باشد. این را بگوییم که HTML5 تفاوت چندانی با نسخه های قبلی خود نمی کند و تنها با توجه به استاندارد هایی که توسط سازمان جهانی وب ارائه شده است تعریف شده و تگ های بیشتر و به روز تری هم دارد.
کد کردن طرح خود بسیار قابلیت های مثبتی دارد. برای مثال برای جلوه دادن به سایت و زیبا کردن آن لازم نیست تا از عکس های مختلف استفاده کنید و تنها کافی است تا از کد های html و css استفاده کنید. این کار باعث می شود تا سرعت سایت شما به هنگام بارگذاری بالاتر رود و این بهینه بودن تاثیر بسیار بالایی در رشد سایت شما در گوگل خواهد داشت. به علاوه نیاز هم نخواهد بود تا ویدیو های متفاوت را آپلود کنید چرا که با استفاده از تگ های جدیدی که تعریف شده اند می توانید این ویدیو ها را به عنوان مثال برای تبلیغات و یا سایر کار ها اهداف در سایت قرار دهید.
با وجود این نکاتی که ذکر شد این به این معنی نیست که اصلا در تبدیل طرح گرافیکی PSD به کد HTML5 از عکس ها استفاده نکنید. در طراحی سایت خود حتما از عکس های شاخص خوب در کنار متونی که قرار می گیرند استفاده کنید.
حال که طرح خود را با زیان html کدنویسی کردی برای زیبا کردن و اضافه کردن طرح های جالب و جذاب و به نوعی گرافیک طرح خود نوبت به css می رسد. هر نوع کار گرافیکی و ایده ای که در طرح خود پیاده سازی کرده باشید از این طریق می توانید آن را در سایت خود هم به وجود آوردید. به عنوان مثال می توانید از طریق css اکنون در تبدیل طرح گرافیکی به کد HTML5 افکت های سه بعدی بدهید و آن ها از حالت دو بعدی خارج کنید که قبلا فقط با فتوشاپ امکان انجام دادن این کار بود.
نکته بسیار مهمی که این روز ها در طراحی سایت ها اهمیت دارد بحث ریسپانسیو بودن آن ها است. یعنی این که در هر نوع صفحه نمایشی سایت متناسب با آن نمایش داده شود. از آن جایی که امروزه استفاده از گوشی های هوشمند در میان مردم رایج شده و وب گردی دیگر محدود به صفحه نمایش کامپیوتر های شخصی نیست، اینگونه طراحی هم اهمیت زیادی پیدا کرده است و در سئو سایت هم تاثیر بسزایی دارد.
نکته پایانی که باید خاطر نشان کنیم این است که سعی کنید در طراحی کردن سایت خود تحلیل دقیقی از خواسته مشتری و وایر فریم خود داشته باشید چراکه بسیار در کیفیت و راحتی کار شما تاثیر گذار خواهد بود. همچنین تبدیل طرح گرافیکی psd به html یک کار حرفه ای و تخصصی است و یادگیری آن نیازمند کسب آموزش های لازم و صرف وقت است و نمی تواند در عرض چند روز و با انجام دادن چند پروژه محدود به تخصص کافی در این زمینه برسید. پس بهتر در این زمینه هر چه بیشتر اطلاعات لازم را جذب کنید و تمرین های خود را برای تبدیل شدن به فردی حرفه ای، بیشتر کنید.
پلتفرم آموزشی رشدانا با هدف آموزش دادن حضوری کاملا استاندارد و حرفه‌ای با اساتید مجرب برای علاقه مندان به زمینه‌های مختلف کامپیوتری طراحی و آغاز به کار کرده است. با مراجعه به سایت ما می‌توانید از تمامی دوره های آموزشی رشدانا آگاهی پیدا کنید و اطلاعات و جزئیات مربوز به آن را هم مشاهده کنید.
همین حالا برای تجربه کردن به روز ترین آموزش ها و کسب مهارت های لازم در زمینه‌ها مختلف نظیر دوره طراحی سایت، سئو، دیجیتال مارکتینگ و …، اقدام کنید.
