Kurs Photoshop do HTML i CSS

  • Overview
  • Curriculum
  • Instructor
  • Review

About This Course

PSD do HTML

Wprowadzenie

Zobacz kompletny kurs projektowania stron WWW od czystej kartki w Photoshopie, przez kodowanie w najnowszych standardach HTML5 oraz CSS3 a偶 do tworzenia animacji z pomoc膮 jQuery! Zobacz, jak pracuje ekspert tak, jakby艣 przygl膮da艂 mu si臋 przez rami臋 s艂uchaj膮c precyzyjnych wskaz贸wek. Kurs, kt贸ry masz przed sob膮 to esencja praktycznej pracy!

  • Proces projektowania layoutu w Adobe Photoshop

  • Ci臋cie grafiki na potrzeby strony WWW

  • Kodowanie do HTML5 oraz CSS3

  • Prac臋 z jQuery oraz dodatkowymi bibliotekami oraz Tworzenie animacji w jQuery i Edge Animate

  • Wykorzystanie geolokalizacji i API Google Maps

  • Ciekawe porady, tipsy i triki


Projektowanie od czystej kartki w Photoshop

Zaczniemy od podstaw konfiguracji 艣rodowiska pracy w Photoshop. Doinstalujemy potrzebne dodatki i zoptymalizujemy ustawienia Photoshopa pod k膮tem projekt贸w na potrzeby sieci. Nast臋pnie skoncentrujemy si臋 na zgromadzeniu zasob贸w, kt贸re pos艂u偶膮 do stworzenia naszej strony, takich jak fonty, zdj臋cia oraz ikony tworz膮c z nich repozytorium dla naszej witryny. Nast臋pnie zajmiemy si臋 praktyk膮 projektowania i krok po kroku przeprowadz臋 Ci臋 przez proces tworzenia strony g艂贸wnej i podstrony dla naszego serwisu.


Dobre techniki projektowania

Na przestrzeni kursu stara艂em si臋 przekaza膰 Ci jak najwi臋cej wskaz贸wek dotycz膮cych projektowania na potrzeby sieci. Znajdziesz w nim informacje o tym, jak dopasowa膰 stron臋 do optymalnej rozdzielczo艣ci, jak pracowa膰 wygodnie z gridem, kt贸re elementy najlepiej zaimportowa膰 z Illustratora jako obiekty inteligentne.

Zobacz lekcj臋 kursu - Skr贸t do artyku艂贸w promowanych >>


Przygotowanie layoutu i ci臋cie grafiki

Chocia偶 techniki, kt贸re zobaczysz w kursie s膮 uniwersalne i mog膮 pos艂u偶y膰 do stworzenia zar贸wno statycznych jak i dynamicznych stron WWW, postaram si臋 tak偶e udzieli膰 Ci kilku wskaz贸wek dotycz膮cych tworzenia projekt贸w na potrzeby WordPress, poniewa偶 w kolejnym kursie strona, kt贸r膮 zakodujemy, b臋dzie wdra偶ana w艂a艣nie do tego CMSa. Po zaprojektowaniu gotowego layoutu potniemy stworzon膮 grafik臋 po to, aby艣my mogli zakodowa膰 j膮 do dzia艂aj膮cej strony WWW.

Zobacz lekcj臋 kursu - Kodujemy karuzel臋 w jQuery >>


Kodowanie w HTML5 i CSS3

Maj膮c ju偶 przygotowane i poci臋te elementy graficzne, b臋dziemy wdra偶a膰 je jako gotow膮 stron臋, do zaprojektowania kt贸rej wykorzystamy najnowsze standardy HTML5 i CSS3. Nie b臋dziemy jednak korzysta膰 z eksperymentalnych technik, kt贸rych dzia艂anie jest zale偶ne od przegl膮darek. Postaram si臋 pokaza膰 Ci pewne metody, kt贸re wykorzystuj臋 w codziennej pracy po to, aby艣my nie musieli przejmowa膰 si臋 mozolnym testowaniem strony pod r贸偶nymi przegl膮darkami.


