Kurs Photoshop do HTML i CSS

PSD do HTML

4.75 (6 reviews)
Udemy
platform
Polski
language
Web Design
category
instructor
Kurs Photoshop do HTML i CSS
49
students
9.5 hours
content
Jun 2019
last update
$29.99
regular price

What you will learn

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

Kodowanie do HTML5 oraz CSS3

Wykorzystanie geolokalizacji i API Google Maps

Ciekawe porady, tipsy i triki

Description

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

Content

Wstęp do kursu

Wprowadzenie

Praca z Photoshop

Wprowadzenie do działu

Konfiguracja środowiska

Ustawienia Photoshop'a
Organizacja paneli
Dodatki do Photoshop
Rozdzielczość i grid
Dobór fontów na stronę WWW
Dobór zdjęć do projektu

Dodatkowe informacje o WordPress

Podstawy WordPress
Projektowanie pod WordPress

Tworzymy layout strony

Początek pracy z layoutem
Tworzymy Menu
Praca z elementami topu
Skrót do artykułów promowanych
Praca z cytatem
Układ trójkolumnowy
Sekcja Food Fight
Sekcja Kulinarne Inspiracje
Komentarze oraz Footer
Bonus

Praca z podstronami

Modelowanie podstron
Top dla podstrony
Zawartość podstrony
Pozostałe podstrony

Podstrona Pojedynków

Światło w sekcji pojedynków
Projektowanie pojedynków

Kodowanie z HTML i CSS

Wprowadzenie do działu
Struktura plików dla strony

Tworzenie strony głównej

HTML dla strony głównej
Reset stylów CSS
Cięcie layoutu i zapisywanie grafiki
Ostylowanie headera z menu
Tworzenie CSS dla menu
Praca z jQuery na potrzeby menu
Tworzymy strukturę dla topu
Style dla topu
Cytat oraz przewijarka zdjeć
Kodujemy karuzelę w jQuery
Układ trzech kolumn
Dopracowanie cienia
Sekcja pojedynków
Sekcja Kulinarne Inspiracje
Praca z komentarzami
Skrypty dla Footer'a
Struktura plików i praca domowa
Bonus

Google Maps API

Praca z Google Maps API i Geolokalizacją

Strona pojedynków

HTML dla pojedynków
CSS w sekcji pojedynków

Animowane treści na stronie

Animacja w jQuery
Animacja z Adobe Animate

Zakończenie

Bonus
Do usłyszenia!

Reviews

Jerzy
March 9, 2020
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.

Charts

Price

Kurs Photoshop do HTML i CSS - Price chart

Rating

Kurs Photoshop do HTML i CSS - Ratings chart

Enrollment distribution

Kurs Photoshop do HTML i CSS - Distribution chart

Related Topics

1943982
udemy ID
10/2/2018
course created date
10/29/2019
course indexed date
Bot
course submited by