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ń.