eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

GIMP i efekt lustrzanego odbicia tekstu

Jakiś czas temu, prezentując opis swojego nowego szablonu (X3), obiecałem własny tutorial dla GIMPa do tworzenia tekstu z lustrzanym odbiciem, obecnie dość modnego w projektowaniu stron internetowych .


Przyznaję, że łatwiej jest coś takiego wykonać niż napisać o tym instrukcję, stąd opóźnienie. Ponadto szukałem sensownego narzędzia do prezentacji zrzutów ekranowych. Takiego, które pozwoliłoby pokazać przyzwoitą jakość wielu dużych zdjęć bez wklejania ich w treść notki. Najbardziej przypadł mi do gustu serwis slideshare.net (o którym kiedyś indziej napiszę) a w nim możliwość publikacji prezentacji PowerPoint w dowolnym miejscu internetu.

Przechodząc na stronę główną osadzonej poniżej prezentacji (link "on SlideShare") można ją sobie powiększyć do pełnego ekranu. Pod prezentacją są bardziej szczegółowo opisane kolejne czynności, a link do oryginalnej prezentacji jest na końcu wpisu.

Zapraszam do "lektury" i samodzielnych ćwiczeń.


KROK 1
  • tworzymy nowy obraz o rozmiarach zbliżonych do oczekiwanych efektów
  • piszemy w nim dowolny tekst narzędziem "umieszczanie tekstu na obrazie" (T), najlepiej od razu w docelowym kolorze
  • z "długimi" literami (j, g, y, q) mogą być problemy z właściwym efektem lustrzanego odbicia, ponieważ wskakują one pod płaszczyznę odbicia - w takich przypadkach najczęstszą sztuczką jest użycie liter drukowanych (jeśli się nie chce bawić w ukrywanie zbędnych części liter)
  • zmieniamy nazwę warstwy na "tekst" (PPM na nazwie warstwy)

KROK 2
  • zmieniamy tekst na obiekt rastrowy: menu Warstwa -> Porzuć informację o tekście
  • narzędziem do przesuwania (M) pozycjonujemy warstwę w wybrane miejsce (narzędzie tekstu tworzy obiekt w dość przypadkowym miejscu)

KROK 3
  • duplikujemy warstwę "tekst" na nową: menu Warstwa -> Duplikuj warstwę
  • zmieniamy nazwę na dowolną, ja przyjąłem "duplikat"

KROK 4 (ważny)
  • zaznaczamy warstwę "duplikat" i robimy lustrzane odbicie: menu Warstwa -> Przekształcenie -> Odbij pionowo
  • narzędziem do przesuwania (M) pozycjonujemy warstwę z odbitym obiektem tak, aby tworzył efekt lustrzanego odbicia 1:1 (bez rozmycia)

KROK 5
  • przy użyciu narzędzia do zaznaczania kolorem (Shift+O)zaznaczamy cały element odbity (można użyć niski próg próbkowania)

KROK 6
  • po zaznaczeniu tworzymy nową warstwę: menu Warstwa -> Nowa warstwa... (tło ustawione na przezroczyste)
  • zmieniamy nazwę warstwy na "odbicie"

KROKI 7 + 8 (najważniejsze)
  • teraz będzie rozmywanie odbicia za pomocą narzędzia do wypełniania gradientem (L), co da efekt zanikania
  • używamy gradientu typu kolor "pierwszoplanowy na przezroczystość", jako pierwszoplanowy ustawiamy biały (w głównym przykładzie)
  • od góry do dołu (przy zaznaczonej opcji gradientu "Odwróć") robimy krótkie pociągnięcie narzędziem; można to robić też z dołu do góry bez opcji "Odwróć" - należy po prostu dobrać wygodną dla siebie metodę
  • można tutaj eksperymentować z długością pociągnięcia, co da efekt ostrzejszego lub łagodniejszego wypełniania gradientem; można używać Ctrl+Z i cofać złe wypełnienie, można po jednym krótkim zrobić drugie dłuższe, itd
  • to najważniejszy etap i w zasadzie cała filozofia rozmytego lustrzanego odbicia: sprawne posługiwanie się gradientami

  • warto zapisać plik jako XCF (dedykowany typ GIMPa), od czasu do czasu pamiętać o zachowyaniu zmian (Ctrl+S) a na koniec dopiero wyeksportować do ostatecznego formatu PNG lub JPG

KROK 9 (opcjonalny)
  • w przypadku czarnego tła warstwa "odbicie" nie powstaje z zaznaczenia kolorem elementu odbitego, a jest po prostu cała przezroczysta i ma wielkość warstwy niższej
  • gradientem wypełnia się dolną część warstwy, tak aby czerń od dołu rozmywała odbity obiekt aż do oryginału.


Podsumowując: cały trick lustrzanego odbicia sprowadza się do odbicia elementu głównego i jego rozmycia gradientem. Przyznaję, że trzeba trochę z gradientami poćwiczyć, żeby opanować ich działanie. Nie jest to trudne, a daje ogromne możliwości. Kolejny obiecany tutorial o błyszczących obiektach też opiera się na biało-przezroczystym gradiencie - przyjrzyjcie się dokładnie cukierkowym elementom stron a zobaczycie, że błysk to nic innego jak biały gradient.

Jak oceniacie skalę trudności tego efektu?

Pliki do ściągnięcia (używać można dowolnie, ale przy jakiejkolwiek publikacji proszę zostawić dane autora i bloga):
  • prezentacja (w formacie PowerPoint)
  • plik XCF do ćwiczenia opisanego odbicia białego
  • plik XCF do ćwiczenia opisanego odbicia czarnego


del.icio.us icon , , ,
technorati icon ,
sobota, 02 czerwca 2007, sgk
Dodaj komentarz »
TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
automatyczne odbicia lustrzane obrazków z experymenty informatyczne
Napisałem kiedyś instrukcję do GIMPa jak zrobić lustrzane odbicie napisu * a ostatnio znalazłem w sieci dwa ciekawe rozwiązania, które nbsp potrafią nbsp robić to samoczynnie i nie wymagają instalacji żadnego programu ani żmudnych operacji ... »
Wysłany 2007/10/15 23:39:38
Komentarze
s.z.y.m.o.n
2007/06/02 00:50:05
Ja wolę do "lusterka" stosować maskę warstwy ze stopniowaną przezroczystością (w sumie też gradient).
-
cito1
2007/06/02 17:02:06
Nie jest to tak proste jak skalowanie, które ostatnio ćwiczyliśmy :) ale postaram się skupić.
Piękny efekt ale... jednak wolę jak Twoje w tytule "eksperymenty" - szarawy cień bo przecież cień nie ma koloru.
Dlatego ja traktowałabym to jak nie lustro a cień, bardziej do mnie przemawia.
-
sgk
2007/06/04 12:50:29
@s.z.y.m.o.n
sposobów na osiągnięcie tego efektu jest sporo, choć bez narzędzia gradientowego się nie obejdą

@cito
No tak prosty to nie jest ;)
Gdy zamiast koloru obiektu użyjesz szarości, to będziesz mieć efekt bez koloru. Z założenia ten szarawy cień w "eksperymenty" miał być takim szarym lustrzanym odbiciem :D
-
hokopoko
2007/06/04 13:10:16
Najprościej podobny efekt można uzyskać używając gotowego narzędzia: Dodatki ->Script su ->Logo -> Zimny metal.
Trzeba tylko dobrać parametry i ewentualnie potem dosunąć dolną warstwę.
Tej ścieżki nie jestem na sto procent pewien, ale któreś z gimpowych "log" taki efekt na pewno daje.
-
salieri0
2007/06/09 20:41:13
Efekt jest prosty w użyciu i zarazem efektowny, co mnie bardzo cieszy :-)

Dzięki za trud włożony w napisanie tutoriala.
-
ch-wilenska
2007/06/10 23:51:37
Cień kolorowego przedmiotu nigdy nie jest pozbawiony koloru, ale w "experymenty" szarość ładnie uspokaja, chociaż nie rozumiem dlaczego odbice liter P i Y zaczyna się za nimi :)
-
sgk
2007/06/12 11:51:26
Moim zdaniem CIEŃ przedmiotu nigdy nie ma koloru, co innego lustrzane odbicie.

Odbicie "długich" liter zaczyna się za nimi po to, żeby nie było odległości między płaszczyzną krótkich liter (ex er ment) a płaszczyzną cienia/odbicia i tym samym rozmiar nagłówka nie był za duży.
-
Gość: , dco134.neoplus.adsl.tpnet.pl
2008/02/14 13:55:10
dochodze do kroku 7 i dupa, moze dla zaawansowanych to jest wyjasnienie ale dla laika niewystrarczajace. nic mi nie rozjasnia jak jezdze tym shitem, nie wiem czy cos trzeba tam jeszcze zrobic albo czy czegos brakuje w opisie nie idzie i juz. pozdro
-
Gość: , dco134.neoplus.adsl.tpnet.pl
2008/02/14 15:45:53
tak juz doszedlem , zmylila mnie ta linijka:

"używamy gradientu typu kolor "pierwszoplanowy na przezroczystość", jako pierwszoplanowy ustawiamy biały (w głównym przykładzie)"

ustawilem tryb kolor zamiast zwyklego i dlatego nie szlo. w takim razie opis jest okej, dziekuje za pomoc. :)
Dodaj komentarz »
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT
takie tematy tu są...
ostatnie komentarze...



o autorze i blogu...