Animacja z jQuery w widoku Pojedynk贸w

W kursie stworzymy tak偶e osobny widok, kt贸ry b臋dzie nawi膮zywa艂 do aplikacji, kt贸r膮 mogliby艣my stworzy膰 na potrzeby urz膮dze艅 mobilnych. B臋dzie to odr臋bny layout, kt贸ry zakodujemy w HTML i CSS a nast臋pnie dopiszemy do niego atrakcyjn膮 animacj臋 z pomoc膮 jQuery. W lekcji bonusowej do tego kursu poka偶臋 Ci, jak mo偶na stworzy膰 podobn膮 animacj臋 bez kodowania z pomoc膮 programu Adobe Edge Animate.

Zobacz gotow膮 animacj臋 >>


Najciekawsze elementy podstron

Om贸wimy r贸wnie偶 tworzenie ciekawych element贸w podstron, pobierzemy i zainstalujemy na nasz膮 stron臋 dodatki takie jak CarouFredSel, z pomoc膮 kt贸rego zakodujemy dzia艂aj膮cy slider do zdj臋膰 oraz najnowszych artyku艂贸w. Zgodnie z etapami pracy, kt贸re wykonamy w kursie, b臋dziesz m贸g艂 sam zakodowa膰 pozosta艂e podstrony naszej witryny, a gdyby艣 nie m贸g艂 sobie z czym艣 poradzi膰 - do艂膮czyli艣my kompletne pliki 藕r贸d艂owe dzia艂aj膮cej witryny, kt贸re oka偶膮 si臋 pomocne.


Geolokalizacja w przegl膮darce i Google Maps API

Jedn膮 z ciekawych funkcjonalno艣ci, kt贸re zakodujemy na naszej stronie b臋dzie wykorzystanie po艂o偶enia u偶ytkownika do tego, aby z pomoc膮 Google Maps API dla JavaScript wy艣wietli膰 mapk臋, na kt贸r膮 dynamicznie naniesiemy markery, kt贸re b臋d膮 zmienia艂y swoj膮 wielko艣膰 w zale偶no艣ci od ilo艣ci restauracji zrecenzowanych na naszej stronie.


Podsumowuj膮c, kurs zawiera mi臋dzy innymi:

  • Proces projektowania layoutu w Adobe Photoshop

  • Praktyczne wskaz贸wki pracy z grafik膮 projekt贸w webowych

  • Wykorzystanie typografii na stronach

  • Projektowanie na potrzeby WordPress

  • Ci臋cie grafiki na potrzeby strony WWW

  • Kodowanie do HTML5 oraz CSS3

  • Prac臋 z jQuery oraz dodatkowymi bibliotekami

  • Tworzenie animacji w jQuery i Edge Animate

  • Wykorzystanie geolokalizacji i API Google Maps

  • Ciekawe porady, tipsy i triki

  • I wiele, wiele wi臋cej!


Dla kogo jest ten kurs?

Kurs Photoshop do HTML przeznaczony jest dla os贸b, kt贸re maj膮 ju偶 opanowane podstawy CSS oraz HTML, jak r贸wnie偶 podstawy Photoshop. Osobom pocz膮tkuj膮cym polecamy zapoznanie si臋 w pierwszej kolejno艣ci z kursem聽HTML i CSS od Podstaw, jak r贸wnie偶聽kursem Photoshop CC od Podstaw. W kursie skoncentrowali艣my si臋 na praktycznej pracy pomijaj膮c om贸wienie podstawowych mechanizm贸w dzia艂ania tego j臋zyka. Dodatkowe materia艂y, kt贸rych przerobienie nie jest konieczne, ale mo偶e pom贸c przy nauce z kursem Photoshop do HTML to聽Kurs HTML5,聽Kurs JavaScript聽i聽Kurs jQuery. Doskona艂ym uzupe艂nieniem wiedzy o Photoshop jest natomiast聽Kurs Photoshop dla Designer贸w.


