Jak stworzyć portfolio graficzne “Fruits Design”?

W tym artykule postaram się przedstawić prosty sposób na zaprojektowanie portfolio w Adobe Photoshop – instruktaż ten szczególnie przydatny może okazać sie dla tych, którzy nie opanowali jeszcze sprawnego posługiwania się tym programem.

Do tego projektu wykorzystałam 960 Grid System, który pozwala na szybkie podzielenie layoutu na równe kolumny (co później ma znaczenie przy kodowaniu szablonu).
Pliki źródłowe z przygotowaną podziałką można pobrać z oficjalnej strony 960 Grid System. Znajdziecie w tym zipie pliki m.in. dla Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Adobe Photoshop, Visio, Exp. Design.

Ja skorzystałam z pliku, który dzieli szablon na 12 kolumn – szerokość całkowita szablonu wynosi 960 pikseli.
Po otwarciu wyglada on tak:

Tło strony

Tło składa się z jednolitego zabawienia, na które następnie został nałożony monochromatychny szum oraz poruszenie:

• Tworzymy nową warstwę, która swoją powierzchnią zakryje całe pole szablonu
• Za pomocą narzędzia Wiadro z farbą / Paint Brucket Tool nadajemy jednolity kolor (np. #161616)
• Wchodzimy w Filtry / Filter i wybieramy Szum / Noise —» Dodaj szum / Add noise… (ja wybrałam wartość 3, gaussian, monochromatic)

  

• Mając juz nałożony szum wybieramy Filtry / Filter —» Rozmycie / Blur —» Poruszenie / Motion Blur (kąt:0, dystans:42)

Uzyskany efekt:

Header

W nagłówku umieściłam logotyp strony oraz menu poziome nawigacyjne.

Logo
Logotyp to Wasza indywidualna inwecja twórcza lub skorzystanie z jednego z wielu serwisów oferujących darmowe znaki firmowe.
Ja dla potrzeb tego artykułu skorzystałam z pliku zamieszczonego na Logo Instant. Zmieniłam jedynie font na bardziej standardowy – Arial (bold italic).

Menu
Pozycje w menu mają dwa stany – przed najechaniem na nie kursorem (ciemno szare) i po (czerwone)
Do stworzenia pojedynczego buttona wykorzystujemy Rounded Rectangle Tool / Prostokąt Zaokrąglony z 3 pikselowym zaokrągleniem krawędzi. Wypełnienie kolorem tego elementu nie jest istotne, ponieważ za chwilę będziemy nakładać na tą warstwę style.

Teraz nadszedł czas na ostylowanie prostokąta. W tym celu przy aktywnej warstwie z kształtem klikamy na Add a layer style / Dodaj styl warstwy

Na pierwszy ogień pójdzie button z czerwonym gradientem – czyli aktywna pozycja w menu.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Niemalże identyczne style stosujemy dla ciemno szarego przycisku, różni się on jedynie kolorami.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Tekst
Tytuły na buttonach w menu napisane sa fontem Arial (krój: bold italic) o wielkości 15 pikseli, kolor #ffffff, dla drobnej wypukłości dodałam lekkie cień pod słowami:

Efekt końcowy samego menu:

Header już prawie cały mamy z głowy, dla urozmaicenia można dodać w tle jakieś delikatne wzorki, gradienty, etc. Ja dla przykładu umieściłam delikatny gradient od przezroczystości do koloru białego – za pomocą Reflected Gradient / Gradient lustrzany i następnie zmniejszyłam jego krycie.

Efekt końcowy headera:

Pojedynczy wpis

Każdy pojedynczy “wpis” znajduje się w przechodzącym przez całą szerokość szablonu białym pasie połączonym z delikatnymi gradientami, zarówno w środku jak i na zewnątrz.
Za pomocą narzędzia Rectangle Tool / Prostokąt tworzymy kształt o odpowiadającej nam wysokości, jako kolor wypełnienia należy wybrać jakiś jasny odcień, ja uzyłam bardzo jasnej szarości #f8f8f8 (na wielu monitorach może wyglądać na biel).
Teraz dodajemy tej warstwie styl: obrys / stroke o kolorze #ffffff i 1 pikselu grubości linii skierowanej do wnętrza kształtu.

Gradient wewnątrz wpisu
Moim zamiarem było stworzenie “blasku wewnętrznego” skierowanego bezpośrednio z góry jak i z dołu kształtu. W tym celu na kolejnej nowej warstwie zaznaczyłam interesujący mnie obszar i w nim na pomocą Gradient Tool / Gradient poprowadziłam gradient od koloru czarnego (#000000) do przezroczystości. Z początku gradient jest bardzo mocno widoczny – dlatego też należy dobrać odpowiednie jego krycie aby był mniej rzucający się w oczy.

Taki sam gradient znajduje się na dole – można poprzednią operację powtórzyć lub po prostu skopiować tamtą warstwę i odwrócić ją w pionie.

Mając obydwa efekty na osobnych warstwach można z łatwością ustawiać im inny poziom krycia lub inny kolor – daje nam to większą swobodę wprowadzania zmian w szablonie.

Gradient pod wpisem
Kolejną warstwę z gradientem tworzymy pod naszym białym polem na wpis – gradient tak jak wcześniej przebiega od koloru czarnego do przezroczystości – tutaj krycie tylko troszkę zmniejszamy tak aby efekt był czytelny na ciemnym tle strony.
Jak w przypadku poprzednich gradientów – ten również można powielić na nowa warstwę, odwrócić i przenieść nad wpis.

Zawartość wpisu
Jako, że jest to portfolio to należy przede wszystkim pokazać wgląd do realizacji – tutaj zastosowałam miniaturę grafiki, jej tytuł oraz krótki opis.
W tym miejscu na pomoc przychodzi nam wyżej wspomniany 960 Grid System. Dzięki wyznaczonym pionowym liniom pomocniczym możemy bez żadnego problemu wyznaczyć kolumny.
W tym przykładowym projekcie lewa kolumna ma 540 pikseli szerokości a prawa 380 pikseli.

Treść
Treść w lewej kolumnie napisana jest fontem Trebuchet MS o wielkości 12 pikseli, kolorze #6d6d6d. Tytuł realizacji to ten sam font – wielkość znaków 28 pikseli, krój pogrubiony, kolor #d9110a.

Przycisk “visit” to kopia pozycji z menu, jedynie zmniejszona.

Miniatura

Miniatura realizacji położona jest w prostokącie o białym wypełnieniu i nadanym cieniu zewnętrznym o odległości 0 i wielkości 6.

Aby idealnie w środku białego prostokąta umieścić miniaturę w równiej odległości od krawędzi polecam zaznaczyć cały prostokąt – klikając na maskę warstwy trzymając ctrl.

Teraz z menu należy wybrać Select / Zaznacz —» Modify / Zmień —» Contract / Zawęź Zaznaczenie i podać 10 pikseli dla zawężenia. Tym sposobem uzyskamy równe zaznaczenie które następnie możemy wykorzystać jako wielkość miniatury realizacji.

Miniatura ma nadane obrysowanie wewnętrzne. Dla późniejszej wygody modyfikacji obrys ten został nadany nieco inaczej niż poprzez style warstwy. Należy utworzyć kolejna nową warstwę, zaznaczyć obszar, w którym znajduje się obrazek realizacji (klikając na miniaturkę warstwy na liście warstw z przytrzymanym ctrlem) i następnie z menu wybrać Edit / Edycja —» Stroke / Obrys, ja wybrałam grubość 3 pikseli, kolor biały (#ffffff) i lokalizację: do środka. Po zmniejszeniu krycia tej warstwy do 17% powstała lekka półprzezroczysta ramka.

Tym oto prostym sposobem utworzyliśmy pierwszy “wpis”. Kolejne wpisy będą jego kopią. Dla wygody podpowiem, że bardzo przydatne są katalogi na liście warstw – dzięki nim można wszystko uporządkować i rozdzielić wszystkie elementy, sprawdza się to szczególnie gdy chcemy skopiować kilka warstw jednocześnie nie gubiąc ich przy okazji. Kopiując za jednym podejściem cały katalog (grupę) warstw na pewno ten problem nam znika.
Tak dla przykładu wyglądu kompletny układ grup dla tego projektu:

Kopiując grupę warstw dla pojedynczego wpisu i umieszczając kolejne pod sobą stworzyliśmy listę trzech wpisów, aktualnie projekt na tym etapie wygląda następująco:

Pozostaje nam dolna część strony podzielona na 3 kolumny oraz stopka.

Trzy boksy w trzech kolumnach

Dolne boksy z niewielką ilością treści również zostały wyznaczone za pomocą 960 Grid System. Każdy z nich na 320 pikseli szerokości z 10 pikselowym marginesem wewnętrznym z każdej strony.
Na tło całego pasa składa się prostokąt o wypełnieniu kolorem #121212 oraz nadanym obrysem:

Warstwa ta ma zmniejszone krycie wypełnienia (Fill) do 71% (opcja ta znajduje się tuż pod suwakiem do regulacji krycia całej warstwy). Zmniejszając poziom Fill możemy zmienić poziom krycia jedynie domyślnym właściwościom warstwy (wypełnieniu), dodatkowe style wtedy nie ulegają ukryciu. Mieszając poziomy krycia całkowitego i krycia wypełnienia można uzyskać ciekawe efekty.

Światło
Każdy z 3 boksów na samej górze ma nadane światło. Efekt ten można uzyskać tworząc nową warstwę, nakreślając na niej nieduży owalny gradient od koloru białego (#ffffff) wewnątrz do przezroczystości na zewnątrz.

Następnie należy tą warstwę odpowiednio ustawić i zmniejszyć jej krycie aby była nieco jaśniejsza od tła.
Należy ją ustawić tak aby jej fragment wystawał poza ciemny pas. Tak jak jest na obrazku:

Teraz aby ta warstwa sprawiała wrażenie uciętej (ale bez jej zaznaczania i usuwania fragmentu – w końcu nie wiadomo czy jeszcze nie przyda nam się w całek okazałości) ukryjemy niepotrzebny fragment za pomocą maski warstwy.
W tym celu musimy zaznaczyć warstwę której ten gradient ma na pewno nie przekraczać czyli ciemno szary poziomy pas (najwygodniej kliknąć na miniaturkę warstwy na liście warstw). Trzeba w tym miejscu uważać aktywną warstwą nadal musi być gradient przy zaznaczonym pasie.

Aktywnej warstwie musimy teraz nadać maskę, która to będzie miała kształt zaznaczonej wcześniej warstwy z pasem. Sprawi ona, że gradient będzie widoczny tylko wewnątrz tego zaznaczenia. Maskę tą nadajemy klikając na ikonkę Add layer mask / Dodaj maskę zaznaczoną na obrazku poniżej:

Kompletny powielony trzykrotnie boks z treścią i ikonami wygląda tak:

Ikony pochodzą z serwisu Iconfinder.net

Stopka

Stopka jest dosłownie kopią pojedynczego wpisu – została jedynie zmniejszona na wysokość oraz zostało do niej przeniesione logo w wersji B&W.

Efekt końcowy

Tym oto sposobem doszliśmy do końca tego tutoriala, efekt końcowy wygląda tak jak poniżej:

Życzymy miłej nauki!

Tutorial napisany dla serwisu Vivee.info