Photoshop:jak zrobić profesjonalny layout sklepu internetowego – [download]

W dzisiejszym tutorialu zademonstruję, jak krok po kroku jak stworzyć grafikę dla profesjonalnego sklepu oferującego zdrowe napoje. Na pewno jednak znajdzie zastosowanie także dla innego rodzaju serwisów e-commerce.

autor:Jan Wilczek

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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.

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Tak samo robimy z jasnym polem.

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Na pole menu w proporcjach ustawiamy cień.

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

Photoshop: Profesjonalny layout sklepu internetowego

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

Photoshop: Profesjonalny layout sklepu internetowego

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!

Photoshop: Profesjonalny layout sklepu internetowego

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:

źródło:internetmaker.pl
Jeśli chcesz Servicetek Group może za ciebie wykonać twoja stronę www
szczegóły znajdziesz tu: www.servicetek.media.pl
Do końca września trwa promocja 20 % zniżki na wszystkie nasze usługi. Sprawdź to!