Adobe Kuler to przede wszystkim baza kilkunastu tysięcy zestawów kolorów. Posiada możliwość podawania a zarazem wyświetlania kolorów w przestrzeniach barw RGB, CMYK , LAB, HSV oraz w zapisie szesnastkowym HEX. Samodzielne stworzenie optymalnych palet może jednak sprawiać problemy, dlatego Adobe przygotowało kilka gotowych układów, tak więc wystarczy je zmodyfikować by otrzymać estetyczny układ. Przydatna jest też wyszukiwarka , która pomoże nam odszukać kolory które zostały opisane odpowiednimi słowami kluczowymi (np. orange, light, fresh itp). Serwis jest anglojęzyczny więc najlepiej wyszukiwać kolorowy poprzez angielskie tagi.

Adobe kuler – strona główna

Jeśli nie mamy ochoty, bądź czasu na to by wyszukiwać z pośród tysięcy kompozycji barwnych tej odpowiedniej mamy możliwość stworzenia własnej w parę chwil. Do stworzenie nowej palety kolorystycznej posłuży nam bardzo przyjemny, funkcjonalny a zarazem intuicyjny panel użytkownika.
Aby w pełni wykorzystać możliwości Kulera, należy wcześniej się zarejestrować. Wchodzimy zatem na stronę www.kuler.adobe.com a następnie klikamy na link Register i podajemy niezbędne informacje. Chciałbym podkreślić iż konto założone w systemie Adobe oferuje nam możliwość korzystania z wszystkich produktów Adobe (np. Kuler, Acrobat, Photoshop.com itp.)

Jeśli chcemy stworzyć nową paletę kolorów, wybieramy z lewego menu strony Create a następnie From a Color bądź From an Image.

From a Color

Dzięki tej opcji mamy większe pole manewru w tworzeniu nowego zestawu kolorów. Na samym początku musimy określić kolor bazowy. Aby to zrobić musimy wpisać wartości liczbowe np. CMYK lub RGB w dolnej części okna w jednej z podstawowych przestrzeni barw, albo za pomocą suwaków, które znajdują się poniżej próbki.Po wybraniu koloru bazowego, musimy kliknąć na polecenie Set a Base znajdujące się nad próbką. Spowoduje to zapamiętanie koloru jako podstawę tworzonej palety.

Gdy już ustalimy podstawowy kolor zestawu, możemy wybrać typ tworzonej palety. Kuler w swoim mechanizmie posiada kilka podstawowych rodzajów palet.

Adobe kuler – główny panel zarządzania kolorami

• Analogous- paleta analogowa, gdzie kolory sąsiadują ze sobą na kole barwnym (kolorów).Kuler dobiera do wprowadzonego koloru bazowego , kolory z nim sąsiadujące. Barwy charakteryzują się niskim kontrastem.
• Monochromatic- paleta monochromatyczna , podstawowym kolorem jest kolor bazowy oraz jego najjaśniejsze i najciemniejsze odcienie. Barwa posiada najwyższy kontrast, jaki jest możliwy do uzyskania w całej przestrzeni barwnej. Kontrast uzyskamy pomiędzy najjaśniejszymi a najciemniejszymi odcieniami..
• Triad- paleta triadowa, tworzą ją jak wskazuje nazwa trzy kolory , które znajdują się na kole kolorów w równych odległościach od ciebie (60°). Paleta pozwala uzyskać kolory pierwszorzędnych (żółty, czerwony, niebieski) , oraz drugorzędnych (pomarańczowy, zielony i fioletowy).
• Complementary- paleta komplementarna, tworzą ja dwa kolory leżące naprzeciwko siebie na palecie barwnej. Na przykład pary kolorów: czerwony –zielony , bądź niebieski – żółty. Barwy posiadają wysoki kontrast.
• Compound- paleta Compound jest podobna do poprzedniej ale z uwzględnieniem wielu odcieni koloru bazowego i przeciwnego.
• Shades- paleta Cienie – reguła dobierania kolorów jest podobna jak w palecie monochromatycznej. Lecz jej odmienność polega na tym iż paletę monochromatyczną tworzy kolor bazowy wraz z najjaśniejszymi i najciemniejszymi odcieniami. Natomiast w przypadku palety Shades paletę tworzy kolor bazowy wraz z ciemniejszymi od niego odcieniami.
• Custom- paleta niestandardowa, która pozwala na samodzielne zdefiniowanie zestawu kolorystycznego.

From an Image

Bardzo przydatną funkcją Kuler’a jest tworzenie palety kolorów na podstawię fotografii. Zdjęcie możemy uploadować za pomocą przycisku Upload New Image, obsługiwane formaty plików to (.jpg, .png oraz .bmp).Mamy także możliwość wgrania zdjęcia z serwisu Flickr.

Po załadowaniu zdjęcia Kuler tworzy paletę kolorów z przypadkowych barw zawartych na fotografii. Na danym zdjęciu pokazane są miejsca próbkowania, aczkolwiek w razie konieczności mamy możliwość przesunięcia próbnika w dowolne miejsce obszarze zdjęcia. Ta funkcja również posiada opcjonalne typy palety (Colorful, Wright, Muter, Deep, Dark).

Adobe kuler – upload zdjęć z dysku i z serwisu Flickr

Pobieranie i wczytywanie palety kolorów w produktach Adobe

Adobe Kuler umożliwia nam również pobieranie stworzonej przez nas palety kolorów na dysk twardy. Pliki zapisywane są z rozszerzeniem .ase. Wówczas mamy możliwość wgrania gotowych palet do Photoshopa, InDesigna czy też Illustratora. Aby pobrać paletę należy, wybrać interesujący nas zestaw kolorów, a następnie kliknąć na przycisk (Adobe Download this Theme as an Adobe Swat Exchange file).

