Gimp, Gimp. Gimp gimp gimp gimp.
Gimp gimp gimp Gimp gimp gimp?


Gimp gimp gimp gimp gimp, gimp i gimp gimp

Gimp: [1]
GimpPobierz PDF
Gimp Gimp: Tła pod prezentację produktów  (Gimp 30110 gimp)
0 gimp i 1 Gimp gimp gimp gimp.
Ziomioslaw
Administrator

Reputacja: 46 Gimp Gimp

Gimp: Gimp
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Gimp: 7 419
Galeria Użytkownika


Cyklista Apokalipsy


Gimp gimp
« : 29.12.2012, 22:15:28 »

Tła pod prezentację produktów
Tutorial

Oryginał: Ways for designing soft backgrounds for product presentation
Opracowanie: Ziomioslaw
Poziom trudności: łatwy





Tutorial napisany w wersji GIMP 2.8. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



Lime Point Zaczynamy

Lime Point 1. Zaczynamy od utworzenia nowego obrazu wypełnionego kolorem czarnym #000000 (rozmiar np. 1024x768 px).



Lime Point 2. Tworzymy dwa miękkie światła za pomocą filtra "Efekty świetlne" (Fitry -> Światło i cień -> Efekty świetlne).

Lime Point 3. Otwieramy okienko tego filtra i przechodzimy na zakładkę "Światło".
Uwaga: u mnie, w GIMP-ie, w wersji 2.8.2, musiałem sobie wybrać Typ, aby reszta kontrolek w okienku odświeżyła się prawidłowo. W sumie bardzo to chyba nie będzie przeszkadzało, jeśli się tego typu nie wybierze.
Wybieramy "Typ" jako "Punktowe". Na okienku podglądu przesuwamy niebieską kropkę na środek poziomy ekranu i bliżej górnej krawędzi. Można też wpisać współrzędne bezpośrednio w kontrolki na okienku. Zwiększamy też nieco "Intensywność". Zgodnie z autorem oryginału używam żółtawo-zielonego koloru.



Moje wartości:
  • Typ: "Punktowe"
  • Kolor: #E9FFC6
  • Intensywność: 1,10
  • Oś X: 0,46
  • Oś Y: -0,43
  • Z: 1,00

Nie zamykamy jeszcze okienka.

Lime Point 4. Wybieramy z listy "Światło 2". Tym razem wybieramy Typ: Kierunkowy, Ustawiamy punkt na środku w poziomie, ale bliżej dolnej krawędzi. Wybierzmy taki żółto pomarańczowy kolor.



Użyte przeze mnie wartości:
  • Typ: Kierunkowe
  • Kolor: #f4e9cb
  • Intensywność: 1,30
  • X: -0,01
  • Y: 0,75
  • Z: 1,00

Lime Point 5. Przechodzimy na zakładkę "Opcje". "Odległość" ustawiamy na jakieś 0,800. To spowoduje powiększenie obszaru oświetlonego przez nasze, wcześniej zdefiniowane światła. Sprawi też, iż oba lekko się zmieszają na środku.



Tło jest już skończone.

Lime Point 6. Wklejamy jako nową warstwę obiekt, który chcemy zaprezentować (Plik -> Otwórz jako warstwy). Zakładam, że będzie to plik już wcześniej przygotowany, z przeźroczystym tłem i na jednej warstwie dla ułatwienia.



Lime Point 7. Dodamy teraz odbicie obiektu. Robimy to przez zdublowanie warstwy z obiektem (prawym przyciskiem myszy na warstwę i wybieramy opcję "Duplikuj warstwę").

Lime Point 8. Nową warstwę (powinna mieć słowo "kopia" w nazwie) odbijamy pionowo: Warstwa -> Przekształcenie -> Odbij pionowo.

Lime Point 9. Następnie za pomocą narzędzia Przesunięcie Przesuwanie [M], umieszczamy nową warstwę pod jej oryginałem.

Lime Point 10. Zmniejszamy Krycie warstwy-kopii, za pomocą suwaka znajdującego zwykle się nad listą warstw (ja zmniejszyłem do około 30%).



Lime Point 11. Dodajemy tekst (Tekst [T]). Ja, wzorem autora, użyłem czcionki Exo.



Lime Point 12. Możemy zwiększyć nasycenie tła. Wybieramy warstwę Tło i opcję: Kolory -> Barwa i nasycenie. Przesuwamy wskaźnik Nasycenia na wartość około 65.



I gotowe:



Kilka dodatkowych uwag:

Lime Point 14. Jeśli nie przepadasz za wyraźnymi granicami kolorów, możesz całość warstwy Tło rozmyć za pomocą opcji Warstwa -> Rozmycie -> Rozmycie Gaussa. A wartość rozmycia ustawić na około 150 pikseli.

