Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Blending Options w Photoshopie

01 listopada 2005

Tworzę strony, jasna sprawa. Co jakiś czas jestem zmuszony pomajstrować w tym programie graficznym, chociaż nie powiedziałbym, że jest to męczące czy nudne. Tak naprawdę lubię tą pracę, efekty widać od razu, można skupić się na wyważeniu elementów, na estetyce i smaku pracy.

Osobiście wolę wersję 7.0, te nowe CSy przyprawiają mnie o ból głowy. Może nie tak bardzo jak polska wersja programu, ale też trochę. Tak więc na niej oprę swoje dywagacje; zdaję sobie sprawę, że niektóre czynności w nowszych wersjach programu mogą być łatwiejsze do osiągnięcia, ale… no właśnie, już o tym pisałem. :)

Potęgą w PS jest Blending Options dla warstwy. Zestaw efektów graficznych aplikowanych warstwie niezależnie od tego czy chcemy ją potem zmodyfikować czy nie. Gdy dodamy do tego stosowanie kształtów wektorowych, to hulajduszanieumieraj™. ;)

Blending Options

Jak bardzo jest Blending Options przydatne, można się zorientować patrząc jak tworzy się nowoczesne strony. Wygląd opisany jest za pomocą pliku styli, zmieniając regułę zmieniamy wszystkie strony (dwudziestopierwszowieczna wersja „One ring to rule them all”). Tutaj może być podobnie, jak pokażę dalej, da się emulować efekty padding, border, background-image i podobne. Możemy następnie zmienić rozmiar elementu (takiego menu na przykład) i sprawdzić jak wygląda w nowych pikselach.

Stroke daje nam obramówkę - możemy wybrać czy ma być na zewnątrz, wewnątrz czy od środka krawędzi obiektu. Ostatnia opcja tworzy zaokrągloną ramkę, jeśli grubość obramowania jest wystarczająca.

Outer Glow dodaje natomiast ciekawy efekt poświaty na zewnątrz obiektu. Ustawienie Blend Mode na Normal zamiast Screen, wybranie koloru (domyślnie jest jasnożółty i dodam, że oświetlanie obiektu w Twoich pracach zawsze i tylko przy pomocy tego koloru, jest uważane za brak kreatywności i gustu), ustawienie maksymalnej wartości Opacity i Technique: Precise oraz zmiana Contour na coś w tym rodzaju:

Contour

Da w efekcie kolejny Stroke, lekko zaokrąglony, ale dla pokazówki wystarczy. Do czego nam kolejny Stroke? Ano jeśli przyjmiemy, że Outer Glow robi nam za obramowanie, to prawdziwy Stroke może robić za: drugą obramówkę, jeśli chcemy dostać efekt border-style: double z CSSa albo za „kolorowy” padding.

Tak, można dodać do tego wszystkiego jeszcze Inner Glow, pamiętając także o ustawieniach jak wypisałem wyżej oraz odpowiednim rozmiarze tego wszystkiego.

Jeśli zależy nam na jakimś obrazku w tle, to należy przygotować odpowiedni Pattern. Tworzymy nowy Canvas (Ctrl + N po prostu), wklejamy wzorek, zaznaczamy pożądany obszar i wybieramy albo Edit → Define Pattern (wcześniej Filter → Patter Maker, jeśli wzorek nie będzie się chciał ładnie sklejać powtarzany w pionie i poziomie). Teraz tylko wystarczy dodać w Blending Options → Pattern Overlay, wybrać odpowiedni Blend Mode dla tej pseudowarstwy i mamy coś na kształt background-image: url() repeat; Oczywiście można także użyć Color albo Gradient Overlay, wszystko zależy od efektu jaki chcemy osiągnąć. A to przykład tego o czym we wpisie była mowa:

Final Effect

Efekt tutaj przedstawiony oczywiście jest mocno przerysowany, dla potrzeb layoutu możemy ustawić minimalistyczne szare obramowanie, biały „padding” dla jakiegoś zdjęcia. Wszystko zależy od przeznaczenia. :)

Teraz taki obiekt możemy spokojnie rozszerzać, pomniejszać (Free Transform → Ctrl + T), zmieniać mu kolorki i dalej będzie taki sam. A jeśli w projekcie mamy parę takich elementów i muszą mieć taki sam wygląd, to sporym ułatwieniem jest kopiowanie Blending Options - albo przez menu kontekstowe warstwy albo przez złapanie za napis Effects i przeciągnięcie pod drugą warstwę.

To nie koniec porad dla PS, chcę w kolejnych odcinkach podzielić się resztą doświadczeń. No a jeśli Wy jakieś macie związane z emulowaniem prostoty CSS w PS, to dalej, powiedzcie, człowiek się uczy całe życie. :)

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 01 listopada 2005 o 12:22

Kategorie: Design

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. Patrys 1 01 listopada 2005, 12:32

    Tak mi się nasunęło - mógłbyś zrobić tak, żeby w twoim szablonie nie podświetlały się rzeczy nieinteraktywne? W tej chwili jest dokładnie przeciwnie niż radzą specjaliści od HCI i podręczniki od HIG.

  2. jbl 2 01 listopada 2005, 12:45

    Kurczę, a myślałem, że czegoś nowego się nauczę. ;-)

  3. gopix 3 01 listopada 2005, 12:54

    Photoshop 7 rulez. Też go używam i też praktycznie tylko z blendingów. Z jednego głupiego małego, białego kwadratu można zrobić cudo!

  4. froger3 4 01 listopada 2005, 12:54

    "Potęgą w PS jest Blending Options dla warstwy"

    no ba ! :D

    Dla mnie jako rysownika ważny jest jeszcze SMUDGE TOOL :>

  5. Riddle 5 01 listopada 2005, 12:59

    Jbl: Jakbyś Ty pisał o PS, to byłoby odwrotnie, więc zabieraj się za składanie literek. ;)

  6. nomind 6 01 listopada 2005, 13:02

    Pierwszy raz w zyciu widze, zeby ktos opisywal poczynania z programem graficznym podajac jako 'podstawę' CSSa.

    To tak mniej wiecej, jakbym uczyl kogos rysować konia ołówkiem na kartce porównując cały czas to do rysowania myszką.

    Nie uważasz ze CSS jest wtórny w stosunku do grafiki, a nie na odwrót?

  7. Riddle 7 01 listopada 2005, 13:05

    Bo CSS jest potężniejszy w swojej automatyce. Nie da się osiągnąć perfekcyjnego kropkowanego obramowania korzystając tylko z Pattern dla Stroke, a CSS pięknie to wykropkuje. Podobnie inne rzeczy. Mi chodzi tutaj o automatykę, Blending Options są okej, ale brakuje im wielu rzeczy.

  8. Patrys 8 01 listopada 2005, 13:07

    Tylko czy grafika opiera się na automatyce? Jeśli chcesz automatyki, to po co ci program graficzny przede wszystkim. Wystarczy parę skryptów na krzyż.

  9. jbl 9 01 listopada 2005, 13:07

    Do Photoshopa dogrywasz akcje i masz automatykę. Ale czy to na tym polega? :>

  10. Riddle 10 01 listopada 2005, 13:10

    Patrys: Grafika w sensie a coś sobie narysuję - nie. Tworzenie layoutu, gdzie poszczególne elementy muszą być spójne - jak najbardziej. No chyba, że chcesz mi zarzucić nieumiejętność tworzenia designów w tym programie. Feel free, mi nie zależy na tym jak mnie się ocenia tylko czy ktoś coś wyniesie z moich wpisów.

  11. Patrys 11 01 listopada 2005, 13:12

    Ja tylko nie rozumiem, po co wrzucać do Photoshopa coś, co z założenia masz na CSS już rozpisane. Nie wygodniej bawić się w notatniku wtedy?

  12. Riddle 12 01 listopada 2005, 13:15

    Dla mnie Photoshop jest piaskownicą, gdzie następuję rozplanowanie elementów, dodanie małych poprawek, polepszających efekt końcowy, zastanowienie się nad umiejscowieniem, oblewaniem, relacjami. I nie, dla mnie niewygodniej, mam to nieszczęście być perfekcjonistą.

    Zresztą czy to ważne? :/

  13. Patrys 13 01 listopada 2005, 13:18

    Ja też jestem perfekcjonistą, ale są projekty, które zaczynam na kartce, a kończę w notatniku. Ich proces życiua omija Gimpa zupełnie (poza elementami typu ikony, czy tła).

  14. jbl 14 01 listopada 2005, 13:19

    Patrys & Riddle: różni ludzie, różne potrzeby. Ważne jest, że wasze projekty są właśnie takie dobre. Nie ważne jak do tego dochodzicie.

  15. Yano 15 01 listopada 2005, 14:15

    A ja tak abstrahując od dyskusji: PS7 rzeczywiście był ostatnim, w którym dokonano rewolucyjnych zmian. W CS-ach trochę dodano, ale nie ma w nich wielu funckji, których by brakowało mi w 7-ce. Może dlatego, że zmiany nastąpiły głównie właśnie na poziomie automatyzacji pewnych rzeczy, a ja automatów nienawidzę. Jedyne co w CS (czy w CS2) mi przypadło do gustu to udoskonalony retusz — jakoś łatwiej mi się w nich robi poprawki niż w PS7.
    Natomiast do projektów PS7 mi wystarczał aż nadto. Inna sprawa, że nie robiłem w nim wszystkiego, tylko ogólny projekt (taki mniej–więcej) a szczegóły dopracowywałem juz bezpośrednio przez HTML czy CSS. Może dlatego, że CSS ma pewne ograniczenia, których jednak program graficzny nie posiada i kilka razy musiałem zrezygnować z pewnego efektu, żeby ograniczyć dłubanie w kodzie (i głównie chodzi mi tu o pewien program do aktualizacji Windows, bo pod Firefoksem tych ograniczeń jakby mniej).
    (PS: @Riddle: a kiedyś żeś pisał, że masz manię posiadania najnowszych wersji. ;) )

  16. wizard3k 16 02 listopada 2005, 14:32

    Ja mam doświadczenie w PS, ale raczej nie zwiazane z Tworzeniem stron, no chyba ze chodzi o jakies loga, buttonu, antipixels :)

  17. Yano 17 02 listopada 2005, 19:19

    Heh, do antipixels to nawet nie jest potrzebna znajomość programów graficznych (nie żebym się czepiał, czy coś ;) ). Np. tu: http://www.lucazappa.com/brilliantMaker/buttonImage.php sobie można potworzyć własne „antipiksele”. Albo tu: http://kalsey.com/tools/buttonmaker/ albo w jeszcze paru innych miejscach. ;)
    A generalnie PS to jest coś co mnie jeszcze jako tako trzyma na Windowsach. Do GIMPa się przysiadam, ale mam zbyt silnie zakorzenione skróty z PS i mi się ciężko strasznie przyzwyczaić…

  18. Riddle 18 02 listopada 2005, 19:24

    Yano: Może wyjściem jest… Mac OS?

  19. Yano 19 02 listopada 2005, 19:38

    Hmm, w sumie teraz Apple przeszło na platformę Intela, więc jakby się udało na blaszaku uruchomić OS X to czemu nie?
    A na zakup nawet miniMaca to mnie narazie nie stać. :(

  20. smk 20 04 listopada 2005, 01:15

    Właśnie z powodu możliwości ustawienia wszystkich efektów (w stos) jako dodatek do elementu na warstwie (ktory zawsze mogę modyfikować - dorysowując coś, albo modyfikując węzły), włączania i wyłączania oraz zmiany ich siły i parametrów do tworzenia designów stron używam "od zawsze" Macromedia Fireworks. Photoshopem to ja sobie mogę zdjęcia zretuszować...
    Ech... A i tak żałuję, że Corel porzucił projekt Xara.

  21. Yano 21 04 listopada 2005, 01:28

    @smk: „każda pliszka…” ;) Nie raz już toczyły się boje o tym, który program jest lepszy (głównie pomiędzy obozami Adobe i Corel). Wszystko zależy od tego, kto i doczego używa danego programu oraz jak bardzo jest oswojony z jego obsługą. Mnie imponują skróty w Photoshopie — praktycznie nie muszę mieć widocznych żadnych paneli z narzędziami, żeby wydajnie pracować. Poza tym uważam (i jest to być może moje subiektywne odczucie), że interfejs PS jest intuicyjny. Znaczy jak chcę zmienić krycie warstwy to klikam na warstwie i zmieniam opacity a nie spaceruję po menu szukając jakiś dziwnych narzędzi sztucznie stworzonych do tego celu.
    BTW: jest projekt GIMPShop, mający na celu maksymalnie upodobnić GIMPA do Photoshopa w zakresie obsługi interfejsu. Jasne, że nie da się zrobic tego w 100%, bo pewne rzeczy nie będą dostępne (np. czasowe przełączenie się na łapkę z dowolnego narzędzia przy pomocy spacji), ale zawsze wygodniej pracować w czymś, co się zna (przynajmniej częściowo).

  22. smk 22 04 listopada 2005, 01:33

    A sądzisz, że ja w Fw się przez menu przegrzebuję? :-)
    I niestety jak muszę coś w Ps zrobić, to nic nie mogę znaleźć w tym pokręconym interface. ;-)
    Kwestia przyzwyczajeń, więc porównywanie interface'ów jest nieco bez sensu...
    Dlatego pisałem o możliwościach.

    ATSD, dla opornych na zmiany jest też projekt http://www.xpde.com/

  23. Yano 23 04 listopada 2005, 01:43

    Ależ ja nie kwestionuję Fw. Chociażby dlatego, że oprócz chwilowej zabawy z jakąś wersją testową nie miałem z nim w ogóle do czynienia. Możliwości też ciężko porównać, jak w PS mogę wypełnić zaznaczenie kolorem przy pomocy kombinacji dwóch klawiszy a w innym programi musiałbym sięgać do przybornika po odpowiednie narzędzie. Zeby być obiektywnym musiałbym odstawić PS i popracować w Fireworks, PhotoPaint czy GIMP-ie przynajmniej kilka miesięcy, choć i tak to nie przebije mojej 10-letniej znajomości PS-a (od wersji bodajże 3.5). Podejrzewam, że gdybym choć połowę tego czasu spędził z dowolną inną aplikacją graficzną też bym twierdził, że jej obsługa jest banalna a ten PS taki skomplikowany. ;)

  24. Patrys 24 04 listopada 2005, 01:47

    /me w PS pracował od wersji 1.5 i stwierdza, że bzdury gadacie ;D

  25. Yano 25 04 listopada 2005, 01:48

    Patrys nie kłam. Nikt tak długo nie żyje. :P

  26. Patrys 26 04 listopada 2005, 01:50

    Żyje i ma się dobrze całkiem, jak zaczynałem z komputerami, to nawet nie marzyłem o możliwościach Deluxe Paint IV ;]

  27. Yano 27 04 listopada 2005, 01:53

    Nie mów — robiłeś animowane gify dziurkując karty do programatora? ;D

  28. Patrys 28 04 listopada 2005, 01:59

    Dość powiedzieć, że idąc do podstawówki znałem system heksadecymalny.

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.