• Wczytywanie palety w Photoshopie- Kiedy mamy zapisaną paletę na dysku, i chcemy ją importować do Photoshopa, musimy upewnić się czy mamy włączony panel Swatches (Próbki). Jeżeli nie jest włączony, możemy go aktywować z menu kontekstowego Window> Swatches. Następnie w panelu z Próbkami z rozwijanego menu wybieramy Load Swatches (Załaduj Próbki) lub Replace Swatches (Zmień Próbki) dzięki czemu na palecie będą widniały tylko kolory z wczytanego pliki który pobraliśmy z Kuler’a. W przypadku kiedy będziemy chcieli zresetować wszystkie dostępne próbki należy wybrać z listy opcje Reset Swatches (Resetuj Próbki).



• Wczytywanie palety do Indesgina i Illustratora- Na podobnej zasadzie będziemy wczytywać palety kolorów do Indesigna czy też Illustratora. Ponownie wybieramy panel Swatches (Próbki) z rozwijanego menu wybieramy Open Swatches Library> Other Library (Otwórz bibliotekę próbek> Inna biblioteka) a następnie wybieramy zapisany plik z paletą. Co ciekawe w Illustratorze wgrana paleta nie jest dodawana do pozostałych próbek, tak jak było to w przypadku Photoshop’a, lecz tworzony jest nowy panel.

Kuler na pulpicie i bezpośrednio w programie

Adobe postarało się i wydało aplikację którą instalujemy na naszym komputerze. Działa ona w środowisku Adobe Air. Dzięki tej aplikacji mamy możliwość np. przeglądania najnowszych, najbardziej popularnych, zestawów kolorów, a także stworzonych przez nas samych palet. Można ją pobrać ze strony Adobe.com

Oprócz tego w każdym produkcie Adobe  (Photoshop, Indesign, Illustrator itd.) jest możliwość włączenia panelu Kuler, wybierając z menu Window> Extensions> Kuler. Posiada on takie same właściwości jak aplikacja którą instalujemy na naszym komputerze.

Czasem widzimy w projektach stron internetowych, gdzie autor pracy wykorzystał zdjęcia z iStockPhoto, w ten czas zadajemy sobie pytanie „Jak otrzymał duże zdjęcie z tego serwisu?”. Teraz postaram się odpowiedzieć na to pytanie, przedstawiając Wam dwa sposoby na otrzymanie zdjęć o dużej rozdzielczości (oczywiście ze znakiem wodnym).

I sposób – składanie

Pierwszy sposób już jest praktycznie nie stosowany, z powodu iż dużo czasu poświęcaliśmy na złożenie jednego zdjęcia, czasem zdarzało się, że ta monotonia sprawiała pojawienie się niechęci kontynuowania pracy nad danym projektem, kiedy mieliśmy już gotowe Stocki.

1. Za pomocą kursora wybieramy odpowiedni fragment zdjęcia, następnie klikając prawym przyciskiem myszy z listy wybieramy Zapisz obrazek…

2. Kompletujemy wszystkie fragmenty zdjęcia, po czym w dowolnym programie graficznym, który posiada warstwy (np. Photoshop, Gimp, Fireworks), składamy gotowe zdjęcie z fragmentów zapisanych na dysku.

3. Tak otrzymane zdjęcie zapisujemy i już teraz możemy wykorzystać je do naszej pracy.

II sposób- iStockZOOM

Drugi sposób jest łatwiejszy oraz mniej czasochłonny. Skorzystamy z wtyczki iStockZOOM dostępnej dla przeglądarki Firefox, która pomoże nam wygenerować duże podglądy zdjęć (i niektórych ilustracji wektorowych) z serwisu www.istockphoto.com bez używania programu graficznego do ręcznego sklejania fragmentów zdjęcia, tak jak robiliśmy to w przykładzie pierwszym.
Pierw musimy zainstalować wtyczkę, znajdziemy ją pod adresem https://addons.mozilla.org/pl-PL/firefox/addon/12958/ , a następnie zalogować się w serwisie IstockPhoto, lub jeśli nie posiadamy konta, zarejestrować się.

Tuż po instalacji wtyczki, ikonka iStockZOOM powinna pojawić się w pasku narzędzi, jeśli jej nie ma przejdź do menu widok> Pasek Narzędzi> Dostosuj... ,a następnie odszukaj ikonkę iStockZOOM i przeciągnij ją na pasek narzędzi.

Następnie otwieramy interesujący nas Stock, klikamy na zdjęcie by je powiększyć, korzystając z suwaka ustawiamy odpowiedni poziom powiększenia. Klikamy w ikonę iStockZOOM znajdującą się w pasku narzędzi, dzięki niej zostanie wygenerowany duży podgląd, musimy odczekać chwilę aż załaduje się całe zdjęcie. Ostatni krok to klikniecie na zapisz, aby zapisać cały obrazek.

I tak w bardzo łatwy i szybki sposób otrzymaliśmy wygenerowane zdjęcie, teraz pracy i czasu nad danym projektem poświecimy na pewno mniej.

Tło

Zaczynamy od tła:

• Layer -> Layer Style -> Gradient Overlay (#c7c7c7, #ebebeb)

  

• Color (#f5ca11)
• Layer -> Layer Style -> Gradient Overlay (#158cae, #086a87)
• Color (#076581)

Top

Mamy tło. Czas zatem na top. W tym przypadku tylko czcionka o odpowiednich parametrach.
Font: Arista 2.0 Alternate, 60 px, Sharp, Layer -> Layer Style -> Bevel and Emboss

Menu

Aby stworzyć menu takie jak w powyższym projekcie:

1. Tworzymy prostokąt o dowolnych wymiarach

   

2. Wciskamy Ctrl + T i obracamy obiekt o -63 stopnie

   

3. Duplikujemy warstwę. ( Layer-> Duplicate Layer )
4. Wybieramy z przybornika Rectangular Marquee Tool i zaznaczamy tak jak na rysunku, po czym wciskamy Delete, aby pozbyć się zaznaczonej części

   

5. Następnie zaznaczamy pozostawiony element, Ctrl + T, naciskamy prawy klawisz myszy i wybieramy Flip Vertical

   

6. Powracamy do naszego prostokąta. Wybieramy kolor (Layer -> Layer Style -> Gradient Overlay)

   

7. Za pomocą zaznaczenia usuwamy zbędny obszar

   

8. Następnym krokiem jest utworzenie gradientu na trójkącie (Layer -> Layer Style -> Gradient Overlay) Wybieramy ten sam kolor tylko odwrotne mieszanie!

   

9. Duplikujemy warstwę i rozmywamy ją zmieniając wcześniej jej kolor na czarny i porządkując warstwy, Filter -> Blur -> Gaussian Blur, 5 pixels

   

10. Zaznaczamy niepotrzebny obszar w sposób widoczny na rysunku. Ważne, aby Feather ustawić na 10 px i wciskamy Delete.

    

11. Zmieniamy widoczność warstwy na 60 %

    

12. Dodajemy napis. Czcionka: Arista 2.0, 20 px, Sharp i obracamy tak by pasowała do buttony.
13. Inne kolory tworzymy analogicznie.

Content

1. Tworzymy prostokąt w kolorze: #2ea6ca
2. I drugi, tej samej szerokości ale znacznie niższy, w tym samym kolorze

   

3. Zajmijmy się mniejszym prostokątem. Layer -> Layer Style -> Gradient Overlay (#076581, #2ca2c6)

   

   i przezroczystość : 20 %

   

4. Tworzymy kolejny prostokąt, również używając gradientów. Dodajemy zdjęcie i tekst

   

5. Następnie tworzymy niewielki kwadrat. Ustawiamy ramkę 4 pixelową

   

   oraz ustawiamy gradient (Style: Radial)

   

6. Dodajemy napis "01". font: Arista 2.0
7. Drugą część tworzymy analogicznie.
8. Możemy dodać także poziome kreski, np. powtarzając znak pauzy ('-') czcionką Arial.

Stopka

Na koniec pracy podpisujemy swoje dzieło.

Ostatecznie praca powinna wygląda następująco:

Sylwia Bartyzel, 2009
www.ForFuture.pl
źródło : zdjęcia pochodzą z sxc.hu

WSKAZÓWKA DLA POCZĄTKUJĄCYCH! Każdy element zamieszczaj na nowej warstwie! (Ctrl + Shift+ N)

Tło

Tło tworzy gradient. Użyte kolory : #FFFFFF, #e9e0c3.

Top

Czcionka : Myriad Pro, 48 px, Sharp, Layer -> Layer Style -> Blending Options -> Gradient Overlay -> #01779a, #0e8fb6, #01779a,

Layer -> Layer Style -> Blending Options -> Stroke -> Size : 4px, #FFFFFF, Position : Outside, Opacity 50 %

Obraz

Aby urozmaicić stronę kolorystycznie i nadać jej przyjemny dla oka wygląd wybrałam łąkę. Dół obrazka jest lekko rozmyty (kopiujemy warstwę, Filter -> Blur -> Gaussian Blur -> Radius: 2 px, )

następnie za pomocą Rectangular Marquee Tool usuwamy niepotrzebny obszar. Dodajemy napis "Najlepszy sprzęt w sieci" (Myriad Pro, 48 px, Sharp, Gradient Overlay : #FFFFFF, #ededed, #FFFFFF, Stroke : Size : 1 px, #868686, Position : Outside, Drop Shadow : Opacity 75%, Distance : 2px, Spread 0%, Size 0 px).

Na utworzone wcześniej tło dodajemy oczywiście przedmiot wiodący, w tym przypadku telefon z piórkiem. Do piórka dodałam element wiosenny, jakim są liście. Można wykonać je za pomocą przyrządu Pen Tool (P) bądź poszukać liści w serwisach z darmowymi ikonami.

Menu

W tym przypadku 5 kategorii. Opiszę jak stworzyć pierwszy element. Pozostałe części wykonujemy analogicznie.
1. Wybieramy z panelu narzędzie Rounded Rectangle Tool. Zaznaczamy interesujący nas obszar.

2. Następnie żeby dopełnić kształt na zakładce warstw, klikamy prawym klawiszem myszy w warstwę z kształtem i wybieramy Rasterize Layer

3. (Możemy zmienić kolor, żeby wszystko było wyraźne). Wybieramy Rectangular Marquee Tool i zaznaczamy obszar jak na rysunku

Wybieramy pojemnik z farbą i wypełniamy nim zaznaczony kontur.
4. Uzyskaliśmy interesujący nas kształt. Teraz czas na kolorystkę. Layer->Layer Style -> Blending Options -> Gradient Overaly (parametry takie jak na screenie)

kolory : #dfd7be, #f4efde

5. Następnym elementem jest utworzenie numeru. W tym celu wybieramy Eliptical Marquee Tool. Tworzymy kształt koła przytrzymując klawisz Shift (aby było równomierne) następnie wypełniamy obszar farbą.

6. Aby uzyskać taki efekt jaki przedstawiłam konieczna jest zmiana kolorów. W tym celu korzystamy z opcji mieszania (Blending Options) wybieramy Gradient Overlay. Ustawiamy gradient o barwach : #f4efde, #dbd3ba. Oraz co najważniejsze, Style zmieniamy na Radial.

Dodajemy ponadto ramkę aby podsycić efekt (Stroke-> Size : 3 px, Position : Outside, Color : # e7dfc5).
7. Ostatnim elementem jest dodanie numeru : Myriad Pro : 22 px, Sharp, #bbb18e oraz tekstu wiodącego.

Stopka

Kończąc stronę nie zapominajmy o stopce. Cienki pasek stworzymy za pomocą Single Row Marquee Tool.

Osatecznie powinno wyglądać to tak:

Sylwia Bartyzel, 2009
www.ForFuture.pl
źródło : zdjęcia pochodzą z sxc.hu

XXI wiek to przede wszystkim technika. Obserwujemy na rynku rozwój wielu urządzeń ułatwiających i urozmaicających nasze życie. Ich prostota w użytkowaniu sprawia, że już od najmłodszych lat możemy ją w pełni wykorzystać. Aparaty cyfrowe są właśnie jednym z takim urządzeń, więc robienie zdjęć nie jest już dla nikogo żadnym zaskoczeniem. W poniższym artykule chce przedstawić prosty projekt strony, gdzie każdy fotograf może prezentować swoje zdjęcia.

WSKAZÓWKA DLA POCZĄTKUJĄCYCH! Każdy element zamieszczaj na nowej warstwie! (Ctrl + Shift+ N).

Tło

1) Kluczowy element każdej strony. Wybieramy z palety kolorów, kolor czarny i ‘zalewamy’ nim nasz obszar roboczy. Duplikujemy ową warstwę, z paska zadań wybieramy Filter -> Artistic -> Film Grain (Grain : 1, Highlight Area : 0, Intensity 10). Otrzymaliśmy efekt ziarnistości.

Przezroczystość warstwy zmieniamy na 70% (Layer -> Layer Style -> Blending Options -> Opacity : 70%)

2) Aby stworzyć białą ‘flarę’ w góry strony wybieramy z przybornika Gradient Tool (G), ustawiamy Radial Gradient biało-przezroczysty i tworzymy gradient w wybranym miejscu. Następnie zmieniamy jego przezroczystość na 30%.

Top

1) W tym przypadku napis, czcionka : Myriad Pro, kursywa, sharp, 30 px, Gradient Ovelay (biało-szaro-biały), Drop Shadow (Distance 3 px, Spread 0%, Size 25 px).

2) Można również dodać pasek. W tym celu tworzymy odpowiedni pattern (File -> New-> 8x1 px powiększamy maksymalnie obszar roboczy. Wybieramy ołówek tworzymy kształt :

następnie aby dodać wzór do palety Edit -> Define Pattern). Wracamy do naszego projektu, wybieramy zaznaczenie Single Row Marquee Tool, następnie Paint Bucket Tool, ustawiamy Pattern, i wypełniamy nim zaznaczony obszar.

Ustawiamy warstwę na Ovelay.

O autorze

1) Tworząc portfolio fotograficzne pamiętajmy o tym, że tym samym prezentujemy siebie. Warto więc zamieścić na stronie swoje zdjęcie. Ramkę ustawiamy poprzez : Layer -> Layer Style -> Blending Options -> Stroke (Size : 5 px, Position : Inside, Color : # 363636).

Możemy lekko przekrzywić zdjęcie za pomocą kombinacji klawiszy Ctrl + T.

2) Informacje. Imię i nazwisko : czcionka : Myriad Pro, Sharp, 24 px. Oraz krótka notka : Tahoma, None, 11 px, color : # 464545.

Kontakt

1) Ikony zawarte na stronie wzbogacają ją wizualnie. Tutaj, czarno białe (Ctrl + Shift + U) i czcionka : Fujiyama, Sharp, 18 px, color : # 989898.

Menu

1) Linie. Tworzymy tak samo jak w punkcie topie w punkcie 2. Obracamy o 90 stopni ( Ctrl + T -> Prawy klawisz myszy -> Rotare 90 st CW ).
2)Czcionka e menu : Tahoma, None, 11 px, color : #FFFFFF, interlinia : 24 pt.

3) Można również stworzyć niewielkie przejścia koloru. W tym celu zaznaczamy interesujący nas fragment i w ten sam sposób jak w punkcie 1.2 tworzymy gradient.

Zdjęcia

1) Miniaturki. Zmniejszamy zdjęcie do interesujących nas rozmiarów (tutaj : 151x98 px), tworzymy ramkę (patrz o autorze, punkt 1.). Na nowej warstwie tworzymy maleńki czarny prostokącik, zmieniamy jego przezroczystość na 70%. Dodajemy napis : „Kliknij aby powiększyć zdjęcie >>” (Tahoma, None, 10 px). Strzałki „>>” ustawiamy na 50 % szerokości.

Stopka

1) Ważny element każdej strony. Zamykamy cały projekt.

Koniec końców wygląda to następująco:

Sylwia Bartyzel, 2009, www.ForFuture.pl
źródło : zdjęcia pochodzą z serwisu www.sxc.hu

Krok 1.

Tworzymy nowy dokument, oczywiście w dalszych krokach tworzymy swoją podstawę, na której będziemy chcieli umieścić nasz wychodzący zza "podkładu" element (można tego użyć jako belki, menu, panelu logowania czy czego tylko będziecie chcieli).

Krok 2.

Wklejamy nasz kształt. W tej chwili interesuje nas tylko lewa strona, gdyż na niej będę prezentować efekt, stąd nierównomierne ułożenie brzegów po obu stronach (jak widać prawa część niebieskiego kształtu wystaje nieco bardziej).

Krok 3.

Zaznaczamy fragment, na którym będziemy pracować, wycinamy go, wklejamy i umieszczamy w pozycji wyjściowej - jednak nie zcalamy go z pozostałymi warstwami!

Krok 4.

Wybieramy nasz odcięty fragment i idziemy do Edit -> Transform -> Skew, po czym przekształcamy go mniej więcej do takiej postaci. Przekształcenie akceptujemy.

Krok 5.

Duplikujemy go, przesuwamy lekko w dół, a następnie scalamy dwie warstwy (fragment i jego kopię).

Krok 6.

Klikając na nasz fragment w okienku warstw z wciśniętym klawiszem CTRL zaznaczymy go.

Następnie zaznaczenie przesuwamy w dół, by jego górna część stykała się z dolną krawędzią kształtu, który początkowo pozostał nam po wycięciu...

(należy pamiętać, by podczas przesuwania zaznaczenia wybrane zostało narzędzie "marquee tool" - w przeciwnym razie nici ze zmiany miejsca jego położenia). Następnie wciskamy przycisk DELETE (bądź też wycinamy ten fragment, jak kto woli) i pozbywamy się niepotrzebnej części. Powinniśmy uzyskać taki efekt:

Krok 7.

Kolejnym krokiem jest stworzenie ciemniejszego kształtu i przeniesienie go poniżej wszystkich warstw oraz umieszczenie zaraz pod naszym wyciętym fragmentem.

Ostatecznym krokiem jest jego transformacja - tu postępujemy podobnie jak wcześniej, przy pomocy Edit -> Transform -> Skew przekształcamy nasz ciemny kształt tak, by po prostu pasował i sprawiał efekt menu wychodzącego spod białej podstawy. Powinniśmy dążyć do uzyskania efektu widocznego na poniższym obrazku.

