Polskie Forum Użytkowników GIMP-a

Zawinięte menu - grafika i kodowanie

Dość często spotyka się teraz na stronach efekt menu "zawiniętego" za brzeg strony. W takim razie może przydałby się taki tutek dla początkujących?

Efekt końcowy:
(http://www.gimpuj.info/gallery/8528_14_04_09_1_26_05.png) (http://www.gimpuj.info/)

Ogólny zarys tutoriala i opisane możliwości GIMPa:
 [lp] 1. Zaznaczanie, dodawanie do zaznaczenia, odejmowanie od zaznaczenia i część wspólna.
 [lp] 2. Rysowanie przedziałek i dodawanie napisów oraz hovera.
 [lp] 3. Pocięcie menu.

Kodowanie w XHTML:
 [lp] 1. Lista punktowana.
 [lp] 2. CSS i efekt hover.

Poziom trudności: bardzo łatwy łatwy lub średni (przez to że jest jeszcze kodowanie)

Zakodowana wersja:

http://cysiu.ugu.pl/menuzawiniete/



Do wykonania efektu z tutka właściwie nie są potrzebne żadne pędzle ani dodatki.

Na stronie http://vivee.info/2008/11/23/menu-wychodzace-zza-strony/ jest pokazany taki właśnie efekt, ale od razu mówię, że się na tamtym tutku w ogóle nie wzorowałem (no i tamten jest do PSa).

Jak dla mnie to może być (może dlatego, że na tworzeniu layoutów się w ogóle nie znam ;)).
Efekt jest w miarę fajny i jak dla początkujących (czyt. mnie) może być dobry.

Jak dla mnie, to chyba za proste, żeby pisać na to tutorial. Ale nie moje zdanie się tu liczy :P.

I ile twoim zdaniem będzie miał tutorial punktów?

Nie wiem :P 7, może 8

Lol a mi się wydaje że mniej.  ;)

Next question:
Czy sądzisz że na podstawie aktualnego indeksu nie można wykonać tego samego efektu samemu?

Pewnie można... Czyli go nie chcecie? Tak?

Ja go nie chce, ale nie wiem jak inni.

ja zrobił by to z palcem w du** ale nie wiem jak inni<początkujący> wiec niech będzie... Yes

Tak.
Choć zastanawiam się, jakby to wyglądało z drobnym cieniowaniem.

A wykonanie tego efektu w ps-owym tutorialu jest megadziwne o.O

Zrób z tego menu, dopracuj efekt daj hover itd.

Jestem na tak, jezeli pokazesz ladne calkowite menu + pokazesz jak to ladnie pociac i wstawic w loyaut. ;) Sama grafika jest jak dla mnie zbyt prosta. :P

I co, w każdym tutorialu na menu będziemy tego wymagali? :>

szczerze mowiac insekciku, to by nie bylo glupie. :P Menu to menu, a wiec musi funkcjonowac. ;) Przynajmniej jeden guzik opisac. :P Trzeba to umiec pociac, trzeba umiec zrobic ladny efekt po najechaniu mysza. ;) A nie oszukujmy sie, polowa ludzi robiacych swoje www nie ma pojecia o kodowaniu takich rzeczy i szuka gotowcow. ;) (wiem po sobie :P)

"Ale to jest forum o GIMP'ie..." - by powiedzieli niektórzy... Mi to nie przeszkadza jeśli wprowadzi(cie)my do każdego tuta na menu, layout czy element web, parę punktów jak to wykorzystać. Niektórzy naprawdę nie "umnieją". Albo ich wysłać na kursy CSS.

Kiedyś ten problem był już omawiany przy temacie Blendera. Bądź co bądź, jesteśmy forum GIMP-a, nie powinniśmy za bardzo odbiegać od tematu. Jest masa serwisów, które tłumaczą, jak to zrobić i to lepiej od nas, nie musimy chyba zatem dokładać kolejnych poradników na ten sam temat? Wydaje mi się, że można zakończyć na pocięciu menu na pojedyńcze przyciski.

Na tych warunkach też bym się zgodził :)


De facto jest to forum o GIMPie (oraz o inscape też), ale mogłyby się pojawić tego typu pytania i postarajmy się ich uniknąć :)

Menu ciekawe, estetyczne. Jednak chciałbym abyś dodał tu światło jakieś, np. w miejscu zagięcia. Takie menu realistyczne IMO byłoby lepsze. Ogólnie ttorial ciekawy, jeśli dodałbyś przyciski.

Trochę ulepszyłem:

(http://www.gimpuj.info/gallery/8528_13_04_09_6_52_22.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=37246)

I oczywiście zakodowałem:

http://cysiu.ugu.pl/menuzawiniete/

Jak teraz? Może być takie?

Mi nie pasuje, ze te linie są jakby wklęsłe.

Jak dla mnie może być bo efekt bardzo ładny
 [op]menu eleganckie i czytelne i ładnie się z tymi cieniami i efektem hover
Ja bym się cieszył gdyby się pojawił

No jak by się dało to mógł by się pojawić w dwóch stylach jeśli można ??

Nie wiem, czy dokładnie o to Wam chodziło, ale trochę zmieniłem.  ;)

Popraw te przedziałki. No i spróbuj popracować nad ulepszeniem efektu 3D przy zawinięciach.

Uff  :P A teraz?

(http://www.gimpuj.info/gallery/8528_14_04_09_1_26_05.png) (http://www.gimpuj.info/)

Ogólny zarys tutoriala i opisane możliwości GIMPa:
 [lp] 1. Zaznaczanie, dodawanie do zaznaczenia, odejmowanie od zaznaczenia i część wspólna.
 [lp] 2. Rysowanie przedziałek i dodawanie napisów oraz hovera.
 [lp] 3. Pocięcie menu.
Kodowanie:
 [lp] 1. Lista punktowana.
 [lp] 2. CSS i efekt hover.

Jak dla mnie brzmi świetnie zwłaszcza te pocięcie menu (bo z tym mam zawsze minimalne problemy)

Mi nic nie brzmi tylko wygląda :P
EDIT: @ Down : No tak,racja :D

Ale on ma syntezator mowy!

Teraz jest dobrze.

Czyli mam uważać za zatwierdzone? tak? :P A jeśli chodzi o część na temat kodowania to to będzie tylko kilka małych punktów, ale jeszcze prosiłbym jakiegoś doświadczonego webmastera o sprawdzenie, czy w dobry sposób zakodowałem to menu (http://cysiu.ugu.pl/menuzawiniete/ (http://cysiu.ugu.pl/menuzawiniete/)).

niby mam scrapbook'a ale nie lepiej wrzucić kod html na wklej.org czy jak się ta stronka nazywała...

Jeszcze się zobaczy, a może dodam spakowany plik z index.html i style.css, a obrazki niech sobie ktoś sam potnie.  :P Ale jednak wklej.org będzie lepszy.

Jeszcze banalna sprawa co do tego menu. Za kontaktem przedziałka jest tylko szara brakuje jeszcze białej linii

Menu zakodowane jeszcze nie jest do końca dopracowane.