Dlaczego wybra膰 w艂a艣nie ten kurs?

  1. Kurs wideo to聽najbardziej efektywna a zarazem najprzyjemniejsza聽forma nauki. Jest on tak prowadzony, by艣 ca艂y czas m贸g艂 go 艣ledzi膰 z zainteresowaniem i zaanga偶owaniem, a tak偶e czerpa膰 satysfakcj臋 z tworzonych projekt贸w.

  2. Wiedza, kt贸r膮 otrzymujesz w tym kursie, to nie tylko sucha teoria, ale r贸wnie偶聽wskaz贸wki od praktyka z wieloletnim do艣wiadczeniem, dzi臋ki kt贸rym du偶o 艂atwiej b臋dzie Ci opanowa膰 materia艂 i przygotowa膰 ciekawe projekty w Photoshop, HMTL i CSS.

  3. Uczysz si臋 na praktycznych przyk艂adach.聽Zebrane techniki wynikaj膮 z praktyki a same dodatki kt贸re stworzymy s膮 om贸wione kompleksowo. Kurs, kt贸ry masz przed sob膮 to esencja praktycznej wiedzy i do艣wiadczenia a tak偶e skr贸t贸w, kt贸re oszcz臋dz膮 Ci godziny pracy i poszukiwa艅.

  • Proces projektowania layoutu w Adobe Photoshop

  • Prac臋 z jQuery oraz dodatkowymi bibliotekami oraz Tworzenie animacji w jQuery i Edge Animate

  • Ci臋cie grafiki na potrzeby strony WWW

Course Curriculum

1 Lectures

1 Lectures

2 Lectures

2 Lectures

2 Lectures

Instructor

Profile photo of Kursy Wideo
Kursy Wideo

Witaj na naszym profilu!聽Znajdziesz tu setki godzin warto艣ciowych materia艂贸w wideo z zakresu nowych technologii. Zobacz, czego mo偶esz si臋聽z nami nauczy膰!

Review
4.9 course rating
4K ratings
ui-avatar of Kamil Rytel
Kamil R.
3.0
8 months ago

Zaktualizujcie ustawienia photoshopa. ci臋偶ko jest si臋 porusza膰 na nowej wersji

  • Helpful
  • Not helpful
ui-avatar of Jerzy Pie艅kowski
Jerzy P.
5.0
5 years ago

Kurs przygotowany perfekcyjnie.
Mam ma艂e obiekcje co do dezaktualizacji szczeg贸艂贸w technicznych, dost臋pno艣ci bezp艂atnych font贸w, wtyczek, faktu 偶e technologie przysz艂o艣ciowe zapowiadane w kursie sta艂y si臋 ju偶 rzeczywisto艣ci膮. Przegl膮darki ju偶 obs艂uguj膮 wi臋cej, a monitory pracuj膮 na wi臋kszych rozdzielczo艣ciach. Zamierzam budowa膰 stron臋 pod urz膮dzenia mobilne, a w dalszej kolejno艣ci pod komputery. To i inne nastawienia nie by艂y jeszcze tak oczywiste kilka lat temu. Ka偶dy rok przynosi zmiany. Czasu mam zbyt ma艂o. Musz臋 uczy膰 si臋 z wyprzedzeniem, a nie wstecz.
Tak czy inaczej - uwa偶am kurs za wybitny i godny polecenia, szczeg贸lnie w po艂膮czeniu z jego kontynuacj膮 dla WordPressa. Moje osobiste preferencje i szukanie innego kursu nie mog膮 tu w 偶aden spos贸b obni偶a膰 oceny. Dzi臋kuj臋 za mo偶liwo艣膰 poznania bli偶ej kursu i dokonania wyboru. To jest genialna i bardzo przydatna opcja.

  • Helpful
  • Not helpful
ui-avatar of Rogu3451 Rogu3451
Rogu3451 R.
5.0
5 years ago

Dla osob, kt贸re nie mia艂y styczno艣ci z photoshoopem jest to naprawd臋 艣wietny kurs.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published.聽Required fields are marked聽*

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses