Projekt strony internetowej photoshop tutorial

Część 1

 

1. Otwieramy przygotowany dokument z siatką. W pierwszej kolejności zrobimy nagłówek. Tworzymy kształt prostokątny o wysokości 1500x130px. Dodajemy przykładowy kontener na logo, tekst menu, oraz ikonke wyszukiwarki. Na koniec dodajemy mały prostokąt który będzie oznaczał aktywną stronę. Tekst menu i ikonkę wyszukiwarki środkujemy względem kształtu tła.

Część 2

 

2. Slajder. Tworzymy kształt wysokość 1500x430px. Tworzymy nową warstwę przypinamy ją do warstwy poniżej i malujemy czarnym miękkim pędzlem w górnej i dolnej części tworząc cień. Następnie dodajemy strzałki z lewej i sprawej strony. Dodajemy przykładowe zdjęcie i również przypinamy je do warstwy ze slajderem. Dodajemy przycisk, tworzymy prostokąt z zaokrąglonymi rogami 10px. Na koniec dodajemy przykładowy tekst na slajderze.

 

Część 3

 

3. Sekcja serwisy. Tworzymy kształt prostokątny 540x1500px, który będzie naszym tłem. Tworzymy prostokątny kształt z zaokrąglonymi rogami. Duplikujemy kształt i pozbywamy się zaokrągleń u dołu a następnie zmniejszamy wysokość na 220px. Prostokąt ten będzie naszym kontenerem na zdjęcie. Pod zdjęciem dodajemy wąski pasek z kolorem. Następnie dodajemy tekst. Grupujemy warstwy duplikujemy dwa razy i ustawiamy w odpowiednich miejscach.

 

Część 4

 

4. Sekcja Pracownicy. Tworzymy kształt prostokątny 420x1500px który będzie naszym tłem. Dodajemy nagłówek wyśrodkowany względem dokumentu. Tworzymy kwadrat o wielości 200x200px z zaokrąglonymi rogami, dodajemy zdjęcia i przypinamy ją do kształtu. Dodajemy pod nim tekst Wielkości 30, 18px. Grupujemy wszystkie warstwy i duplikujemy grupę 3 razy a następnie rozstawiamy według szerokości siatki.

 

Część 5

 

5. Sekcja cytat. Tworzymy kształt prostokątny (350x1500px kolor 0f5e9d) Dodajemy nagłówek 40px od górnej krawędzi, wielkośc czcionki 40px. Dodajemy pole z tekstem/cytatem i autora. Wielkość czcionek 30,18px.

 

Część 6

 

6. Sekcja ikonek. Tworzym kształt prostokątny (425,1500px kolor szary). Dodajemy zdjęcie i przypinamy je do kształtu. Dodajemy nagłówek kolor biały wielkość czcionki 40px. Tworzymy okrągły kształt, wypełnienie ustawiamy na 0 i dodajemy styl zewnętrzny obrys, kolor biały 5px. Do środka dodajemy ikonkę a pod okręgiem tytuł czcionk 30px. Grupujemy wszystkie warstwy i powielamy je 2 razy a następnie ustawiamy odpowiednio według linii pomocniczych.

 

Część 7

 

7. Stopka. Tworzymy kształt (300x1500px, kolor 434343) dodajemy nagłówek wielkość 40px kolor biały. Dodajemy ikonki do mediów społecznościowych etc. oraz informacje kontaktowe (18px, kolor biały) wszystko środkujemy względem dokumentu.

Linki:
https://www.dropbox.com/s/gmy2uguuaf32udv/431%20Materal%20Design%20Icons.csh?dl=0
https://www.dropbox.com/s/dig095nir2i7p81/strona%20siatka.psd?dl=0