Krok 8.

Jeśli chcemy ten wychodzący element jeszcze zmniejszyć, droga jest już niezwykle prosta. Wybieramy warstwę z naszym fragmentem, na którym od początku operujemy oraz warstwę z ciemnym kształtem, idziemy do Edit -> Transform i oba kształty po prostu "ściskamy".

Efekt końcowy

1. Układ

Rozmieszczając poszczególne fragmenty sklepu na szablonie powinno brać się przede wszystkim pod uwagę ważność każdego z nich.

Nie trudno jest sobie wyobrazić, że takim jednym z bardziej priorytetowych elementów jest "katalog produktów".Najlepiej umiejscowić go dość wysoko, tak aby klient wchodząc do sklepu mógł go od razu dostrzec i powinien widzieć wyraźnie z jakich kategorii złożona jest oferta. W zależności od zaawansowania sklepu, może taki katalog być ułożony w poziomie lub w pionie - to jest już rzecz gustu, należy jednak pamiętać o jak najprostszej nawigacji i przemieszczaniu się na stronie. Ułatwiony dostęp do wyszukiwanego produktu ułatwi także wielopoziomowość katalogu, a także wyszukiwarka produktów. Powinniśmy zadbać o to, aby na stronie głównej znalazła się przynajmniej podstawowa wyszukiwarka po słowach kluczowych z możliwością dalszego szukania zaawansowanego, gdzie klient mógłby dobrać wybrane przez siebie parametry szukanego przedmiotu.

Przykładem na dobrze rozmieszczony katalog są następujące projekty:

www.agito.pl

www.pumba45.deviantart.com

www.sklep.cristobal.pl

www.sklep-presto.pl

Przykładowe wyszukiwarki:

www.promobile.pl

www.twojepiora.pl

2. Produkty

W sklepie www kolejnym bardzo ważnym elementem są sprzedawane produkty.
Dlatego też powinniśmy je odpowiednio wyeksponować na stronie, sprawić, żeby nie sklejały się z sobą. Zwrócić uwagę też należy na cenę i parametry produktu (lub opis), cenę należy obrać nieco innym kolorem niż inną treść przy produkcie, tak aby była ona dobrze widoczna. Na widoku ogólnym wszystkich produktów z danej grupy można umieścić krótki opis produktu - najlepiej nie za długi, aby nie obciążać tej podstrony sklepu zbyt dużą ilością tekstu a jedynie konkretami. Nazwa produktu może być napisana innym krojem czcionki (pasującym do ogólnego stylu strony) lub wyróżniona może być innym kolorem tła lub tez kolorem własnym.
Nie zapominajcie, że we właściwie każdym, płatnym czy nie, skrypcie sklepowym można oznaczyć produkty jako "nowość", "promocja" i / lub "wyprzedaż" - bez wątpienia trzeba je jakoś oznaczyć i wyróżnić na stronie. W tym celu można stworzyć na stronie kolumny w których innym kolorem tła lub nagłówka można zaznaczyć takie istotne sprawy dla sklepu. Często wykorzystuje się też "metki" - różnego rodzaju graficzne elementy, indywidualne dla każdego rodzaju produktów, bardzo modne szczególnie w erze web 2.0.

www.kuchniasklep.pl

www.yerbamatestore.pl

www.promobile.pl

3. Widok produktu

Nie wiem jak inni ale ja lobię kiedy widok ogólny pojedynczego produktu nie jest specjalnie obładowany treścią. Powinny znaleźć się tutaj takie informacje o produkcie jak:
- nazwa produktu
- cena (detaliczna lub hurtowa z zaznaczonym podziałem w razie co)
- opis (jego opis zależy od producenta)
- parametry typu waga, ilość, materiał, wymiary etc.
- kwestia gwarancji
- dostępność
- koszt przesyłki
- akcesoria, które można zakupić do danego produktu

Parametry najlepiej ustawić jeden po drugim, zachowując zdrowy odstęp, aby wszystko było czytelne i nie sprawiało problemu przy wyborze innego rodzaju produktu: o innej kolorystyce, rozmiarze itp.
Wygospodarować należałoby też miejsce na dodatkowe zdjęcia prezentowanego produktu, aby zapewnić klientowi największą możliwość zapoznania się z ofertą. Do powiększania zdjęć można użyć przeróżnych skryptów, np. lightbox, thickbox, jquery lightbox i in. To z pewnością uatrakcyjni sklep.
Możliwość dodania produktu do koszyka czy też schowka powinno być dobrze widoczne, w tym celu projektując grafikę dobrze jest posłużyć się ikonami. Wtedy user wie i intuicyjnie porusza się po sklepie nie czytając koniecznie wszystkich instrukcji, ale pamiętając co oznacza konkretna ikona.

Dobrymi przykładami na prawidłowy i wygodny obraz widoku pojedynczego produktu są:

www.go2prezent.pl

www.galante.pl

www.narzedzia-pm.pl

3. Panel klienta

Administratorzy sklepów czasami narzucają konieczność wcześniejszej rejestracji nowego klienta przed dokonaniem zakupu, a niektórzy nie. Umiejscowienie panelu logowania jest dość istotne w takiej sytuacji. Nie powinniśmy pozwolić na to, aby user zaczął błądzić po stronie tylko dlatego, że nie ma oficjalnej informacji o braku konieczności rejestracji szczególnie w chwili gdy chcemy dokonać jednorazowego zakupu (swoje dane teleadresowe podajemy podczas realizowania zamówienia). Oczywiście jeżeli user się zarejestruje mimo, ze nie musi to pozostanie po nim ślad, a mają dobrze przyrządzony regulamin możemy pozwolić sobie na wysyłanie do wszystkich klientów wiadomości o najnowszych produktach, itp., oczywiście nie zapominając aby useromi pozwolić na rezygnację z otrzymywania takich wiadomości.

www.juka.pl

www.centrumsportu.eu

4. Koszyk

Z doświadczenia w przygotowywaniu szablonów pod sklepy oraz z dokonywanych zakupów w sklepach internetowych najróżniejszych, mogę powiedzieć, że pozytywna sprawą są dwa koszyki. Konkretnie mam tutaj na myśli jeden "skrócony" umieszczony na każdej podstronie, abyśmy wiedzieli ile produktów już mamy w koszyku oraz jakie są to produkty i jaki jest aktualny koszt zakupów. W takim koszyku warto umieścić link do "pełnego" koszyka, za pomocą którego będziemy mogli usunąć wcześniej wrzucony produkt, zmienić ilość zamówionych przedmiotów oraz wybrać formę płatności za zakupy oraz formę przesyłki.
Jeżeli zleceniodawca nie wymarzy sobie innych dodatków to są to podstawowe fragmenty składające się na sklepowy wirtualny koszyk.

www.agito.pl

www.merlin.pl

5. Dodatkowe "ficzery"

Od jakiegoś czasu weszło w życie sklepowe wiele dodatkowych opcji. Są to oczywiscie kwestie funkcjonalności ale projektując grafikę należy mieć je na uwadze.
Zaliczamy do nich:

a) Opinie o produkcie
Coraz więcej sklepów wprowadza tą opcję w działalność sklepu. Pozwala ona na stworzenie swojego rodzaju społeczności na stronie. A przy okazji nowy user, czy też klient, który zamierza "coś" kupić, może dowiedzieć czy warto i jak sprawdza się to "coś" w życiu codziennym. Nie da się ukryć - bardzo przydatna rzecz.

www.komputronik.pl

b) Tagi
Pojawiają się już na wielu serwisach, Pomagają w pozycjonowaniu strony, a także przy wyszukiwaniu bardziej sprecyzowanych artykułów, a w sklepach produktów. Dobrze jest przewidzieć miejsce na stronie głównej gdzie wyświetlane byłyby te słowa / frazy. Z czasem funkcjonowania sklepu zrobiłoby ich się bardzo dużo, dlatego też można ograniczyć ich wyświetlanie np. do 10 najpopularniejszych.

b) Lista życzeń (Wishlist)
Amazon.com wprowadził już jakiś czas temu coś co nazwa się Lista życzeń. Chodzi tutaj o to, że mają swoją stronę www i posiadając na niej tzw. dotację PayPalową, można ją zamienić na widok produktu, który bardzo by się chciało mieć. Jeżeli posiada się dość szeroką i wdzięczną widownię, można liczyć na to, że po jakimś czasie może ktoś nam sprezentuje to co byśmy chcieli. Pomysł jest bardzo fajny, ale trudno mi powiedzieć czy ma on przyszłość w Polsce. Czas pokaże. Jednak projektując sklep można przy widoku pojedynczego produktu wygospodarować miejsce na wygenerowanie linka do tego produktu już na zasadzie fragmentu htmla, aby Ci co chcą coś takiego wrzucić do siebie na stronę mogli to zrobić bez problemu.

Edycja
Tak jak kolega nizej w komentarzach zauważyłam, na Merlin.pl istnieje coś takiego jak "lista życzeń". Fukcjonuje ona jednak nieco inaczej niż ta wspomniana przeze mnie wyżej na Amazon.com.
Konkretnie gadżet ten na Merlinie działa niczym motorek napędzający nowych userów do rejestracji w systemie. Jedynym sposobem na poinformowania swoich znjomych o swojej liście życzeń jest wysłanie im maila z ta infomacją, ale... jeżeli dany znajomy nie ma konta na Merlin.pl wtedy nie zobaczy listy jaką mu przesłaliśmy. Biorąc pod uwagę, że sporo osób takimi listami może być zainteresowanych to na pewno zarejestrują się w sklepie i dokonają lub nie dokonają zakupu. Dlatego też nazywam to motorkiem...
Uważam, że amazon.com wprowadził zdrowsze zasady i pozwala userom na o wiele wygodniejsze korzystanie z wprowadzonej usługo.

Podsumowanie

Tak jak widzicie, łącząc wszystkie wyżej wymienione elementy w całość otrzymamy prawdopodobnie sklep idealny. Dla każdego grafika w przypadku sklepów jak i innych stron najważniejszy jest wygląd - żeby był super, wyglądał lepiej niż na innych stronach, etc etc. Ale należy pamiętać, że przepiękny layout nie zawsze idzie w parze z funkcjonalnością, gdzie jeżeli chodzi o sklepy to podstawa.
Jeżeli poszukujecie zbiorów sklepowych to polecam katalog: YourShops.pl - tutaj znajdziecie bardzo dużo sklepów internetowych z podziałem na kategorie tematyczne.

Życzymy przyjemnego projektowania sklepów internetowych!

Rozmiar projektu

Wiele z Was zapewne nie wie od czego zacząć. Według magazynu .PSD standardowe wymiary layoutu wynosić powinny 1008x768 px. W tym przypadku design dostosowany jest idealnie do rozdzielczości 1024x768. Problem się rodzi podczas gdy czytelnik naszej strony posiada monitor o rozdzielczości 800x600 czy 1280x1024. W pierwszym przypadku nasza strona wydaje się być zbyt duża, natomiast w drugim – za mała. Wszystkim dogodzić jednak nie można.

Kolorystyka

Jeden z ważniejszych elementów składowych strony. Należy pamiętać, że barwy witryny mają przyciągać, a nie odpychać. Zatem nie mogą być zbyt jaskrawe, odstraszające i męczące (jak na obrazku poniżej).

Stocki

Ważnym elementem każdej strony są zdjęcia. To one także przyciągają uwagę. Sprawiają, że strona jest ‘żywa’. Wywołują także u obserwatorów pozytywne emocje i przyjazne nastawienie do odbioru treści strony. Wszystko to działa jeśli jest oczywiście odpowiednio dobrane.

Patterny, Textury

Krótko mówiąc tło strony. Podobnie jak w kolorystyce nie mogą być one zbyt krzykliwe i odwracać uwagi od treści witryny. Na ogół funkcjonują 4 typy backgroundu:

Kolor

Gradient

Pattern

Textura

5.Czcionki
W Internecie jest multum czcionek, które kuszą młodych webdesignerów. Jednak ‘ładna’ czcionka nie zawsze oznacza najlepszą.
Do ukazania przykładowego tekstu na stronie można użyć : Arial, Tahoma, Verdana, Georgia.

Nie powinny być one większe niż 20 px, ponieważ ulegają wówczas zjawisku tzw. „pixelowania”. Termin ten nie oznacza nic innego jak zauważalne gołym okiem pixele.

WAŻNE! Jeśli ustawimy naszą czcionkę np. na 12 px należy pamiętać, aby wygładzenie ustawione było na ‘None’ (w Adobe Photoshop). W innym przypadku czcionki nie odzwierciedlają późniejszej jej wizji na stronie.

Tyczy się to jednak tylko czcionek małych rozmiarów. Te powyżej 20 px powinny być już ustawione na ‘Sharp’, ‘Smooth’ czy ‘Crisp’.
Wniosek?
Mniejsze czcionki – ‘none’
Duże czcionki – ‘sharp’, ‘smooth’, ‘crisp’

Marginesy

Nawet zamieszczając tekst przykładowy pamiętajmy o tym, żeby wyglądał on estetycznie. Jeżeli chcemy wstawić więcej tekstu po prostu zwiększmy tabelkę a nie zmniejszajmy pola marginesu. Wtedy strona wygląda jakby była na siłę ‘przepełniona’.

Ikony

Ikony na stronie to niby nic takiego. Kilka obrazków. Nie zdajemy sobie jednak sprawy jak bardzo sprawiają, że witryna wygląda bardziej profesjonalnie.

Estetyka

Tworząc design strony WWW używajmy rozumu. Nie może być na niej za dużo elementów, bo wtedy staje się ona ‘ciężka’ i męcząca. Trzeba znaleźć złoty środek, aby zrównoważyć byt elementów składowych strony.

Prawa autorskie

Wykorzystując ikony, patterny czy stocki na naszej stronie pamiętaj o prawach autorskich. Aby uniknąć jakichkolwiek nieprzyjemności z tej strony związanych warto korzystać z serwisów, które zajmują się gromadzeniem darmowych komponentów.
Każda strona powinna być podpisana przez autora. Do tego najczęściej na dole projektu należy stworzyć stopkę.

2008, Sylwia Bartyzel
sylwus.none.pl
shush@interia.pl

W tym tutorialu pokażę Wam krok po kroku jak zrobić prosty zielony szablon.

Tło

Tworzymy dokument o dowolnych, odpowiadających nam rozmiarach i wypełniamy go ciemnoszarym kolorem, w moim przypadku było to #181b1a. Następnie idziemy do Filter -> Noise -> Add Noise (Filtr -> Szum -> Dodaj szum) i ustawiamy wartość w granicach rozsądku, tym samym nie przekraczając 1.

Mniej więcej na wysokości 2/5 dodajemy zielony pasek (#5f9c00). Używając Text tool na jego górnej oraz dolnej krawędzi rysujemy myślnikami (tak zrobiłam to ja - można to zrobić innymi sposobami) dwie linie, barwy białej i zmniejszamy ich krycie. W swojej pracy dodałam również teksturę w postaci pasków (można użyć każdej innej wedle uznania) - przysunęłam ją do dolnej i górnej krawędzi zielonego paska i za pomocą Eraser tool (gumką) z "Airbrush Soft Round" o wartości 300 usunęłam resztę tekstury, tak, aby było ją widać jedynie przy wspomnianym już wielokrotnie zielonym kształcie. Kolejnym krokiem jest zaznaczenie za pomocą Rectangular Marquee Tool połowy kształtu (od połowy w dół), wybranie Gradient tool (a następnie opcji Foreground to Transparent) i pokrycie owego fragmentu delikatnym, czarnym gradientem. Tę warstwę ustawiamy na krycie Normal - 50%. To samo robimy z drugą połową zielonego paska, z tą różnicą, że zamiast czarnego gradientu, wybieramy gradient biały, zdecydowanie mniejszy i delikatniejszy, nie zmieniając krycia.

Mając gotowe tło należy zabrać się do głównej części strony, w której umieścimy treść.

Podstawa

Pierwszym krokiem w tej części jest stworzenie kształtu, który umieścimy mniej więcej na 2/6 wysokości szablonu. Następnie należy zmniejszyć jego wypełnienie (Fill) do 30%, a w Blending Options zaznaczyć Drop Shadow

oraz Stroke

Powinniśmy otrzymać coś takiego:

Następnie zaznaczamy nasz przezroczysty kształt i idziemy do Select -> Modify -> Contract, ustawiając odpowiadającą nam wartość. Owe zaznaczenie wewnątrz kształtu wypełniamy (na nowej warstwie) białą farbą. Jesteśmy więc na tym etapie:

Menu główne

Do zrobienia menu potrzebny będzie kształt o kolorze #4f9b00, który następnie potraktujemy trochę Dodge Tool (Range - Highlights), aby dodać mu artystycznych rozjaśnień. Kształt oczywiście jak widać w efekcie ostatecznym umieszczamy na górze naszego białego pola.

Dla oddzielenia poszczególnych pozycji wykorzystamy nic innego, jak zwykłe linie. Za pomocą Line Tool tworzymy białą pionową linię na wysokość naszego menu i krycie zmieniamy na Overlay, edytując następnie wedle uznania wartość krycia. Zaraz obok tworzymy linię o kolorze czarnym, z którą postępujemy identycznie jak w przypadku poprzedniej. Uzyskany efekt powinien wyglądać mniej więcej tak

Dodając napisy w poszczególnych opcjach w tym przypadku najlepiej użyć prostej czcionki, o niewielkim rozmiarze, z opcją Sharp (Anti Alias). Pisząc drukowanymi literami, jedyne co dodałam to Drop Shadow w Blending Options

Na koniec, na górze naszego menu pojawił się pasek - to nic innego jak biały kształt z kryciem Soft Light o wartości 40%. Nasze menu powinno wyglądać tak

Menu dolne

Z tym menu postępujemy niemalże identycznie jak z menu poprzednim - jak widać kolory są takie same, tekst "Portafolio por sectores" ma te same wartości co poszczególne kategorie w menu, tak samo jest z owym delikatnym paseczkiem, który się pojawił, a który różni się jedynie tym, że w przeciwieństwie do poprzedniego jest ustawiony w pionie. Jedyna różnica polega na tym, że poszczególne podkategorie zostały wykonane czcionką Verdana

Treść

Ta część zależna jest od Waszej wyobraźni - czyli tradycyjnie. Zdjęcie w topie, elementy treści, krój czcionki i jej kolor najlepiej dobierzcie sami. Od siebie w tej kwestii mogę tylko powiedzieć, że użyłam (jak zwykle ) Verdany o rozmiarze 11, w kolorze #494949. Napisy w stopce to również Verdana, jednak o jeden punkcik mniejsza i w innym kolorze.

"Resztki"

Pisząc resztki, mam na myśli wskazane czerwonymi strzałkami elementy

To nic innego jak "dopieszczenie" szablonu - tak, by nie było pustych miejsc, suchego tekstu, etc. Warto formatować nawet zwykły Lorem Ipsum, gdyż zawsze inaczej się to prezentuje. W miejsce większych napisów można wstawić logotypy czy inne symbole firmy - byle to tylko miało ręce i nogi.

Zobacz ostateczną wersję

Top i menu

Menu zostało zrobione bardzo prostą metodą. Tworzymy prosty kształt (w zależności od tego, czy design jest okrągły czy kanciasty narzędziem Rectangle Tool bądź też Rounded Rectangle Tool). Następnie zaznaczamy warstwę klikając w jej obraz w zakładkach warstw, idziemy do select -> modify -> contract 2px. Kolejnym krokiem jest stworzenie nowej warstwy, wylanie na nią białej farby, po czym ustawienie jej na odpowiednim kryciu (po uprzednim odznaczeniu - deselect). Następnie zaznaczamy połowę, wybieramy biały gradient (Foreground to Transparent) i cieniujemy od dołu. Wystające bo bokach miałe cienie wymazujemy miękką gumką. Następnie tworzymy linię o grubości 1 px, rysujemy ją na mniej więcej 3/5 naszego menu. Wchodzimy do Filter -> Motion Blur (40), zmieniamy krycie na nam pasujące.

Napis na górze został wykonany czcionką Futura. Do projektowania tego miejsca polecam proste, "szczupłe" czcionki, oczywiście z wygładzaniem - bo to może być jak najbardziej element graficzny.

Fotka

Przyznam się szczerze, że w tym przypadku dałam ciała - wybrałam prostą fotkę, spotkaną już wielokrotnie na stronach biznesowych. Trzeba się więc pilnować i dobrać odpowiednie zdjęcie - w końcu skoro mamy już mieć w miarę oryginalny układ, tak samo powinno być z fotką, prawda? Dlatego też naprawdę warto pogrzebać i poświęcić trochę czasu na znalezienie odpowiedniego elementu, skupiającego uwagę.

Myślę, że świetnie wyglądałby również efekt animacji, ze zmieniającymi się zdjęciami. Kilka zdjęć z delikatnymi napisami, zmieniające się co kilka sekund - przykuwa uwagę.

Treść

Aktualności umieszczamy pod zdjęciem. Oczywiście, można je wcisnąć gdzie nam się podoba, a w tamtym miejscu umieścić formularz kontaktowy - to jest już jedynie uzależnione od Waszej wyobraźni. Osobiście jednak wolałam zastosować takie rozwiązanie dla strony głównej, a formularz pojawiłby się w podstronie "kontakt". Jeśli jednak miałaby to być BARDZO okrojona wizytówka tamto miejsce dla wspomnianego elementu jest jak najbardziej wskazane.
Wracając jednak do aktualności - cały test został napisany czcionką Verdana, rozmiar w granicach 10-11 px. Mniejszą będzie już trudno rozczytać, a większa po prostu nie będzie pasowała. I tu warto pobawić się formatowaniem tekstu (przynajmniej do graficznej prezentacji szablonu) - pogrubić tytuł, kluczowe słowa i odnośnik do dalszej treści, pochylić datę - oczywiście, jak wszystko, w granicach rozsądku. Nie chcielibyśmy przecież, żeby potencjalny klient dostał oczopląsu przez czytanie raz takiego, a raz znowuż innego tekstu.

Samą treść piszemy czcionką szarą bądź czarną. Nagłówek "Aktualności" (czy też wszystko inne, co chcielibyśmy tam wstawić) dodajemy w kolorze pasującym do całego szablonu - więc kiedy menu jest niebieskie, zdjęcie ma odcienie niebieskiego, to i napis może być w takim kolorze. Oczywistym jest, że nie będzie tu pasował kolor bordowy czy zielony.

Aby wszystko nam się nie zlewało, warto dodać delikatny cień, odznaczymy daną kategorię (w tym przypadku Aktualności).

Treść po prawej stronie również została napisana czcionką Verdana o rozmiarze - jak zresztą widać - mniejszym niż newsy. Ta miałaby na celu krótki wstęp i opis firmy - czyli informacje, które widzimy wchodząc na stronę główną jakiejś firmy. Kolorystyka nie ulega zmianie - stosujemy wszystko tak samo jak w przypadku strony lewej.

Poniżej można dodać elementy we flashu czy jakiekolwiek inne animacje - zachęcające do odwiedzenia danego działu czy przejścia na inną stronę.

Stopka

Nie trzeba chyba nikomu mówić, że w tej prostocie dodanie jakiegoś wymyślnego kształtu czy zbyt "brutalne" odznaczenie gryzłoby się z wyglądem szablonu. Dlatego też dodajemy prosty, delikatny tekst, bez cieniowania. Dolne, powtórzone menu (o ile chcemy, aby takowe się znajdowało), dodajemy ponad linię stworzoną z kropek bądź też - jak kto woli - myślników. Trzeba pamiętać, aby poszczególne odnośniki były od siebie oddzielone - menu ma być wyraźne, a nie zlane.