Korzystając z tej witryny, wyrażasz zgodę na Politykę prywatności.
Akceptuję
Magazyn T3Magazyn T3Magazyn T3
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Czytasz: Photoshop: Profesjonalny layout sklepu internetowego
Podziel się
Powiadomienie Pokaż więcej
Aa
Magazyn T3Magazyn T3
Aa
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Szukaj
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Zaobserwuj
  • Advertise
© 2007-2023
Magazyn T3 > Wszystkie > Internet Maker > Photoshop: Profesjonalny layout sklepu internetowego
Internet Maker

Photoshop: Profesjonalny layout sklepu internetowego

Tomasz Galanciak
Tomasz Galanciak Opublikowany 09/09/2009
Podziel się
4 minut(y) czytania

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

- Reklama -

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)

- Reklama -

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ę także zainteresować

30 urodziny Adobe Photoshop

Sztuczna inteligencja od Adobe rozpoznaje edytowane zdjęcia

Adobe Photoshop trafi na iPady

9 Celebrities who have spoken out about being photoshopped

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

TAGI: Photoshop, Szablon strony WWW
Tomasz Galanciak 09/09/2009 09/09/2009
Podziel się tym artykułem
Facebook Twitter Whatsapp Whatsapp LinkedIn Reddit Telegram Email Skopiuj link Drukuj
Podziel się
Poprzedni artykuł Czy e-mail da się chronić?
Następny artykuł Router DrayTek zamiast modemu USB

Ostatnie newsy

Słuchawki Bowers & Wilkins Px8 w nowym, burgundowym wykończeniu
Newsy 28/09/2023
RIVACASE VA1075/VA1080 – mobilne zasilanie dla laptopów
Newsy 28/09/2023
Creative Stage SE mini – soundbar z Bluetooth i USB
Newsy 28/09/2023
System macOS Sonoma dostępny
Newsy 27/09/2023

Reklama

//

Stylowy, rzetelny, inteligentny – Magazyn T3. Jesteśmy wiodącym magazynem lifestyle’owym, dostępnym co miesiąc w druku i cały czas dla Was online, skupionym na nowych technologiach.

NASZE SERWISY

DOM, OGRÓD I WNĘTRZA BudujemyDom.pl | WybieramyDom.pl | CoZaIle.pl | Informator Budownictwa | ZielonyOgródek.pl | CzasNaWnetrze.pl | Ekobudowanie.pl

 

MUZYKA I DŹWIĘK Audio.com.pl | MagazynGitarzysta.pl | MagazynPerkusista.pl | EstradaiStudio.pl | LiveSound.pl

 

ELEKTRONIKA I AUTOMATYKA ElektronikaB2B.pl | AutomatykaB2B.pl | Elektronika Praktyczna | Elportal.pl | Świat Radio
FOTOGRAFIA, EDUKACJA I HI-TECH DigitalCameraPolska.pl | Fotopolis.pl | MagazynT3.pl | MlodyTechnik.pl
ZDROWIE I RODZINA KtoCieWyleczy.pl

Magazyn T3Magazyn T3
Zaobserwuj
© 2007-2023
Witaj z powrotem!

Zaloguj się

Zapomniałeś hasła?