-
data publikacji: 23.11.2008
Menu “wychodzące” zza strony
kategoria: Webdesign autor: Siostra Nocy
Oto prosty i szybki sposób na efekt "wychodzącego" menu zza strony. Sprawia wrażenie jakby "naciąganego 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
-
Zobacz podobne wpisy:
- None Found
-
15 Responses to “Menu “wychodzące” zza strony”
Leave a Reply
Komentarze
Kategorie
Top 10
bal intermobil: Jak stworzyć stronę za pomocą xhtml oraz css
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
- Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
- Tagi w trójwymiarze
- Menu "wychodzące" zza strony
- Sklep internetowy wyróżniający się z tłumu
- 9 grzechów głównych młodego webdesignera
- Animowane menu za pomocą funkcji jQuery - animate() cz.2
- Gravatar, czyli jak mieć globalnego avatara
- ExpressionEngine - pierwsze starcie
- Inspirujące szablony stron (DeviantArt) - październik 2008
- Inspirujące strony www - październik 2008
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.
popularny motyw
dobrze, że tłumaczycie jak go otrzymać.
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.
Całkiem fajne
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ć.
Dobrze opisany, przyda się .
Heh… jakże proste… a zarazem ciekawe
Tutaj dodatkowo znajdziecie opcje z ostrymi brzegami pola
http://photoshopandyou.com/tutorials/curled-corner/
ale śmieszny ten serwis ;]
nie umiecie ludzie z kształtów korzystać?
Hektorze, wyraziłeś dwie negatywne opinie, których nie uargumentowałeś. Po drugie mam wrażenie, że się ich wstydzisz, bo nie dajesz mi nawet szansy wysłać Ci maila i porozmawiać (a robię tak zawsze gdy się pojawiają negatywne opinie).
Zróbcie video z tym ;/ albo napiszcie do polskiej wersji cs4…
A co takiego trudnego jest w tym tutorialu? Tutaj jest zaledwie parę słów po angielsku, które można migiem sobie przetłumaczyć… przykładowo za pomocą tego prostego narzędzia http://www.pstools.pl/index.php …
Dopiero zaczynam przygodę z PS… 1. Mam pytanie bo po wykonaniu 5 punktu wyszło mi coś takiego http://img35.imageshack.us/img35/8234/57777611.jp... 2. Jak przenieść zaznaczenie? Tak by nie przenosiło się z tłem..
Tło i menu musisz mieć na osobnych warstwach, wtedy nie będzie ci się wycinać razem z tłem.
Bardzo fajne już próbuję zrobić coś takiego
Kolejny bardzo ciekawy efekt! Dla grafików to niby nic, ale jeśli takie coś zrobi programista to jest bardzo zadowolony!
Dla udowodnienia dam link do mojego dzieła 
http://www.bankfotek.pl/view/734006