Do tego projektu wykorzystałam 960 Grid System, który pozwala na szybkie podzielenie layoutu na równe kolumny (co później ma znaczenie przy kodowaniu szablonu).
Pliki źródłowe z przygotowaną podziałką można pobrać z oficjalnej strony 960 Grid System. Znajdziecie w tym zipie pliki m.in. dla Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Adobe Photoshop, Visio, Exp. Design.

Ja skorzystałam z pliku, który dzieli szablon na 12 kolumn - szerokość całkowita szablonu wynosi 960 pikseli.
Po otwarciu wyglada on tak:

Tło strony

Tło składa się z jednolitego zabawienia, na które następnie został nałożony monochromatychny szum oraz poruszenie:

• Tworzymy nową warstwę, która swoją powierzchnią zakryje całe pole szablonu
• Za pomocą narzędzia Wiadro z farbą / Paint Brucket Tool nadajemy jednolity kolor (np. #161616)
• Wchodzimy w Filtry / Filter i wybieramy Szum / Noise ---» Dodaj szum / Add noise... (ja wybrałam wartość 3, gaussian, monochromatic)

  

• Mając juz nałożony szum wybieramy Filtry / Filter ---» Rozmycie / Blur ---» Poruszenie / Motion Blur (kąt:0, dystans:42)

Uzyskany efekt:

Header

W nagłówku umieściłam logotyp strony oraz menu poziome nawigacyjne.

Logo
Logotyp to Wasza indywidualna inwecja twórcza lub skorzystanie z jednego z wielu serwisów oferujących darmowe znaki firmowe.
Ja dla potrzeb tego artykułu skorzystałam z pliku zamieszczonego na Logo Instant. Zmieniłam jedynie font na bardziej standardowy - Arial (bold italic).

Menu
Pozycje w menu mają dwa stany - przed najechaniem na nie kursorem (ciemno szare) i po (czerwone)
Do stworzenia pojedynczego buttona wykorzystujemy Rounded Rectangle Tool / Prostokąt Zaokrąglony z 3 pikselowym zaokrągleniem krawędzi. Wypełnienie kolorem tego elementu nie jest istotne, ponieważ za chwilę będziemy nakładać na tą warstwę style.

Teraz nadszedł czas na ostylowanie prostokąta. W tym celu przy aktywnej warstwie z kształtem klikamy na Add a layer style / Dodaj styl warstwy

Na pierwszy ogień pójdzie button z czerwonym gradientem - czyli aktywna pozycja w menu.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Niemalże identyczne style stosujemy dla ciemno szarego przycisku, różni się on jedynie kolorami.

• Cień / Drop shadow

  
  
  

• Cień wewnętrzny / Inner shadow

  
  
  

• Blask wewnętrzny / Inner glow

  
  
  

• Faza i płaskorzeźba / Bevel and Emboss

  
  
  

• Nałożenie gradientu / Gradient Overlay

  
  
  

• Obrys / Stroke

  
  
  

Tekst
Tytuły na buttonach w menu napisane sa fontem Arial (krój: bold italic) o wielkości 15 pikseli, kolor #ffffff, dla drobnej wypukłości dodałam lekkie cień pod słowami:

Efekt końcowy samego menu:

Header już prawie cały mamy z głowy, dla urozmaicenia można dodać w tle jakieś delikatne wzorki, gradienty, etc. Ja dla przykładu umieściłam delikatny gradient od przezroczystości do koloru białego - za pomocą Reflected Gradient / Gradient lustrzany i następnie zmniejszyłam jego krycie.

Efekt końcowy headera:

Pojedynczy wpis

Każdy pojedynczy "wpis" znajduje się w przechodzącym przez całą szerokość szablonu białym pasie połączonym z delikatnymi gradientami, zarówno w środku jak i na zewnątrz.
Za pomocą narzędzia Rectangle Tool / Prostokąt tworzymy kształt o odpowiadającej nam wysokości, jako kolor wypełnienia należy wybrać jakiś jasny odcień, ja uzyłam bardzo jasnej szarości #f8f8f8 (na wielu monitorach może wyglądać na biel).
Teraz dodajemy tej warstwie styl: obrys / stroke o kolorze #ffffff i 1 pikselu grubości linii skierowanej do wnętrza kształtu.

Gradient wewnątrz wpisu
Moim zamiarem było stworzenie "blasku wewnętrznego" skierowanego bezpośrednio z góry jak i z dołu kształtu. W tym celu na kolejnej nowej warstwie zaznaczyłam interesujący mnie obszar i w nim na pomocą Gradient Tool / Gradient poprowadziłam gradient od koloru czarnego (#000000) do przezroczystości. Z początku gradient jest bardzo mocno widoczny - dlatego też należy dobrać odpowiednie jego krycie aby był mniej rzucający się w oczy.

Taki sam gradient znajduje się na dole - można poprzednią operację powtórzyć lub po prostu skopiować tamtą warstwę i odwrócić ją w pionie.

Mając obydwa efekty na osobnych warstwach można z łatwością ustawiać im inny poziom krycia lub inny kolor - daje nam to większą swobodę wprowadzania zmian w szablonie.

Gradient pod wpisem
Kolejną warstwę z gradientem tworzymy pod naszym białym polem na wpis - gradient tak jak wcześniej przebiega od koloru czarnego do przezroczystości - tutaj krycie tylko troszkę zmniejszamy tak aby efekt był czytelny na ciemnym tle strony.
Jak w przypadku poprzednich gradientów - ten również można powielić na nowa warstwę, odwrócić i przenieść nad wpis.

Zawartość wpisu
Jako, że jest to portfolio to należy przede wszystkim pokazać wgląd do realizacji - tutaj zastosowałam miniaturę grafiki, jej tytuł oraz krótki opis.
W tym miejscu na pomoc przychodzi nam wyżej wspomniany 960 Grid System. Dzięki wyznaczonym pionowym liniom pomocniczym możemy bez żadnego problemu wyznaczyć kolumny.
W tym przykładowym projekcie lewa kolumna ma 540 pikseli szerokości a prawa 380 pikseli.

Treść
Treść w lewej kolumnie napisana jest fontem Trebuchet MS o wielkości 12 pikseli, kolorze #6d6d6d. Tytuł realizacji to ten sam font - wielkość znaków 28 pikseli, krój pogrubiony, kolor #d9110a.

Przycisk "visit" to kopia pozycji z menu, jedynie zmniejszona.

Miniatura

Miniatura realizacji położona jest w prostokącie o białym wypełnieniu i nadanym cieniu zewnętrznym o odległości 0 i wielkości 6.

Aby idealnie w środku białego prostokąta umieścić miniaturę w równiej odległości od krawędzi polecam zaznaczyć cały prostokąt - klikając na maskę warstwy trzymając ctrl.

Teraz z menu należy wybrać Select / Zaznacz ---» Modify / Zmień ---» Contract / Zawęź Zaznaczenie i podać 10 pikseli dla zawężenia. Tym sposobem uzyskamy równe zaznaczenie które następnie możemy wykorzystać jako wielkość miniatury realizacji.

Miniatura ma nadane obrysowanie wewnętrzne. Dla późniejszej wygody modyfikacji obrys ten został nadany nieco inaczej niż poprzez style warstwy. Należy utworzyć kolejna nową warstwę, zaznaczyć obszar, w którym znajduje się obrazek realizacji (klikając na miniaturkę warstwy na liście warstw z przytrzymanym ctrlem) i następnie z menu wybrać Edit / Edycja ---» Stroke / Obrys, ja wybrałam grubość 3 pikseli, kolor biały (#ffffff) i lokalizację: do środka. Po zmniejszeniu krycia tej warstwy do 17% powstała lekka półprzezroczysta ramka.

Tym oto prostym sposobem utworzyliśmy pierwszy "wpis". Kolejne wpisy będą jego kopią. Dla wygody podpowiem, że bardzo przydatne są katalogi na liście warstw - dzięki nim można wszystko uporządkować i rozdzielić wszystkie elementy, sprawdza się to szczególnie gdy chcemy skopiować kilka warstw jednocześnie nie gubiąc ich przy okazji. Kopiując za jednym podejściem cały katalog (grupę) warstw na pewno ten problem nam znika.
Tak dla przykładu wyglądu kompletny układ grup dla tego projektu:

Kopiując grupę warstw dla pojedynczego wpisu i umieszczając kolejne pod sobą stworzyliśmy listę trzech wpisów, aktualnie projekt na tym etapie wygląda następująco:

Pozostaje nam dolna część strony podzielona na 3 kolumny oraz stopka.

Trzy boksy w trzech kolumnach

Dolne boksy z niewielką ilością treści również zostały wyznaczone za pomocą 960 Grid System. Każdy z nich na 320 pikseli szerokości z 10 pikselowym marginesem wewnętrznym z każdej strony.
Na tło całego pasa składa się prostokąt o wypełnieniu kolorem #121212 oraz nadanym obrysem:

Warstwa ta ma zmniejszone krycie wypełnienia (Fill) do 71% (opcja ta znajduje się tuż pod suwakiem do regulacji krycia całej warstwy). Zmniejszając poziom Fill możemy zmienić poziom krycia jedynie domyślnym właściwościom warstwy (wypełnieniu), dodatkowe style wtedy nie ulegają ukryciu. Mieszając poziomy krycia całkowitego i krycia wypełnienia można uzyskać ciekawe efekty.

Światło
Każdy z 3 boksów na samej górze ma nadane światło. Efekt ten można uzyskać tworząc nową warstwę, nakreślając na niej nieduży owalny gradient od koloru białego (#ffffff) wewnątrz do przezroczystości na zewnątrz.

Następnie należy tą warstwę odpowiednio ustawić i zmniejszyć jej krycie aby była nieco jaśniejsza od tła.
Należy ją ustawić tak aby jej fragment wystawał poza ciemny pas. Tak jak jest na obrazku:

Teraz aby ta warstwa sprawiała wrażenie uciętej (ale bez jej zaznaczania i usuwania fragmentu - w końcu nie wiadomo czy jeszcze nie przyda nam się w całek okazałości) ukryjemy niepotrzebny fragment za pomocą maski warstwy.
W tym celu musimy zaznaczyć warstwę której ten gradient ma na pewno nie przekraczać czyli ciemno szary poziomy pas (najwygodniej kliknąć na miniaturkę warstwy na liście warstw). Trzeba w tym miejscu uważać aktywną warstwą nadal musi być gradient przy zaznaczonym pasie.

Aktywnej warstwie musimy teraz nadać maskę, która to będzie miała kształt zaznaczonej wcześniej warstwy z pasem. Sprawi ona, że gradient będzie widoczny tylko wewnątrz tego zaznaczenia. Maskę tą nadajemy klikając na ikonkę Add layer mask / Dodaj maskę zaznaczoną na obrazku poniżej:

Kompletny powielony trzykrotnie boks z treścią i ikonami wygląda tak:

Ikony pochodzą z serwisu Iconfinder.net

Stopka

Stopka jest dosłownie kopią pojedynczego wpisu - została jedynie zmniejszona na wysokość oraz zostało do niej przeniesione logo w wersji B&W.

Efekt końcowy

Tym oto sposobem doszliśmy do końca tego tutoriala, efekt końcowy wygląda tak jak poniżej:

Życzymy miłej nauki!

1. Tło

Tworzymy nowy plik o szerokości 1024 px. Tło składa się z 3 warstw:

a) kolor tła: #edf7f6, dodatkowo zastosowane pędzle, chmury (można pobrać: www.brusheezy.com)
b) pasek: 6 px, kolor: #c5f3f3
c) gradient: #dffeff - #ffffff

2. Top

a) Tworzymy prostokąt o zaokrągleniu 2 px, zaznaczamy (Ctrl +T) i przechylamy wpisując wartość -5 w odpowiednim miejscu.

