آموزش تبدیل طرح گرافیکی PSD و XD به کد HTML5

رشدانا

تبدیل طرح UI ایکس دی یا PSD به کد وب سایت

PSD / XD to HTML

آموزش عملی و پروژه محور تبدیل طرح گرافیکی (طرح رابط کاربری یا UI) به کد html5 و css3 به صورت بهینه و اصولی، این دوره در ادامه ی مسیر رشد طراحی سایت می باشد و پیش نیاز آن تسلط نسبی بر روی کدنویسی Html5 و Css3 می باشد.

توضیحات کارگاه آموزشی

تبدیل طرح UI به کد استاتیک وب سایت
از آنجایی که تبدیل طرح گرافیکی PSD و XD ایکس دی به کد HTML یک شغل پر در آمد در دنیا به حساب می آید، این دوره نه تنها برای کسانی که می خواهند برای وب سایت و کسب و کار خویش قالب اختصاصی تولید کنند مناسب است بلکه برای کسانی که به دنبال کسب درآمد از این راه هستند نیز مناسب می باشد.
در این دوره شما کدنویسی به زبان های html و css را فرا می گیرید و می توانید قالب اختصاصی خود از یک طرح گرافیکی (طرح فتوشاپ) یا ایکس دی به کد استاتیک تبدیل کنید.
البته آموزش های رایگان و نرم افزار های آموزشی بسیاری در فضای اینترنت موجود است که بسیاری از افراد از آنان استفاده کرده و شروع به کدنویسی غیر اصولی طرح UI خود می کنند، اما فرق اساسی این دوره با بقیه دوره ها آموزش تخصصی و کاملا اصولی کدنویسی می باشد که توسط اساتید متخصص و مجرب که مدت زیادی در این فضا حضور داشته، انجام می شود.


ملزومات کارگاه

لپتاپ

این کارگاه در مسیرهای رشد می باشد و بصورت تکی ثبت نام ندارد
[ مشاهده مسیرهای رشد ]

ثبت نام این کارگاه در مسیرهای رشد

  • تاریخ برگزاری : 9 اسفندماه 1399
  • مدت زمان کارگاه : یک جلسه سه ساعته
  • پیش نیاز: کد نویسی html
  • اشتراک گذاری :

برای شرکت در این کارگاه، باید در یکی از مسیرهای رشد زیر ثبت نام کنید

مدرس و رشدآفرین

  • حمید محب حمید محب، طراح و برنامه نویس وب از سال ۹۳ با سابقه طراحی و پیاده سازی بیش از ۲۰ وبسایت فروشگاهی و شرکتی و ... - از برگزارکنندگان رویداد همفکر مشهد (دورهمی استارتاپی و اهالی آی تی) - توسعه دهنده وب به صورت فریلسنر از سال ۹۳ - توسعه دهنده وب در شرکت آنلاینر به مدت یک سال - توسعه دهنده وب و وب اپلیکیشن در شرکت کمان از ۹۷ تا کنون - مدرس دورها های HTML.CSS در هنرستان مجازی آماج

مکان برگزاری

  • آموزش مجازی
بستر آنلاین اسکای روم

پلتفرم بومی برگزاری وبینار و وب کنفرانس اسکای روم  

اسکای روم آموزش آنلاین

کلیات آنچه می آموزید

  • نکات و تکنیک های SEO در تبدیل قالب
  • پیاده سازی قالب به صورت کامل از روی طرح اصلی
  • تبدیل طرح گرافیکی به صورت بهینه
  • برش قالب گرافیکی به صورت بهینه
  • رفع مشکل های رایج در کد نویسی
  • استفاده از تصاویر اسپرایتsprite
  • استفاده از jQuery SlideShow و نحوه Customize کردن آن
  • تبدیل طرح فوتوشاپ به کد استاتیک سایت

کارگاه آموزشی آموزش تبدیل طرح گرافیکی PSD و XD به کد HTML5 - PSD / XD to HTML

پیش نیاز: کد نویسی html

تبدیل طرح گرافیکی به کد

 

یکی از جذاب ترین دوره‌های آموزش برای طراحان سایت، آموزش تبدیل طرح گرافیکی به کد یا  PSD To HTML5 است. در رشدانا شما می‌توانید این مهارت را در یک روز و در 4 ساعت یاد بگیرید. پیش نیاز شما برای شرکت در این دوره کدنویسی HTML5 و CSS است که برای ورود به دنیای برنامه نویسی به آن نیاز پیدا خواهید کرد. در ادامه 5 گام اصلی که در دوره آموزش تبدیل طرح گرافیکی به کد یا  PSD To HTML5 پشت سر می گذارید را با هم بررسی خواهیم کرد.

 

5 گام مهم و اساسی برای تبدیل PSD To HTML5

در دوره آموزشی تبدیل طرح گرافیکی به کد یا  PSD To HTML5 شما باید مراحل زیر را پشت سر بگذارید تا بتوانید یک طرح گرافیکی را به کد تبدیل کنید.

 

 

اولین گام: طراحی طرح گرافیکی یا فایل PSD

برای این کار شما نیاز به  نکات زیر دارید تا بتوانید طرح بهینه تری داشته باشید:

درک دقیق و واضح

قبل از شروع یک پروژه طراحی وب شما باید حتما مطمئن باشید که دید کلی نسبت به پروژه دارید. برای این کار نیاز است با مشتری ارتباط برقرار کرده باشید و سوالات درستی برای این موضوع از او پرسیده باشید.

لایه های فتوشاپ

شما باید بخش های مختلف سایت خود را در فتوشاپ به صورت لایه های جداگانه طراحی کرده باشید چرا که به شما در زمان انجام پروژه کمک شایانی خواهد کرد. منظورمان از بخش های مختلف سایت شامل موارد زیر است:

  • هدر سایت
  • اسلایدشو‌ ها
  • سایدبار سایت
  • دسته بندی مطالب
  • فوتر سایت
  • آرشیو مطالب
  • و …

 

دومین گام: انتخاب صحیح رنگ

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

 

 

آموزش تبدیل طرح گرافیکی به کد

سومین گام: HTML5

همان طور که احتمالا می‌دانید HTML5 آخرین استاندارد ارائه شده توسط W3c است که طراحی سایت توسط آن به شدت راحت تر شده است. به عنوان مثال دیگر لازم نیست مانند گذشته شما از عکس ها برای زیبایی سایت استفاده کنید. برای زیبایی سایت می‌توانید از CSS در کنار HTML استفاده کنید. البته این نکته را در نظر داشته باشید که استفاده از عکس های شاخص در این مورد استثنا هستند. عکس‌های شاخص همان تصاویر بندانگشتی هستند که می‌توانند در کنار متن شما در صفحه اصلی قرار بگیرند.

 

تبدیل طرح گرافیکی به کد

چهارمین گام: CSS3

علت به وجود آمدن CSS3 ،HTML5 است که کمک بسیار بزرگی در زمینه طراحی سایت با کد های کم تر کرده است. CSS3 خواص، ویژگی‌های جدید و جذابی را وارد دنیای طراحی سایت کرده است که با استفاده از آن‌ها می‌توانید یک سایت زیبا و فریبنده طراحی کنید.

 

پنجمین گام: Media Queries

ایجاد صفحه های واکنش گرا یا ریسپانسیو (Responsive) برای امر بهینه سازی سایت یا SEO و کاربران موبایل که تعداد آن‌ها بسیار بیش تر از کاربران دسکتاپ است امری واقعا ضروری است. شما با استفاده از Media Queries می‌توانید یک طرح ثابت اما واکنش گرا و ریسپانسیو برای سایت خود داشته باشید. سایت شما اگر از همان ابتدا با این اصل طراحی به کد تبدیل شود با هر دستگاه و اندازه ای به خوبی کار خواهد کرد.

2 دیدگاه

شما نیز می توانید در تبادل نظرها شرکت کنید، دیدگاهی بنویسید یا به دیدگاه دیگران پاسخ دهید.
برای نوشتن دیدگاه اینجا را کلیک کنید

  1. مهدی

    سلام، وقت بخیر
    چه میزان دانش پایه برای شرکت در این کارگاه لازمه؟

    • روابط عمومی رشدانا

      سلام. باید کدنویسی HTML رو یاد داشته باشید یعنی این لینک :
      https://roshdana.com/?p=1002

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




مشاوره سریع با ما



دوره های پیشنهادی:
سایر دوره ها