Gru
7
2013

Tworzymy szablon na Allegro w Photoshopie

Dobrze wyglądający szablon aukcji świadczy o naszym profesjonalizmie oraz o tym, że szanujemy naszych klientów. Pozwala na większą sprzedaż i ułatwia klientowi łatwiejsze podjęcie decyzji o zakupie. Z tego powodu warto zadbać o profesjonalny wygląd szablonu.
Stworzenie i zakodowanie szablonu allegro zajmuje znacznie mniej czasu niż strony internetowej. Projektując swój szablon pamiętaj o tym, że nie możesz w nim użyć czcionek osadzonych. Warto postawić na szybki czas ładowania szablonu, zwłaszcza wtedy, gdy do aukcji dołączasz wiele zdjęć. Stworzenie własnego szablonu daje satysfakcję i pewność, że nikt z konkurencji nie będzie go używał. W przypadku szablonów darmowych trudno jest znaleźć coś ciekawego i oryginalnego. Są one dostępne dla każdego. Zakup płatnego szablonu to dość duży wydatek. Z tego powodu publikujemy tutorial, skierowany dla osób początkujących. Po stworzeniu szablonu należy go zakodować do html z załączonymi stylami CSS. Najlepiej stworzyć osobne szablony do każdego produktu z opisami, dzięki czemu wystawianie aukcji zajmie mało czasu.

Pierwsze założenia

Pracę zaczniemy od otworzenia pliku z siatką, który ściągamy ze strony http://960.gs/. W szablonie użyłem siatki o 12 kolumnach. Szablon allegro ma znacznie mniej elementów, niż strona internetowa, dlatego lepiej będzie się prezentować nieskomplikowany widok. W tym celu unikamy stosowania zdjęć, tam gdzie można je zastąpić jednolitym kolorem.

ScreenClip

Na tym etapie trzeba zastanowić się, jaki ma być układ poszczególnych elementów dotyczących aukcji. Można to zmienić podczas kodowania szablonu, ale lepiej sprawdzi się dokładne przemyślenie sprawy na samym początku. Uważam, że lepsza jest kolorystyka stosowana, nawiązująca do produktu niż „choinka”, którą można obejrzeć w przypadku aukcji wystawianych przez amatorów.

——————————————————————————————————————————-

Zobacz kurs Photoshop projektowanie stron -> TUTAJ

——————————————————————————————————————————-

Podstawą każdego szablonu jest mocne zdjęcie w nagłówku. Możesz użyć tu swojego pliku, ściągnąć je z darmowej strony lub zakupić w internecie.

Tła szablonu

Tło ustawiamy na neutralny, jednolity kolor, po to, by nie rozpraszało uwagi osoby, która ogląda szablon. W tym celu wybieramy narzędzie Prostokąt (U). Tryb rysowania ustawiamy jako Kształt, a kolor to pośrednia szarość. Po narysowaniu prostokąta można zmienić jego wymiary za pomocą komendy ctrl + t. Dopasowujemy go do siatki. Warto włączyć sobie przyciąganie do siatki.

ScreenClip [1]

Nagłówek – zarys

Na nowej warstwie tworzymy header, czyli nagłówek naszej aukcji. Na początku działamy jedynie zaznaczając elementy, dlatego będzie oznaczony białym prostokątem. Rysujemy go od góry obszaru, a następnie, gdy już jest narysowany, przesuwamy go. Klikamy w niego myszką i następnie przenosimy kombinacją strzałka w dół + shift, naciskając ją dwa razy. Przenosimy go wtedy o 20 px. Jeszcze do niego powrócimy.

Sidebar

Następnie tworzymy tło dla napisów, które będą opisywały nasz produkt. W tym celu rysujemy nieco jaśniejszy, szary prostokąt pod spodem. Możemy także skopiować nagłówek poprzez przeciągnięcie go z klawiszem alt, a następnie zmienić nazwę i powiększyć po edycji rozmiaru.
Teraz tworzymy boczny panel. Zdecydowałem się na stworzenie go z lewej strony aukcji.

ScreenClip [2]            ScreenClip [3]

Stwórz nowy zestaw warstw i nazwij go sidebar.
Na tym etapie możesz także pogrupować poprzednio stworzone warstwy. Nieco powiększyłem sobie obszar roboczy, co było związane także z powiększeniem tła i elementów na dole. Nie ograniczaj się, gdyż będziesz potrzebować miejsca.
Za pomocą narzędzia prostokąt stwórz trzy elementy na pasku bocznym i wyrównaj je za pomocą sposobu, który opisałem poprzednio (przesuwanie z shift). Ich wysokość nie jest zbyt ważna, gdyż można ją ustalić jako automatycznie dopasowującą się do zawartości. U góry każdego elementu dodaję zielony prostokąt. Jego rozmiary w stylach CSS będą takie same.

Przygotowanie nagłówka

W tym celu użyłem zdjęcia, które także pochodzi ze strony sxc.hu. Otwieram je jako nowy plik.

ScreenClip [4]

Zdjęcie kadruję do rozmiarów, które mniej – więcej przypominają nasz nagłówek. Poprawię to za chwilę. Ważne jest to, by fotografia nie była zbyt mała. Następnie ustalam szerokość w Image Size na 960 pikseli i skaluję zdjęcie proporcjonalnie. Warto zrobić nieco miejsca na napisy.

Tworzymy nową warstwę i wracamy do poprzedniej warstwy tła. Używamy teraz narzędzia zaznaczenie prostokątne, ustawiając wąski obszar u góry pliku. Będzie stanowić tło dla jasnych liter, dlatego ściemniamy go.

ScreenClip [6]

Pasek u dołu robimy w podobny sposób, rozjaśniając go. Uzyskamy tło dla liter o kolorze czarnym.

ScreenClip [5]

 

 

ScreenClip [7]

 

Logo

Logo utworzymy w nietypowy sposób. Na stronie sxc.hu znalazłem obraz tarczy.

1195510_47830189

Otwieram go w osobnym pliku, zaznaczam białe tło magiczną różdżką, a następnie zaznaczam odwrotność. Wklejam ją na plik z nagłówkiem i dopasowuję rozmiary. Jeśli podczas skalowania obrazu klikniesz przycisk shift, jego proporcje pozostaną takie same. Nieco rozmyłem jego białe krawędzie za pomocą narzędzia blur.

ScreenClip

Nie pozostaje nic innego, jak spłaszczyć wszystkie warstwy i wkleić nagłówek w odpowiednie miejsce na szablonie. Zajmijmy się teraz typografią.

Typografia

W grupie warstw, w której znajduje się nagłówek aukcji, stwórz kolejną grupę warstw o nazwie napisy. Warto zastanowić się teraz nad kodowaniem szablonu. Niektóre napisy możesz umieścić w pliku jpg, który będzie obrazkiem nagłówka, inne zaś musisz załączyć za pomocą CSS. Poniżej opis czcionki, która została zastosowana jako nazwa strony.

—————————————————————————————————–

Zobacz kurs Photoshop kodowanie HTML & CSS -> TUTAJ

—————————————————————————————————–

Pamiętaj, że allegro niechętnie podchodzi do reklamowania swojej witryny na aukcjach. Aby uatrakcyjnić tekst i sprawić, żeby był bardziej widoczny, dodałem 2 px obrysu. Rozmieszczając elementy kierujmy się siatką, którą wczytaliśmy na samym początku.

ScreenClip [9]

Następnie piszemy tekst u góry oraz u dołu. Linki u dołu mają kolor pobrany za pomocą pipety z obrazka, co powinno się dobrze komponować z całością. Trzeba je teraz wyrównać. Poniżej podaję właściwości tekstu.

ScreenClip [10]

ScreenClip [11]

Zaznaczamy rozjaśniony pasek u dołu nagłówka. Zaznaczamy wszystkie napisy na pasku warstw i klikamy w narzędzie przenoszenia elementów. Pojawia się okienko wyśrodkowań elementów. Klikamy na ikonę pośrodku ScreenClip [15]. Następnie zsuwamy wszystkie elementy razem i odsuwamy je od siebie o 20 px, używając shift i strzałki w prawo. Uzyskaliśmy tym samym ładne wyrównanie napisów. Oczywiście, nie można ich napisać wszystkich razem i następnie oddzielać spacjami.

ScreenClip [13]

ScreenClip [14]

Zielony kolor, który wybraliśmy na początku nie pasuje do całego szablonu. Boczne elementy będą w stonowanej kolorystyce czerni i bieli. Można je wykonać w atrakcyjniejszy sposób. Każdy element może mieć obok małą ikonkę, przedstawiającą symbole kontaktu, płatności i wysyłki. Takie ikonki stworzymy samemu albo ściągniemy z innej strony internetowej. W takim przypadku nie można zakodować tego elementu jako zwykły kolorowy elementu div, co nieco utrudnia kodowanie. Obrazek trzeba wtedy wrzucić na serwer i podać do niego link w kodzie html.

Opisy aukcji

Napisy tworzymy białą czcionką bezszeryfową. Wyśrodkowujemy napisy w taki sam sposób, jak opisaliśmy poprzednio. W tym celu zaznaczamy prostokąt, w którym znajduje się napis. Z uwagi na to, że przy tworzeniu szablonów allegro masz mniej swobody, niż przy normalnych stronach, radzę ograniczyć się do niewielkiej ilości czcionek, co ułatwi kodowanie.

ScreenClip [17]

Opisy w blokach zostały napisane czcionką Arial 18 pt bez dekoracji. Kolor to bardzo ciemny szarość. W tym momencie rysujemy na podstawie siatki jeszcze jeden prostokąt o kolorze białym, który będzie tłem pod aukcje. Linijki włączamy i wyłączamy skrótem ctrl + h.

Następnie uzupełniamy za pomocą dowolnego tekstu (użyłem w tym celu generatora lorem ipsum) część aukcji, w której znajduje się opis produktu. Teksty w nagłówku pisane są dużą czcionką Times New Roman, natomiast pozostała część opisu została napisana arialem. Jeśli tworzysz szablon aukcji, który zamierzasz sprzedać, najlepszym rozwiązaniem jest zastosowanie wszędzie tekstu lorem ipsum.

ScreenClip [19]  ScreenClip [18]

 

Galeria zdjęć

Nad opisem aukcji użyjemy małej galerii zdjęć produktów. Można w tym celu stworzyć ciekawy kolaż zdjęć. W tym celu stworzymy nowy plik o domyślnych wymiarach. Przenieś na niego kilka zdjęć, które najbardziej odpowiadają sprzedawanym towarom. Następnie przenieś go na szablon aukcji. Poniżej umieścisz zdjęcia konkretnego produktu.

ScreenClip [20]   ScreenClip [21]


O autorze: Kamil Naja

Przygodę z obrazem zaczął od fotografii. Photoshopa poznaje od 2006 roku i program ten wciąż zaskakuje go możliwościami. Zajmuje się także copywritingiem oraz tworzeniem stron internetowych. Prowadzi własną firmę.

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie