سرفصل های دوره

۱ فصل
۱۸ جلسه
۵ ساعت
۱

لیست ویدئوهای دوره

۱۸ قسمت
۰۴:۵۵:۰۹
1

مقدمه

۰۱:۱۵
2

لینک دانلود سورس

3

قسمت اول

۰۲:۴۷
4

قسمت دوم

۰۸:۰۸
5

قسمت سوم

۲۲:۵۲
6

قسمت چهارم

۲۹:۴۸
7

قسمت هشتم

۱۷:۴۱
8

قسمت پنجم

۲۲:۰۰
9

قسمت ششم

۰۸:۲۷
10

قسمت هفتم

۱۸:۲۴
11

قسمت نهم

۲۲:۳۷
12

قسمت دهم

۱۸:۵۱
13

قسمت یازدهم

۲۴:۵۲
14

قسمت دوازدهم

۱۲:۴۷
15

قسمت سیزدهم

۰۵:۱۹
16

قسمت چهاردهم

۲۰:۵۲
17

قسمت پانزدهم

۲۲:۲۹
18

قسمت شانزدهم

رایگان
۲۶:۳۹
19

قسمت هفدهم

رایگان
۰۹:۲۱

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

در دوره تبدیل psd به html چه می آموزیم؟

آموزش های این دوره شامل موارد زیر میشود:

  • آموزش تبدیل فایل PSD به وبسایت کاملاً واکنش گرا (Responsive)
  • آموزش HTML5 , Bootstrap 3 , JQuery , CSS3
  • آشنایی با تگ نویسی HTML و کد نویسی CSS و JQuery

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

پروژه استفاده شده در این دوره وبسایت تک صفحه ای و شرکتی می باشد.

آموزش پیشنهادی

دوره رایگان آموزش CSS Grid طراحی گالری شبکه‌‎ای با گرید در CSS

اهمیت آموزش CSS Grid آموزش CSS Grid یکی از مباحث مهم در برنامه نویسی وب برای طراحی چیدمان های شبکه ای در وبسایت هایی که با HTML و CSS پیاده سازی میکنیم، یک نیاز ضروری خواهد بود. گرید در CSS یک سیستم چیدمان دو بعدی برای طراحی صفحات وب می باشد و به شما این امکان را می دهد که ردیف ها و ستون ها را از یکدیگر جدا کنید. […]
علیرضا احمدی
۵.۰
دوره رایگان آموزش CSS Grid طراحی گالری شبکه‌‎ای با گرید در CSS مشاهده دوره

ویژگی ها و متدهای بکار رفته در آموزش:

  • Responsive
  • Bootstrap 3
  • HTML5
  • CCS3

دوره تبدیل psd به html مناسب چه افرادی است؟

این دوره برای طراحان سایت و دانشجویان رشته مهندسی کامپیوتر مناسب می باشند.

مزایای تبدیل PSD به HTML :

  • پشتیبانی توسط همه مرورگرها
  • کاهش هزینه ها برای طراحی وب
  • پشتیبانی کامل
  • سازگاری با موتورهای جستجو
  • رضایت مشتری
  • انعطاف پذیر و کاربردی تر
  • تحویل به موقع طبق توافق اولیه

در این دوره می خواهیم آموزش تبدیل psd به html به صورت کاملاً Responsive و پروژه محور خدمت شما عزیزان ارائه کنیم.

ابزارهای متفاوت تبدیل PSD به HTML

تبدیل یک طرح PSD به یک صفحه وب قابل دیدن و استفاده، به عنوان یکی از مهمترین وظایف طراحی وب محسوب می شود. برای این کار، ابزارهایی وجود دارند که به شما در تبدیل PSD به HTML کمک می کنند.

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

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

برخی از ابزارهای تبدیل PSD به HTML عبارتند از:

۱. Zeplin: این ابزار به طراحان و توسعه دهندگان کمک می‌کند تا با همکاری بر روی پروژه های PSD، CSS و HTML خود را تولید کنند. با Zeplin، می‌توانید ابعاد، رنگ‌ها، تایپوگرافی و سایر جزئیات از آنجایی که مستقیماً از فایل PSD مشتق شده‌اند را بررسی کنید.

۲. Avocode: این ابزار با استفاده از پلاگین‌هایی که در Photoshop، Sketch و XD موجود هستند، فایل های PSD و Sketch شما را به صورت خودکار برای تبدیل به کد HTML آماده می‌کند. با استفاده از Avocode، می‌توانید کدهای CSS، SCSS، Sass، Less و Stylus را ایجاد کنید.

۳. Adobe Extract: این ابزار از خانواده Adobe Creative Cloud است و به شما امکان مشاهده و استخراج برچسب‌ها، رنگ‌ها، تصاویر و سایر محتویات فایل PSD را به صورت خودکار می‌دهد. همچنین، با Extract، می‌توانید CSS و XML را ایجاد کنید.

۴. CSS Hat: این ابزار قابلیت تولید کد CSS در Photoshop را بدون نیاز به دانش برنامه‌نویسی برای طراحان فراهم می‌کند. با استفاده از CSS Hat، می‌توانید کدهای CSS3 و Sass را ایجاد کنید.

۵. Pinegrow: این ابزار یک ویرایشگر وب قدرتمند است که به شما امکان می‌دهد که صفحات وب را با استفاده از فایل PSD خود، به صورت دقیق و حرفه‌ای تولید کنید. با Pinegrow، می‌توانید HTML، CSS

آموزش پیشنهادی

آموزش Adobe Xd – مقدماتی

قبل از شروع آموزش Adobe Xd بهتر است مروری داشته باشیم بر تجربه و رابط کاربری: اجازه دهید کمی در زمان به عقب سفر کنیم و یک وبسایت را طراحی کنیم. یک نفر پروژه میگرفت، فکر می کرد، طرح psd میزد و آن را کد می زد، تست می کرد و تحویل می داد و این یعنی صفر تا صد آن را یک نفر انجام میداد. اما با گذشت زمان طرح […]
حامد مودی
۳.۵
آموزش adobe xd مشاهده دوره