Pędzlem tworzymy kropki wielkości 80 px, następnie wybieramy z menu Filter – Blur – Gaussian Blur, ustawiamy wartość : 40 px.

Następnie Blend Mode ustawimy na Overlay. Powracamy do warstwy z prostokątem, zaznaczamy obszar, prawy klawisz myszy – Select Inverse, wracamy do warstwy ze smugami i usuwamy zbędny obszar.

Reksio font: ReservoirGrunge, 19 px, Sharp, Regular,
Sklep ogrodniczy: Arial, 24 px, Sharp, Narrow,
Ikona z www.iconfinder.net

b) zdjęcie z serwisu www.sxc.hu

c) zdjęcia drzew z serwisu www.sxc.hu

3. Menu

a) Tworzymy prostokąt o zaokrągleniu 2 px (patrz pkt. 2a)
b) Font: Tahoma, 11 px, None, Bold
c) Hovery: kolor : #1e9ea1

4. Content

a) Nagłówek (patrz pkt. 2a)
Font: Tahoma, 18 px, Sharp, Bold
b) Treść : Font: Tahoma, 11 px, None, Regular
c) button, kolor: #1fa1a4,
Font: Tahoma, 11 px, None, Bold
Smugi (patrz pkt.2a)

d) Z prawej strony dodajemy kilka zdjęć (WWW.sxc.hu)

5. Stopka

a) kolor tła: #75bc1c, smugi (patrz pkt. 2a), font: Tahoma, 11 px, None, Regular

Dziękuję za uwagę.

Pozdrawiam
2010 © Sylwia Bartyzel
www.forfuture.pl
sylwiabartyzel@forfuture.pl

Adobe Kuler to przede wszystkim baza kilkunastu tysięcy zestawów kolorów. Posiada możliwość podawania a zarazem wyświetlania kolorów w przestrzeniach barw RGB, CMYK , LAB, HSV oraz w zapisie szesnastkowym HEX. Samodzielne stworzenie optymalnych palet może jednak sprawiać problemy, dlatego Adobe przygotowało kilka gotowych układów, tak więc wystarczy je zmodyfikować by otrzymać estetyczny układ. Przydatna jest też wyszukiwarka , która pomoże nam odszukać kolory które zostały opisane odpowiednimi słowami kluczowymi (np. orange, light, fresh itp). Serwis jest anglojęzyczny więc najlepiej wyszukiwać kolorowy poprzez angielskie tagi.

Adobe kuler – strona główna

Jeśli nie mamy ochoty, bądź czasu na to by wyszukiwać z pośród tysięcy kompozycji barwnych tej odpowiedniej mamy możliwość stworzenia własnej w parę chwil. Do stworzenie nowej palety kolorystycznej posłuży nam bardzo przyjemny, funkcjonalny a zarazem intuicyjny panel użytkownika.
Aby w pełni wykorzystać możliwości Kulera, należy wcześniej się zarejestrować. Wchodzimy zatem na stronę www.kuler.adobe.com a następnie klikamy na link Register i podajemy niezbędne informacje. Chciałbym podkreślić iż konto założone w systemie Adobe oferuje nam możliwość korzystania z wszystkich produktów Adobe (np. Kuler, Acrobat, Photoshop.com itp.)

Jeśli chcemy stworzyć nową paletę kolorów, wybieramy z lewego menu strony Create a następnie From a Color bądź From an Image.

From a Color

Dzięki tej opcji mamy większe pole manewru w tworzeniu nowego zestawu kolorów. Na samym początku musimy określić kolor bazowy. Aby to zrobić musimy wpisać wartości liczbowe np. CMYK lub RGB w dolnej części okna w jednej z podstawowych przestrzeni barw, albo za pomocą suwaków, które znajdują się poniżej próbki.Po wybraniu koloru bazowego, musimy kliknąć na polecenie Set a Base znajdujące się nad próbką. Spowoduje to zapamiętanie koloru jako podstawę tworzonej palety.

Gdy już ustalimy podstawowy kolor zestawu, możemy wybrać typ tworzonej palety. Kuler w swoim mechanizmie posiada kilka podstawowych rodzajów palet.

Adobe kuler – główny panel zarządzania kolorami

• Analogous- paleta analogowa, gdzie kolory sąsiadują ze sobą na kole barwnym (kolorów).Kuler dobiera do wprowadzonego koloru bazowego , kolory z nim sąsiadujące. Barwy charakteryzują się niskim kontrastem.
• Monochromatic- paleta monochromatyczna , podstawowym kolorem jest kolor bazowy oraz jego najjaśniejsze i najciemniejsze odcienie. Barwa posiada najwyższy kontrast, jaki jest możliwy do uzyskania w całej przestrzeni barwnej. Kontrast uzyskamy pomiędzy najjaśniejszymi a najciemniejszymi odcieniami..
• Triad- paleta triadowa, tworzą ją jak wskazuje nazwa trzy kolory , które znajdują się na kole kolorów w równych odległościach od ciebie (60°). Paleta pozwala uzyskać kolory pierwszorzędnych (żółty, czerwony, niebieski) , oraz drugorzędnych (pomarańczowy, zielony i fioletowy).
• Complementary- paleta komplementarna, tworzą ja dwa kolory leżące naprzeciwko siebie na palecie barwnej. Na przykład pary kolorów: czerwony –zielony , bądź niebieski – żółty. Barwy posiadają wysoki kontrast.
• Compound- paleta Compound jest podobna do poprzedniej ale z uwzględnieniem wielu odcieni koloru bazowego i przeciwnego.
• Shades- paleta Cienie – reguła dobierania kolorów jest podobna jak w palecie monochromatycznej. Lecz jej odmienność polega na tym iż paletę monochromatyczną tworzy kolor bazowy wraz z najjaśniejszymi i najciemniejszymi odcieniami. Natomiast w przypadku palety Shades paletę tworzy kolor bazowy wraz z ciemniejszymi od niego odcieniami.
• Custom- paleta niestandardowa, która pozwala na samodzielne zdefiniowanie zestawu kolorystycznego.

From an Image

Bardzo przydatną funkcją Kuler’a jest tworzenie palety kolorów na podstawię fotografii. Zdjęcie możemy uploadować za pomocą przycisku Upload New Image, obsługiwane formaty plików to (.jpg, .png oraz .bmp).Mamy także możliwość wgrania zdjęcia z serwisu Flickr.

Po załadowaniu zdjęcia Kuler tworzy paletę kolorów z przypadkowych barw zawartych na fotografii. Na danym zdjęciu pokazane są miejsca próbkowania, aczkolwiek w razie konieczności mamy możliwość przesunięcia próbnika w dowolne miejsce obszarze zdjęcia. Ta funkcja również posiada opcjonalne typy palety (Colorful, Wright, Muter, Deep, Dark).

Adobe kuler – upload zdjęć z dysku i z serwisu Flickr

Pobieranie i wczytywanie palety kolorów w produktach Adobe

Adobe Kuler umożliwia nam również pobieranie stworzonej przez nas palety kolorów na dysk twardy. Pliki zapisywane są z rozszerzeniem .ase. Wówczas mamy możliwość wgrania gotowych palet do Photoshopa, InDesigna czy też Illustratora. Aby pobrać paletę należy, wybrać interesujący nas zestaw kolorów, a następnie kliknąć na przycisk (Adobe Download this Theme as an Adobe Swat Exchange file).

• Wczytywanie palety w Photoshopie- Kiedy mamy zapisaną paletę na dysku, i chcemy ją importować do Photoshopa, musimy upewnić się czy mamy włączony panel Swatches (Próbki). Jeżeli nie jest włączony, możemy go aktywować z menu kontekstowego Window> Swatches. Następnie w panelu z Próbkami z rozwijanego menu wybieramy Load Swatches (Załaduj Próbki) lub Replace Swatches (Zmień Próbki) dzięki czemu na palecie będą widniały tylko kolory z wczytanego pliki który pobraliśmy z Kuler’a. W przypadku kiedy będziemy chcieli zresetować wszystkie dostępne próbki należy wybrać z listy opcje Reset Swatches (Resetuj Próbki).



• Wczytywanie palety do Indesgina i Illustratora- Na podobnej zasadzie będziemy wczytywać palety kolorów do Indesigna czy też Illustratora. Ponownie wybieramy panel Swatches (Próbki) z rozwijanego menu wybieramy Open Swatches Library> Other Library (Otwórz bibliotekę próbek> Inna biblioteka) a następnie wybieramy zapisany plik z paletą. Co ciekawe w Illustratorze wgrana paleta nie jest dodawana do pozostałych próbek, tak jak było to w przypadku Photoshop’a, lecz tworzony jest nowy panel.

Kuler na pulpicie i bezpośrednio w programie

Adobe postarało się i wydało aplikację którą instalujemy na naszym komputerze. Działa ona w środowisku Adobe Air. Dzięki tej aplikacji mamy możliwość np. przeglądania najnowszych, najbardziej popularnych, zestawów kolorów, a także stworzonych przez nas samych palet. Można ją pobrać ze strony Adobe.com

Oprócz tego w każdym produkcie Adobe  (Photoshop, Indesign, Illustrator itd.) jest możliwość włączenia panelu Kuler, wybierając z menu Window> Extensions> Kuler. Posiada on takie same właściwości jak aplikacja którą instalujemy na naszym komputerze.

W poprzednim wpisie omówiłem podstawowe zagadnienia i funkcje Lightrooma, teraz wypadało by opisać poszczególne moduły, dzięki czemu poznamy prawdziwe możliwości tego kombajna do zarządzania i obróbki naszych zdjęć. Wszystkie nasze prace nad zdjęciami będą toczyć się wokół modułów (Library, Develop, Slideshow,Pront, Web) to dzięki nim mamy dostęp do bardziej zaawansowanych narzędzi, o których opowiem za chwilę…

Library (Bibloteka)

Moduł Library- służy do zarządzania zbiorami naszych zdjęć, w którym mamy możliwość fizycznego zaimportowania naszych fotografii do katalogu programu bądź jedynie odniesienia się do lokalizacji na dysku. Moduł ten udostępnia szeroki wachlarz narzędzi , dzięki którym mamy możliwość w łatwy sposób uporządkowania naszych fotografii dodając im oceny, oflagowanie, dzieląc je na kolekcje oraz przypisując słowa kluczowe, które pomogą nam później w ich wyszukiwaniu. Ciekawą funkcją jest odnajdowanie zdjęć dzięki informacjom zawartym w ich metadanych Exif i IPTC, a także możliwość wprowadzenia własnych informacji.

Zawartość paneli wraz z wybranym modułem się zmienia. Lecz mamy możliwość dostosowania wyświetlanych zakładek wedle własnych potrzeb wystarczy, iż przeniesiemy kursor poniżej zakładek ,a następnie prawym przyciskiem myszy wywołamy listę, w której będziemy mieli szereg opcji do wyboru min..

W pierwszej kolejności mamy do wyboru zakładki, które mają się wyświetlać w panelu po lewej stronie, następnie Show All/Hide All odpowiada za włączenie i wyłączenie wszystkich zakładek jednocześnie. Funkcja Solo Mode pozwala na rozwinięcie tylko pojedynczej zakładki, mamy również możliwość rozwinięcia wszystkich zakładek jednocześnie wybierając opcje Expand All. Ostatnia pozycja w rozwijanej liście odpowiada za wygląd dolnego panelu, do wyboru mamy kwadrat lub wzorek.

Navigator

Przejmy teraz do konkretów, na pierwszy odstrzał pójdzie zakładka Navigator, jest ona odpowiedzialna za wyświetlanie podglądu zaznaczonego zdjęcia w FilmStrip’e. Klikając na jego zawartość powodujemy przejście automatycznie do trybu Lopue Viev.

