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

رشدانا

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

PSD to HTML

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

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

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


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

لپتاپ

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

  • مصطفی پورعلی مصطفی پورعلی مصطفی پورعلی، فعال حوزه ی آی تی از سال 79 مشاور و ارائه دهنده راهکارهای رشد برای کسب و کار های آنلاین (هکر رشد)، کارشناس ارشد مدیریت آی تی و کارشناس ارشد مطالعات ترجمه. مربی استارتاپ ناب و مدل کسب و کار و مشاور پیاده سازی MVP بر اساس متدهای لین استارتاپ. از موسسین آزمایشگاه تجربه کاربری گرین وب - مجری پروژه های کاربردپذیری موبایل و وب.

    [ درخواست مشاوره با مصطفی پورعلی ]

انتخاب نوع ثبت نام

شهریه در حالت عادی : 130000 تومان
انتخاب و ثبت نام

زمان، قیمت

  • تاریخ برگزاری : دوشنبه 26 خرداد ساعت 16:30 الی 20
  • covid19 تاریخ ها ممکن است به علت COVID-19 با تلورانس 7 روز دستخوش تغییر شود که در این صورت، قبل از برگزاری اطلاع رسانی می شود
  • مدت زمان کارگاه : یک جلسه 3 ساعته
  • پیش نیاز: کد نویسی html
  • اشتراک گذاری :
  • شهریه کارگاه : 130000 تومان‌
    انتخاب و ثبت نام

مکان برگزاری

  • مشهد
بستر آنلاین اسکای روم

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

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

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

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

کارگاه آموزشی آموزش تبدیل طرح گرافیکی به کد HTML5 - PSD 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 رو یاد داشته باشید یعنی این لینک :
      http://roshdana.com/?p=1002

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

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




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


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