W Internecie dostępnych jest wiele samouczków i przewodników, które uczą, jak efektywnie wykorzystywać projektowanie Web 2.0. Chociaż większość tych samouczków jest przydatna, jednocześnie zabijają oryginalność w projektowaniu stron internetowych. Na przykład większość „przewodników” informuje, że w Web 2.0 chodzi o błyszczącą plakietkę, tło w paski i pogrubioną czcionkę. Wynik? Istnieją niezliczone setki wzorów z naszywkami, paskami i pogrubionymi dużymi literami… i niczym się od siebie nie różnią. Nie ma znaczenia, czy tworzysz projekt w technologii Web 2.0, Web 1.0 czy Web 75.0, wszystko sprowadza się do oryginalności i zapadania w pamięć.

Jeśli jednak nie możesz znaleźć niczego szczególnie oryginalnego, co symbolizowałoby Twój projekt, „bezpieczniej” jest podążać za aktualnymi trendami w projektowaniu stron internetowych. Oto bardzo mały fragment układu projektu strony internetowej i jak zamienić zwykły układ w układ Web 2.0.

To właśnie mieliśmy…

14.png

I to właśnie zamierzamy zrobić…

13.png

Będziemy pracować w Photoshopie, używając wyłącznie stylów warstw; koncentrując się na łagodnych gradientach i cieniach.

Zacznij od użycia kształtu prostokątnego z zaokrąglonymi narożnikami i narysowania… prostokąta.

1.jpg

Transparent

Najpierw musimy nadać naszemu prostokątowi głębię i życie. Kierując się zasadami projektowania web 2.0, taki efekt dadzą nam jedynie cienie, kontury i jasne przejścia. Przejdź więc do stylów warstw i rzuć trochę łagodnego cienia. Użyliśmy #96aed6 w tym celu.

2.png

Aby nadać kształtowi odrobinę głębi (aby nie wyglądał jak płaski obiekt), dodaj łagodny cień wewnętrzny, o ciemniejszej tonacji (użyliśmy #304f82 )

3.png

Na koniec ważne jest, aby dodać trochę zarysu. Zastosujemy kolor biały #FFFFFF, ponieważ nasze cienie z obu stron są ciemniejsze, chcemy mieć jasną i pół widoczną linię, która będzie konturować kształt.

4.png