Navigator posiada również kilka opcji wyświetlania naszego zdjęcia w głównym oknie programu. Pierwszą z nich jest opcja Fit, która powoduje zmniejszenie zdjęcia do ram głównego podglądu, następnie Fill, która powoduje wypełnienie okna podglądu naszym zdjęciem. 1:1 jak sama skala wskazuje, powoduje przybliżenie zdjęcia do oryginalnych rozmiarów, pozostała nam jeszcze lista, w której znajdziemy dostępne przybliżenia w skali (1:4, 1:3, 1:2, 2:1, 3:1, 4:1, 8:1, 11:1).

Skoro jesteśmy przy trybach wyświetlania naszych fotografii znajdujących się w FilmStrip’e , chciałbym jeszcze na koniec omówić panel z narzędziami i jego zawartość w module Library.

Na samym początku panelu, ukazują się cztery tryby wyświetlania, na których teraz chciałbym skupić uwagę.

Grip View (G) – siatka w, której wyświetlają się wszystkie znajdujące się w FilmStrip’e zdjęcia.

Loupe View (E) – jak sama nazwa wskazuje w tym trybie mamy możliwość korzystania z narzędzia lupa.

Campare View (C) – ten tryb powoduje podzielenie, okna podglądu na dwa mniejsze ekrany i wyświetlenie dwóch zdjęć, które chcemy porównać.

Sourvey View (N) – pozwala zestawić więcej niż dwa zdjęcia, przytrzymując klawisz CTRL możemy wybrać dowolną ilość zdjęć które ukarzą się w głównym oknie programu.

Catalog

W zakładce Catalog znajdziemy trzy elementy:
All Photography (Wszystkie fotografie) – jak samam nazwa wskazuje, jest to zbiór wszystkich zdjęć zaimportowanych do Lightrooma w bieżącej sesji.

Quick Collection (Szybka kolekcja) – to miedzy innymi tymczasowa kolekcja, umożliwiająca dodawanie wybranych przez nas zdjęć, po przez zaznaczenie odpowiedniej ikonki przy zdjęciu.

Previous Import (Poprzedni import) – wyświetla zdjęcia zaimportowane ostatnio.

Folders

W skrócie można powiedzieć że jest to zakładka w której mieszczą się zaimportowane, lub dodane przez nas foldery. Foldery i pliki zaimportowane do Lightroom’a odpowiadają tym folderom i plikom które znajdują się na naszym dysku twardym lub na innym nośniku.Ułatwia nam to nawigowanie po miedzy zdjęciami, wówczas wybierając odpowiednio katalog możemy wyświetlać zawarte w nim zdjęcia. Do zakładki Folders możemy nie tylko importować pojedyncze pliki i foldery , ale też całe partycje z zawartymi w nich Folderami, Pod folderami i jednocześnie plikami. Można to zobaczyć na niżej załączonym screenie, gdzie ukazuje się lista w formie drzewa…

W listwie tytułowej (Folders) mieszczą się dwie ikonki (- ; +) które odpowiadają usuwaniem i dodawaniem nowych folderów/pod folderów. W rozwijanej liście (+) znajdziemy również możliwość zmiany wyświetlanej treści w folderach na: Nazwę folderu, Ścieżkę folderu oraz jednocześnie Nazwę i Ścieżkę folderu.

Collections

W zakładce Collections (Kolekcje) mamy możliwość tworzenie nieograniczonej ilości kolekcji zdjęć przechowując je przez pewien czas. Wówczas kiedy w Quick Collection mieliśmy możliwość dodawania tylko zdjęć, bez możliwości tworzenia katalogów. Jednak w tym przypadku jest inaczej, by stworzyć nowy katalog wystarczy, że naciśniemy na przycisk (+) a z listy wybierzemy interesującą nas opcje z pośród:

Create Collection (Stworz kolekcje) – tworzenie nowej kolekcji /katalogu

Create Smart Collection (Stworz inteligentną kolekcje) – tworzenie inteligentnej kolekcji, do której możemy przypisać pewne cechy (np. Nazwy, Tagi, Data ostatniej edycji, Markę aparat itp.) dzięki którym zostaną bezpośrednio dodane fotografie spełniające te wymagania.

Create Collection Set – (Stwórz zbiór kolekcji) – dzięki tej opcji mamy możliwość stworzenia zbioru kolekcji w której będą znajdować się inne kolekcję. Działa to na zasadzie folderów i pod folderów.

By dodać jakieś zdjęcie do kolekcji wystarczy na nie kliknąć, a następnie przeciągnąć je do interesującego nas katalogu.

Histogram

Zakładka Histogram zaczyna prawą stronę panelu w Lightroom’ie , jest to graficzna reprezentacja kolorów naszych zdjęć. Oprócz wyświetlania graficznie kolorów , histogram również mam możliwość wyświetlania podstawowych informacji (ISO, ogniskowa, przesłona, czas naświetlania ) dotyczących aparatu którym wykonano daną fotografię.

Quick Develop

Qiuck Develop- ta zakładka posiada podstawowe , narzędzia do zmiany parametrów wyświetlanego zdjęcia (np. Ekspozycja, Przejrzystość,) znajdującego się bezpośrednio w module Develop. Skorygować również możemy Balans Bieli , lub wybrać gotowe Presety. Jednak nie będę wgłębiał się bardziej w możliwości zakładki Quick Develop, ponieważ w następnym artykule poświeceń więcej uwagi całemu modułowi Develop oraz możliwościami jakimi oferuje.

Keywodring

Keywording – służy do przypisywania słów kluczowych naszym zdjęciom, zakładka ta posiada trzy grupy Keyword Tags, Keyword Suggestions i Keyword Set.

Kayword Tags – posiada dwa pola, w którym możemy dodać nowe słowa kluczowe. W większym polu tekstowym wyświetlane są słowa kluczowe, które zostały przypisane do bieżącej selekcji zdjęć w widoku Grid a także Film Strpi’e. Natomiast w drugim polu mamy możliwość wpisania i dodania nowych słów kluczowych, które zostaną dodane (poprzez wciśniecie klawiszu ENTER) do wszystkich fotografii w bieżącej selekcji.

Keyword Suggestions – jest to grupa, która zawiera dziewięcio pozycyjną listę najczęściej używanych słów kluczowych w danej grupie zdjęć.

Keyword Set- jest to również lista, aczkolwiek zawierająca gotowe, predefiniowane zestawy słów kluczowych. Oczywiście mamy możliwość stworzenie własnych zestawów słów kluczowych, do tego celu wybieramy z rozwijanej listy Edit Set…

Keywod List

Keyword List- ma podobne działanie do zakładek Folders jak i Collections zwiera listę wszystkich dostępnych słów kluczowych, które dodaliśmy w Keywording. Z tego miejsca możemy również przypisać słowa kluczowe z listy do danego zdjęcia, a także mamy możliwość dodawania nowych tagów, oraz ich usuwania.

Metadata

Metadata – jest ostatnia zakładka dostępna w prawych panelach biblioteki. Jej działanie jest proste, za jej pomocą możemy przeglądać i edytować metadane znajdujące się w każdej fotografii. Niemniej jednak meta dane takie jak EXIF przeznaczone są tylko do odczytu i pełnią funkcję informacyjną. Dzięki nim możemy sprawdzić jakim sprzętem i przy jakich ustawieniach wykonano dane zdjęcia.
Natomiast blok metadanych IPTC pozwala nam , zarówno opisać kto i gdzie wykonał zdjęcie, dodać własny opis, dodać tytuł czy też zmienić datę w której zdjęcie zostało wykonane.

Na belce tytułowej znajduje się również rozwijana lista , dzięki której możemy wybrać interesującą nas grupę meta danych, wyświetlanych w panelu niżej. Opcjonalnie ustawione jest Default co powoduje wyświetlenie najważniejszych przydatnych pól.

Myślę ze wszystkie informacje zawarte w niniejszym artykule, całkowicie wystarczą by powoli zaznajomić się z tym programem, starałem się pisać intuicyjnie i nie zanudzać Was zbędnym tekstem. Tymczasem zapraszam na kolejną część poświęconą modułowi Develop.

Adobe Photoshop Lightroom to cyfrowy odpowiednik ciemni fotograficznej, jest programem, który oferuje swoim użytkownikom połączenie najlepszych cech Adobe Bridge i Camera Raw w jednej aplikacji. Lightroom oferuje nam szybki import ogromnych zbiorów fotografii, o różnych rozszerzeniach w tym 150 formatów RAW (Poniżej przedstawiam listę najbardziej popularnych formatów), a w późniejszym czasie wywoływania plików RAW, dających najwyższą jakość w porównaniu do pozostałych plików graficznych i większe możliwości bez-stratnej manipulacji obrazem.

Hasselblad  .3fr
Sony .arw .srf .sr2
Casio .bay
Canon .crw .cr2
Phase_One .cap .tif .iiq .eip
Kodak .dcs .dcr .drf .k25 .kdc .tif
Adobe dng
Epson .erf
Imacon .fff
Mamiya .mef
Leaf .mos
Minolta .mrw
Nikon .nef .nrw
Olympus .orf
Pentax .ptx .pef .dng
Logitech .pxn
Red .r3d
Fuji .raf
Panasonic .raw .rw2
Leica .raw .dng
Rawzor .rwz
Sigma .x3f

Oprócz wyżej wymienionych cech Lightroom oferuje nam również łatwy sposób katalogowania i sortowania fotografii , korzystając z narzędzi które pomogą nam w ocenianiu, znakowaniu jak i również opisywaniu zdjęć za pomocą słów kluczowych.
Adobe skupiło się również na rożnych rozwiązaniach dotyczących form publikacji, dając użytkownikowi możliwość dostosowania materiału na potrzeby Internetu, druku czy też prezentacji.

Jedną z najbardziej cenionych sobie cech przez użytkowników Lightroom’a jest zapisywanie bazy danych materiałów zdjęciowych w jednym lub wielu wyznaczonych przez nas miejsc. W porównaniu do Bridge, Lightroom ma dostęp do informacji materiałów zawartych na dyskach oraz innego rodzajów nośnika (Pen Drive, płyty CD/DVD) , co przez to rozumieć?.

Lightroom ma możliwość tworzenia baz danych o ich zawartości w odniesieniu do lokalizacji pliku. W tym przypadku nie jesteśmy zmuszeniu do kopiowania całych zbiorów, materiałów zdjęciowych , lecz wystarczy zaimportować je do biblioteki. Niemniej jednak ważne do zauważenia jest to, że Adobe Bridge posiada 2 sposoby na tworzenie buforów z zawartymi informacjami plików. Metoda rozproszona gdzie bufor zapisywany jest w miejscu z którego pochodzi zaimportowany plik. A także metoda centralna , czyli wszystkie informacje dotyczące plików są zawarte w jednym miejscu (lokalizacji na naszym dysku twardym) oczywiście wyznaczonej przez nas wcześniej.

To by było na tyle jeśli chodzi o podstawowe informacje dotyczące Lightroom’a.

Wersję 30 dniową możecie pobrać ze strony adobe.com

System operacyjny: Windows: XP, Vista , 7
Procesor: Pentium IV
Pamięć: 1 GB
Wolne miejsce: 1 GB
Rozdzielczość ekranu: 1024x768

Omówienie interfejscu

Adobe Lightroom jest bardzo funkcjonalnym narzędziem do obróbki zdjęć, jego stabilność jak i elastyczność interfejsu ułatwia pracę nad zdjęciami. Na początek zajmiemy się omówieniem interfejsu, jest on dosyć prosty a zarazem funkcjonalny, więc nie powinien przy tworzyć jakichkolwiek problemów. Jak już wspomniałem wcześniej interfejs jest bardzo elastyczny , dzięki czemu mamy możliwość dowolnego ustawienie paneli przez ukrywanie, przeciąganie ich wedle własnych potrzeb. Modyfikowanie interfejsu możemy przeprowadzić za pomocą myszy , lub korzystając ze skrótów klawiaturowych.

Adobe Lightroom posiada bardzo przydatną funkcję podczas przeglądania zdjęć, mianowicie chodzi mi o zgaszenie świateł, jest funkcją , która pozwala przyciemnić elementy interfejsu, dzięki czemu uzyskamy kontrast pomiędzy oglądanym zdjęciem a interfejsem. Jest również możliwość całkowitego przyciemnienia jednolitym kolorem wybranym w ustawieniach.

By dokonać jakichkolwiek zmian w ustawieniach tej funkcji przechodzimy do okna dialogowego (Edit> Preferences> Interface) i zarazem sekcja Lights Out.
Parametr Dim Level odpowiada poziomowi przyciemnienia interfejsu, za to Screen Color jak sama nazwa wskazuje wybieramy kolor tła.

By wywołać funkcję zgaszenia świateł należy wcisnąć klawisz [L], by przyciemnić interfejs całkowicie klikamy dwa razy na klawisz [L]

Pamiętajmy o tym by przyciemnienie dostosować do danego zdjęcia, co mam na myśli??. Jeżeli dana fotografia posiada dużo odcieni czerni, przyciemnienie powinno być koloru białego, by otrzymać kontrast pomiędzy zdjęciem a tłem naszego programu.

Skoro jesteśmy jeszcze przy modyfikacji interfejsu podczas przeglądania zdjęć, Lightroom ma możliwość zmiany odcienia (tylko w skali szarości) tła znajdującego się pod wyświetlanym zdjęciem, tak samo jak w przypadku świateł, kolor tła można zmienić w ustawieniach interfejsu w sekcji Background, jest również możliwość wypełnienia tła wzorkiem.

Teoretycznie to już wszystko na temat interfejsu, w następnych artykułach przybliżę bardziej poszczególne moduły, panele oraz ich funkcje.

Czasem widzimy w projektach stron internetowych, gdzie autor pracy wykorzystał zdjęcia z iStockPhoto, w ten czas zadajemy sobie pytanie „Jak otrzymał duże zdjęcie z tego serwisu?”. Teraz postaram się odpowiedzieć na to pytanie, przedstawiając Wam dwa sposoby na otrzymanie zdjęć o dużej rozdzielczości (oczywiście ze znakiem wodnym).

I sposób – składanie

Pierwszy sposób już jest praktycznie nie stosowany, z powodu iż dużo czasu poświęcaliśmy na złożenie jednego zdjęcia, czasem zdarzało się, że ta monotonia sprawiała pojawienie się niechęci kontynuowania pracy nad danym projektem, kiedy mieliśmy już gotowe Stocki.

1. Za pomocą kursora wybieramy odpowiedni fragment zdjęcia, następnie klikając prawym przyciskiem myszy z listy wybieramy Zapisz obrazek…

2. Kompletujemy wszystkie fragmenty zdjęcia, po czym w dowolnym programie graficznym, który posiada warstwy (np. Photoshop, Gimp, Fireworks), składamy gotowe zdjęcie z fragmentów zapisanych na dysku.

3. Tak otrzymane zdjęcie zapisujemy i już teraz możemy wykorzystać je do naszej pracy.

II sposób- iStockZOOM

Drugi sposób jest łatwiejszy oraz mniej czasochłonny. Skorzystamy z wtyczki iStockZOOM dostępnej dla przeglądarki Firefox, która pomoże nam wygenerować duże podglądy zdjęć (i niektórych ilustracji wektorowych) z serwisu www.istockphoto.com bez używania programu graficznego do ręcznego sklejania fragmentów zdjęcia, tak jak robiliśmy to w przykładzie pierwszym.
Pierw musimy zainstalować wtyczkę, znajdziemy ją pod adresem https://addons.mozilla.org/pl-PL/firefox/addon/12958/ , a następnie zalogować się w serwisie IstockPhoto, lub jeśli nie posiadamy konta, zarejestrować się.

Tuż po instalacji wtyczki, ikonka iStockZOOM powinna pojawić się w pasku narzędzi, jeśli jej nie ma przejdź do menu widok> Pasek Narzędzi> Dostosuj... ,a następnie odszukaj ikonkę iStockZOOM i przeciągnij ją na pasek narzędzi.

Następnie otwieramy interesujący nas Stock, klikamy na zdjęcie by je powiększyć, korzystając z suwaka ustawiamy odpowiedni poziom powiększenia. Klikamy w ikonę iStockZOOM znajdującą się w pasku narzędzi, dzięki niej zostanie wygenerowany duży podgląd, musimy odczekać chwilę aż załaduje się całe zdjęcie. Ostatni krok to klikniecie na zapisz, aby zapisać cały obrazek.

I tak w bardzo łatwy i szybki sposób otrzymaliśmy wygenerowane zdjęcie, teraz pracy i czasu nad danym projektem poświecimy na pewno mniej.

Ricky Swallow

Firestarter logo

Dexterowe trofea

komputer inaczej

Michael Zavros

Sześć stóp pod ziemią komplet sezonów

reklama w windzie

Futerały na okulary

Sekret mangi odkryty

Chodnikowe rysunki 3d

Anatomia Koena Hausera

Dom jak czarna dziura

Achim Lippoth

Historia butelek Coca-Coli

Fejsbukowe biuro

Piwo Tiger

Klamerkowy alfabet

Bierni palacze

Jasinski obrazy

Zabawa okładkami

Z tej okazji postanowiłam napisać tutorial uczący, jak wykonać tego typu pracę. Myślę, że każdy, posiadający podstawowe umiejętności w PS, powinien sobie z tym poradzić.

Stworzenie dokumentu i przygotowanie tła

Pierwszą rzeczą, którą trzeba zrobić jest pobranie paczki zawierającej niezbędne do wykonania tapety elementy.
Następnie musimy stworzyć nowy dokument w odpowiadających nam rozmiarach. Ja będę pracować na rozdzielczości 1024×768px, jednak w moim wypadku tworzony przez nas element zajmować będzie większą część pracy, więc śmiało na podstawie dołączonych elementów można tworzyć dużo większe tapety.

Jako tło ustawimy granatowy gradient. Kolory jakich użyłam, to: #04252e i #010f1e. Rozciągamy go od lewego, górnego rogu, do prawego dolnego. Kolor na górze powinien być ciemniejszy.

Literki z pomocą Illustratora

Następnym krokiem będzie stworzenie trójwymiarowych liter za pomocą programu Adobe Illustrator.

W tym celu otwieramy AI i ustawiamy rozdzielczość na 1000×1000 px. Następnie, czcionką Arial Black, 120px, kolor #8ebd43, piszemy pierwszą literę. W moim wypadku jest to G. Następnie za pomocą narzędzia wyciągnięcie i fazowanie (Efekty -> 3D-> Wyciągnięcie i fazowanie…) tworzymy trójwymiarową literę. Ustawiając opcje zgodnie z obrazkiem poniżej można uzyskać taki sam efekt jak mój.

Następnie powtarzamy ten sam krok na wszystkich literach, jakich chcemy użyć na pracy korzystając z kolorów: #d6d92e, #49a94c i używanego już wcześniej #8ebd43. Zgodnie z własnym uznaniem zmieniamy kąty obrotu elementów, pamiętając, że powinny na siebie nachodzić.

Odpowiednio ułożone litery przenosimy do programu Photoshop. Każdą z nich trzeba przenieść po kolei tak, aby każdy stanowił osobną warstwę. Dla każdej z liter tworzymy grupę w której, oprócz litery, umieszczać będziemy też elementy ozdabiające ją. W tym momencie tapeta powinna wyglądać tak:

Efekty na literach

W następnym kroku ulepszymy nasze litery dodając świecące rogi, światła i cienie. Używając narzędzia Pióro (P) obrysowujemy lewą stronę litery, tak jak na obrazku.

Następnie, po ustawieniu pióra na Twardy okrągły 2px obrysowujemy narysowaną wcześniej ścieżkę zaznaczając opcję „symulacja nacisku”.

Podobnie musimy postąpić w przypadku reszty liter. Jeśli uznamy, że błyski na ciemnych literach są intensywne, możemy oczywiście zmniejszyć na nich krycie.

Jak widać, nasza praca nie prezentuje się jeszcze zbyt efektownie, dlatego czas nałożyć cienie. Będziemy używać do tego samego okrągłego pędzla, co wcześniej, tylko ze zmienionymi ustawieniami (screen poniżej). Pod każdą warstwą z literą należy stworzyć nową, a na nią nałożyć pędzel.

Następnie tym samym pędzlem, rozmiarem 70px ryzujemy cienie na literach, aby nadać im opływowości. Warstwy te w mojej pracy mają krycie ustawione na około 25-35%, w zależności od koloru litery. Środek pędzla ustawiałam zazwyczaj w rogach liter.
W tym momencie praca powinna wyglądać tak:

Elementy dodatkowe

W załączonej przeze mnie paczce znajduje się 11 elementów potrzebnych do ozdobienia naszej pracy. Zaczniemy od nałożenia kwiatów. Znajdują się one w pliku 11.png. Do mojej tapety wybrałam kwiat zielony i pomarańczowy, wy oczywiście możecie użyć innych. Nakładamy kwiaty w ten sposób:

I nadajemy ustawienia opcji mieszania takie, jak na obrazku poniżej.

W następnym kroku nałożymy żółte „zakręcone” elementy. Są to obrazki 01.png, 02.png i 03.png. Należy umieścić je na swojej tapecie zgodnie ze screenem,

i nadajemy im opcje mieszania widoczne poniżej. Oraz nakładamy kolor #e8d64b

Teraz pora na liście, czyli obrazki 04.jpg, 05.jpg i 06.jpg. Umieszczamy je zgodnie z obrazkiem.

I nakładamy opcje mieszania:

Następnie splattery, czyli obrazki z plików 12.png i 13.png. Układamy je w ten sposób:

Ostatnim elementem naszej graficznej układanki są duże „zawijasy”, czyli obrazki 07.png. 08.png i 09.png. Nakładamy im kolor #02101d i umieszczamy pod wszystkimi poprzednio nałożonymi warstwami.

Efekty końcowe

Jak widać aktualnie nasza tapeta ma żywe, zielone kolory. Ci, którym się podobają mogą już skończyć, tym, którzy chcą jeszcze popróbować polecam zabawę Poziomami, Mieszaniem kanałów i filtrem fotograficznym. Na mojej tapecie nałożone są:

Poziomy:

Mieszanie kanałów (krycie 13%):

Filtr fotograficzny:

I to by było na tyle. Mam nadzieję, że tutorial jest w miarę zrozumiały. Jeśli nie, wybaczcie, to mój pierwszy raz. Liczę na Wasze komentarze i efekty ćwiczeń.

Dywan czy puzzle

John Stark

Kolorowe ciasteczka

ANGRY workplace

Estetyka połączeń internetowych

Futurystyczne projekty telefonów komórkowych

dizajnerski toster

kulinarny tablet QOOQ

Sheharzad Arshad – ilustracje

notatnik w kształcie koszulki

Prawdziwy Batmobil

Pierluigi Piu - Restauracja Olivomare

Monstfur

Sukienka 3D

Oscar Santillian - Spider Statement

Jazz Radio dla nie każdego

Craighton Berman - pomysłowy Dobromir

Przypominacze Erina Hansona

Interaktywny stolik

Kreatywny retusz od Beefactory

Nie wiem jak Wy, ale ja chcę takiego Batmobila