Unikalny design strony

26 sierpnia, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

Black-web-template-24
5,627 0
Dane:
  • Czas pracy: 30min
  • Poziom: Średnio zaawansowany
Opis:

Prosty tutorial na stworzenie unikalnej strony internetowej, możemy sobie to przerobić na portfolio czy na wizytówkę. Tutorial dzięki stronie http://tutsfriend.com

Pokaż/Ukryj wszystko

Najpierw otwórzmy w Photoshopie dokument 600px na 800px 72dpi i tło czarne. Nastepnie ściągnijmy sobie jakiś abstrakcyjny obrazek, który będzie nam robił za tło strony, ja mam coś takiego

Alt Black-web-template-02


Wydawnictwo Strefa Kursów

Gdy już mamy nasze abstrakcyjne tło, wybierzmy sobie Zaznaczenie prostokątne (rectangular marquee tool) i zróbmy zaznaczenie jak na poniższym obrazku.

Alt Black-web-template-03

I teraz wypełnijmy nasze zaznaczenie kolorem białym.
Gdy wypełniliśmy zaznaczenie białym kolorem wciśnijmy CTRL+T w celu utworzenia transformacji i wybierzmy "Pochyl" (Skew)

Alt Black-web-template-05

I zróbmy coś takiego jak niżej

Alt Black-web-template-06

W tym momencie zmieńmy kolejność naszych warstw tak aby ta "pochylona" była poniżej naszego abstrakcyjnego tła

Alt Black-web-template-07

Teraz PPM klikamy na warstwę z abstrakcyjnym tłem i wybieramy "Utwórz maskę warstwy", możemy to też zrobić z przycisku w okienku warstw na dole.

Alt Black-web-template-08

Powinno nam wyjść coś takiego

Alt Black-web-template-09

Idać dalej ulepszymy trochę tą warstwę, więc zaznaczamy sobię warstwe z naszym białym tłem i w Opcjach Mieszania (Blending option) ustawmy w Obrysie (Stroke) tak jak poniżej

Alt Black-web-template-10

Efekt jaki powinniśmy uzyskać widać na załączonym niżej obrazku

Alt Black-web-template-11

Teraz już możemy zacząć dodawać tekst do naszej strony, zróbmy to tak aby pasował do naszego pochylonego tła, więc musimy go przekrzywić również w tym celu CTRL +T

Alt Black-web-template-18

Jeżeli chodzi o logo to najlepiej pasuje moim zdaniem w tym miejscu jak niżej. Każdy niech tutaj doda swoje logo i tagline, ja zrobiłem to tak:

Alt Black-web-template-19

Trzeba dodać coś jeszcze, bo jest troche pusto, ja rozwiązałem to w ten sposób

Alt Black-web-template-20

W międzyczasie dodałem jeszcze trochę tekstu i dodatkową listę po lewej na dole. Aby wyglądała ona jak "menu" dodatkowe dodałem do niej strzałki w tym celu wybierzmy Kształt Własny (Shape) i z listy kształtów strzałki i w tym wyborze strzałek, wybierzmy taką jak niżej

Alt Black-web-template-23

Ostateczny wygląd jaki uzyskałem mozemy podziwiać poniżej!

Alt Black-web-template-24

Źródło tutoriala to strona http://tutsfriend.com/ podziękowania dla niej. Z tej strony można też ściągnąć plik .psd jeżeli ktośby chciał plik gotowej strony z tego tutoriala.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz