-
Menu “wychodzące” zza strony
dodano 23.11.2008 / komentarzy: 7 / autor: Siostra Nocy
Oto prosty i szybki sposób na efekt “wychodzącego” menu zza strony. Sprawia wrażenie jakby “naciaganego na stronę”. Efekt ostatnio bardzo modny i estetycznie wyglądający na stronach www.
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
Przeczytaj też podobne wpisy:
Komentarze / dodaj komentarz
autor: dzg
dodano: 23.11.2008
popularny motyw
dobrze, że tłumaczycie jak go otrzymać.
autor: tomek
dodano: 23.11.2008
Czy nie prościej użyć kształtu wektorowego np przerobić prostokąt i później zrasteryzować, krawędzie nie wyjdą postrzępione i mniej pracy.
autor: Zend
dodano: 23.11.2008
Całkiem fajne
autor: Siostra Nocy
dodano: 23.11.2008
Tomek, ja napisałam jak JA to robię - być może są inne, łatwiejsze sposoby, ale ja znam ten i pomyślałam, że warto się podzielić.
autor: Cesar
dodano: 23.11.2008
Dobrze opisany, przyda się .
autor: Golas
dodano: 27.11.2008
Heh… jakże proste… a zarazem ciekawe
autor: agressiva
dodano: 10.12.2008
Tutaj dodatkowo znajdziecie opcje z ostrymi brzegami pola
http://photoshopandyou.com/tutorials/curled-corner/
Napisz komentarz