Photoshop: Profesjonalny layout sklepu internetowego

Zdjęcia wykorzystane w projekcie są dostępne do pobrania za darmo w serwisie internetowym http://www.sxc.hu:

1. zestaw do herbaty - http://www.sxc.hu/photo/117164...
2. herbata z miętą - http://www.sxc.hu/photo/105813...
3. faktura ściany - http://www.sxc.hu/photo/119732...
4. liście – http://www.sxc.hu/photo/100512...
5. czerwone wino - http://www.sxc.hu/photo/583235

Zaczynamy od stworzenia obszaru pracy. Powinien mieć on około 1200 px szerokości, abyśmy widzieli, jak strona będzie wyglądać w przeglądarce. Długość około 2000 px. Aby móc w razie czego pracę przyciąć, a nie wydłużać.

Linijkami (CTRL+R) ustawiamy szerokość strony na 970 px. Jest to standardowy rozmiar dla stron www we współczesnej sieci.

Nadajemy kolor tła. Ja wybrałem delikatny, pastelowy, zielony (#b6c194)

Zaznaczamy na nowej warstwie górny obszar, a następnie za pomocą gradientu wypełniamy go.

Wypełniamy go w pionie, ponieważ będzie to wygodniejsze, przy przerabianiu grafiki na funkcjonującą stronę.

Kolejny obszar - ten promocyjny, robimy jaśniejszy. Może być wypełniony gradientem. Również pionowym.

Następnie wybieramy narzędzie gumka z pędzlem o nierównych krawędziach. Będziemy robić poszarpane krawędzie naszych obszarów.

Kolejnym krokiem będzie wyostrzenie krawędzi. W tym celu wykorzystujemy narzędzie Filter > Sharpen > Sharpen More (lub Sharpen).

Tak samo robimy z jasnym polem.

Następnie dolny, czarny pasek, który narysowaliśmy przycinamy gumką.

Obszar pracy możemy teraz wykadrować trochę poniżej dolnego paska.

Wklejamy obrazek z ziołami. Za pomocą Magic Wand Tool (Różdżka) zaznaczamy białe pole i wycinamy je.

Zmniejszamy obrazek. Rysujemy szare pole na drugie menu. Tam również możemy zastosować gradient.

Na pole menu w proporcjach ustawiamy cień.

Obrazek z ziołami wyostrzamy, powielamy i ustawiamy drugi po lewej stronie menu.

Na tło ustawiamy teksturę ściany. Następnie za pomocą maski warstwy - tak jak na poniższym zrzucie - cieniujemy tło z dwóch stron. Robimy to ustawiając gradient na czarno-biały i przeciągamy w poziomie po warstwie z tłem. Przeźroczystość tła ustawiamy na około 14-15%.

Umieszczamy dwie szklanki. Drugą zmniejszamy i za pomocą filtra Filter > Blur > Guassian blur nadajemy rozmycie.

Pod spodem robimy "plamę" za pomocą pędzla o łagodnej krawędzi. A następnie za pomocą transformacji spłaszczamy go, aby udawał cień szklanki. Powielamy go i zmniejszony wstawiamy pod drugą szklankę.

Rysujemy pola pod promocje. Graficznie zbliżone do drugiego menu. Strzępimy rogi za pomocą gumki, podobnie jak miało to miejsce z innymi polami. Dodajemy również lekki cień.

Kolejnym krokiem jest wstawienie do obrazka zdjęcia wina. Dodajemy cień w identyczny sposób jak pod szklanki.

Teraz uzupełniamy stronę tekstami. Używamy do tego celu głównie czcionki Georgia.

W górnej części dodajemy prostą wyszukiwarkę.

Uzupełniamy menu i pozostałe pola tak, jak na poniższym zrzucie.

Tworzymy również menu szybkiego wybierania, lub promocyjne. W tym celu cieniujemy boki półprzeźroczystym gradientem, aby wstawić strzałki do przewijania.

Jeszcze same strzałki - trochę tekstu w stopce i mamy gotowy projekt!

Mam nadzieję, że się metody pokazane w tym tutorialu okażą się przydatne przy waszych projektach. Powodzenia!

Poniżej znajduje się odnośnik do pobrania gotowego szablonu w pliku PSD. Plik nie zawiera użytych zdjęć, ale zachęcamy do wstawienia własnych grafik: