Connect with us

Cześć, czego szukasz?

Internet Maker

Photoshop: Profesjonalny layout sklepu internetowego

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.

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/1171647
  2. herbata z miętą – http://www.sxc.hu/photo/1058131
  3. faktura ściany – http://www.sxc.hu/photo/1197324
  4. liście – http://www.sxc.hu/photo/1005122
  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:

Może cię też zainteresować

Newsy

Z tej okazji program wzbogacił się o kilka nowych funkcji.

Newsy

Narzędzie do walki z technologią deepfake?

Newsy

Pełna wersja programu dostępna już w 2019 roku.

Newsy

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.