Lime Point 15. Tworzenie cienia pod obiektem (uwaga: ten sposób być może niezbyt nadaje się dla prezentacji przedmiotów okrągłych - ja na moim przykładzie właśnie dlatego nie użyłem cienia, a rysunek z tego punktu został zapożyczony z oryginału):

  • Tworzymy nową przeźroczystą warstwę (nazwijmy ją np. Cień).
  • Wybieramy narzędzie Zaznaczenia prostokątnego Zaznaczenie prostokątne [R].
  • Rysujemy go tak jak pokazano, pod obiektem prezentacji, na szerokość obiektu.
  • Zaznaczenie wypełniamy kolorem czarnym #000000 (np. przeciągając ten kolor na zaznaczenie, lub Kubełkiem Wypełnienie kubełkiem [Shift+B]).
  • Usuwamy zaznaczenie Zaznaczenie -> Brak.
  • Wybieramy Filtry -> Rozmycie -> Rozmycie Gaussa i ustawiamy na 15 pikseli.
  • Przesuwamy rezultat w odpowiednie miejsce za pomocą Przesunięcia Przesuwanie M.


Lime Point 16. Dodanie rozjaśnienia na przedmiot:

  • Wybierz warstwę z obiektem
  • Potraktuj ją filtrem: Światło i cień -> Rzucanie cienia (uwaga: możliwe, że pomimo polskiej wersji językowej GIMP-a, będziecie mieć ten filtr nazwany po angielsku: Drop Shadow). Ustawiamy: Przesunięcie X (Offset X)  i Przesunięcie Y (Offset Y) na 0, Rozmycie (Blur radious) na 120px i Krycie (Opacity) na 100 (Kolor zostawić domyślny: #000000).
  • W efekcie ostatniego kroku utworzy się nowa warstwa (domyślnie, niezależnie od wersji językowej, powinna się nazywać: Drop shadow). Klikamy na nią i zmieniamy Tryb dla tej warstwy na Wydobycie ziarna.





Część II

Lime Point 1. Podczas gdy pierwsze tło było płynne i dwukolorowe, następne będzie charakteryzowało się skoncentrowanymi punktami światła.
   Rozpoczynamy nową pracę.

Lime Point 2. Ustawiamy kolory: Biały kolor #FFFFFF jako pierwszoplanowy, czarny #000000 jako tło). Na odwrót niż to jest domyślnie.

Lime Point 3. Wybieramy narzędzie Gradient Gradient L. W jego opcjach ustawiamy Kształt jako Promienisty.

Lime Point 4. Przeciągamy jedną prostą linię od środka ekranu, a kończymy na zewnątrz pracy.



Lime Point 5. Tak otrzymaną warstwę Tło duplikujemy (powstaje warstwa nazwana: kopia: Tło).

Lime Point 6. Na warstwie kopia: Tło przeprowadzamy transformację. Wybieramy narzędzie Skalowanie Skalowanie [Shift+T] i klikamy na obrazku.
Powinien zaznaczyć się cały obraz. Przeciągając górny, środkowy punkt kontrolny, zmniejszamy naszą drugą warstwę do około jednej trzeciej swego rozmiaru (Wysokość na 257px).



Lime Point 7. Wracamy do warstwy Tło: transformujemy ją tak, aby wypełniła 2/3 obrazu (powyżej warstwy kopia: Tło).



Lime Point 8. Klikamy prawym przyciskiem myszy na stos warstw i wybieramy opcję (Warstwa ->Nowa z widoku). Utworzy się warstwa Widoczny. Ustawiam ją na szczycie.



Lime Point 9. Dzięki filtrowi Kolor -> Barwienie, nadajemy jej kolor jaki chcemy.

Lime Point 10. Jeśli pracujesz na trybie 8 bitów na kanał (GIMP 2.8 jeszcze nie obsługuje większych kanałów) możesz stwierdzić, że przejścia koloru w niektórych miejscach nie wyglądają zbyt ciekawe.
Aby się tego pozbyć użyj opcji: Filtry -> Rozmycie -> Rozmycie ruchu..., z parametrami: Długość: 100, Kąt: 180°.
Powtórz tę opcję, ale tym razem Kąt ustaw na 0°. Powinno być lepiej.



Lime Point 11. Przesuń warstwę Widoczny na spód listy warstw.

Lime Point 12. Obie warstwy: Tło i kopia: Tło należy poddać działaniu filtra: Rozmycie -> Pikselizuj. Parametry  tego filtra ustawiamy na: Szerokość piksela: 64 i Wysokość piksela: 1. Pamiętajcie, żeby kliknąć w ikonkę łańcucha (aby móc wpisać dwie różne liczby).



Lime Point 13. Obu warstwom zmieniamy tryb na Miękkie światło.



Lime Point 14. Za pomocą narzędzia Perspektywa Narzędzie perspektywy Shift + P modyfikujemy warstwę kopia: Tło. Tworzymy w ten sposób wrażenie trójwymiaru.



Lime Point 15. Teraz można umieścić obiekt na środku i dodać tekst (patrz powyższe punkty).



Lime Point Koniec
« Gimp gimp: 23.05.2014, 07:20:26 gimp gimp be@ » Gimp
delmariano
Użytkownik

Reputacja: 0 Gimp Gimp

Gimp: Gimp
GIMP: 2.8
Licencja: Copyright
Gimp: 24
Galeria Użytkownika



Gimp gimp
« Gimp #1 : 30.12.2012, 18:53:51 »

Ciekawy tutorial, fajne jest też zamiast koloru dodać teksturę. A pod obiektem wykonać cień i odbicie na podłożu.
Gimp
davlasq
Opiekun tutoriali

Reputacja: 4 Gimp Gimp

Gimp: Gimp
GIMP: 2.8
Licencja: Copyright
Gimp: 1 119
Galeria Użytkownika



Gimp gimp
« Gimp #2 : 31.12.2012, 16:10:39 »

Ja jeszcze kilka błędów znalazłem, poprawiłem oczywiście Uśmiech Prócz efektu końcowego na górze nie ma także zakończenia, a także miniaturki i opisu do indeksu.
Gimp

Projektujesz strony i chcesz się dowiedzieć, w jaki sposób są one realizowane? Zapraszam na mojego bloga o webdevie i nie tylko!
be@
Moderator globalny

Reputacja: 49 Gimp Gimp

Gimp: Gimp
GIMP: 2.8
Licencja: CC-BY
Gimp: 7 203
Galeria Użytkownika



Gimp gimp
« Gimp #3 : 28.02.2014, 20:49:46 »

Wydaje mi się, że byłoby czytelniej gdyby punkty: 3,4 i 5 były podpunktami punktu 2, bo w sumie tak naprawdę nimi są.
W punkcie siódmym zamiast "cień obiektu" powinno być chyba odbicie?
W punkcie 12 do nazwy filtra "Barwa i nasycenie" przyczepiła się jakaś "Warstwa" Duży uśmiech Jest też tu i ówdzie trochę literówek i jakichś mało gramatycznych sformułowań ale to mogę ew. sama poprawić Język
Pkt. 15 "Rysujemy ją jak pokazano pod obiektem prezentacji tak, na szerokość obiektu." Gdzie niby pokazano? Nie widzę takiego obrazka...
Pkt. 16 Nie napisałeś, jaki ma być kolor tego cienia
Gimp
Ziomioslaw
Administrator

Reputacja: 46 Gimp Gimp

Gimp: Gimp
GIMP: 2.10
JID: ziomioslaw@jabber.org
Licencja: Copyright
Gimp: 7 419
Galeria Użytkownika


Cyklista Apokalipsy


Gimp gimp
« Gimp #4 : 13.03.2014, 19:29:35 »

Poprawione.

Wydaje mi się, że byłoby czytelniej gdyby punkty: 3,4 i 5 były podpunktami punktu 2, bo w sumie tak naprawdę nimi są.

Masz rację, ale ja bym zostawił jak jest, jako podpunkty trochę by się zbiło to wszystko w jedne wielki punkt, a tak jest jest to jakoś podzielone.

W punkcie siódmym zamiast "cień obiektu" powinno być chyba odbicie?
W punkcie 12 do nazwy filtra "Barwa i nasycenie" przyczepiła się jakaś "Warstwa" Duży uśmiech
Pkt. 15 "Rysujemy ją jak pokazano pod obiektem prezentacji tak, na szerokość obiektu." Gdzie niby pokazano? Nie widzę takiego obrazka...
Pkt. 16 Nie napisałeś, jaki ma być kolor tego cienia

Poprawione.

Jest też tu i ówdzie trochę literówek i jakichś mało gramatycznych sformułowań ale to mogę ew. sama poprawić Język

Trzeba było je wskazać;P

Dodałem też ikonkę.
Gimp
be@
Moderator globalny

Reputacja: 49 Gimp Gimp

Gimp: Gimp
GIMP: 2.8
Licencja: CC-BY
Gimp: 7 203
Galeria Użytkownika



Gimp gimp
« Gimp #5 : 19.03.2014, 19:00:52 »

Poprawiłam literówki, błędy i różne dziwne sformułowania. Mam nadzieję, że nic nie przegapiłam ale niech jeszcze ktoś sprawdzi.

Masz rację, ale ja bym zostawił jak jest, jako podpunkty trochę by się zbiło to wszystko w jedne wielki punkt, a tak jest jest to jakoś podzielone.
Nadal obstaję przy swoim zdaniu. Wg mnie taki podział może wprowadzać w błąd i przecież od tego są podpunkty, żeby się nie "zbiło", ale niech się jeszcze inni wypowiedzą Język
Gimp
be@
Moderator globalny

Reputacja: 49 Gimp Gimp

Gimp: Gimp
GIMP: 2.8
Licencja: CC-BY
Gimp: 7 203
Galeria Użytkownika



Gimp gimp
« Gimp #6 : 10.04.2014, 20:10:25 »

Hasia poprawiła jeszcze przegapione przeze mnie błędy. Obie uznałyśmy również, że punkt 13 jest zbędny oraz, że należy wyraźniej zaznaczyć podział tutorialu na dwie części.
Teraz już chyba jest wszystko dobrze.
« Gimp gimp: 10.04.2014, 20:58:49 gimp gimp be@ » Gimp
Gimp: [1]
GimpPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPTłaGimp: Tła pod prezentację produktów
Gimp gimp: