Optymalizacja
Komentarze 2

Przestrzeń robocza Adobe Photoshop do pracy nad projektem www

ULUSTR

W internecie można znaleźć mnóstwo kursów i tutoriali, które w mniej lub bardziej zawiły sposób wyjaśniają jak zabrać się za projektowanie stron internetowych. Będąc początkującym w tym temacie, po obejrzeniu tych materiałów, otwierasz Photoshopa i tak na prawdę nie za bardzo właściwie wiesz, od czego by tu zacząć. Okazuje się, że kompletnie nie ma tu znaczenia twoja, czasem nawet całkiem rozległa, wiedza z obsługi  samego programu.

Miałam okazję przyglądać się pracy kilku artystów obsługujących Photoshop’a (byli to: graphic designer przygotowujący fotografie do druku, concept artist malujący pejzaż do gry, web designer opracowujący stronę www), którzy posługiwali się nim w zupełnie różny sposób. Różnice wynikały nie tylko z innych nawyków, właściwych każdemu z nich, ale również z typu projektu (do druku/do gry/do sieci). W efekcie używali różnych jednostek miar, paneli, ustawień i funkcji jakie oferuje Photoshop. Te, które jednemu były niezbędne, dla innego mogły w ogóle nie istnieć. Interfejs u każdego z nich był na tyle różny, że na pierwszy rzut oka można było pomyśleć, że pracują w zupełnie innych programach. Także, na dobry początek zabierając się za projektowanie czegokolwiek warto zacząć od właściwych ustawień przestrzeni roboczej.

I tak oto w dzisiejszym wpisie chciałam przedstawić Wam kilka pomysłów jak dostosować przestrzeń roboczą w Photoshopie konkretnie do pracy nad projektem www. Czyli podpowiem Wam jakie narzędzia Photoshopa możecie wykorzystać, opowiem trochę o skrótach klawiaturowych oraz o przydatnych wtyczkach, które warto zainstalować, żeby robota szła gładko i szybko ;). Na koniec pokażę jak zapisać te ustawienia, żeby móc z nich korzystać za każdym razem, kiedy zajdzie taka potrzeba.

Ustawienia ogólne:

1. Na początek ustawiamy profil kolorów przestrzeni roboczej na sRGB IEC 61966-2.1. Jest to standardowy system obsługujący na tyle szeroką gamę kolorów, że powinny być one porównywalne, czy nawet takie same, niezależnie od urządzenia na którym strona www jest wyświetlana (jest to opcja menu górnego Edit > Color Settings).

2. Następnie, także z menu górnego wybieramy Edit > Preferences > General lub kombinacja klawiszy „Ctrl + K” i zaznaczamy opcję Snap Vector Tools and Transform to Pixel Grid – oznacza to mniej więcej tyle, że wszystkie utworzone elementy będą się automatycznie dostosowywały do siatki pikseli, gwarantując nam ostre krawędzie kształtów.

general1

3. Kolejna rzecz którą ustawiamy w tym samym oknie dialogowym to jednostki miary linijek oraz fontów w pikselach, czyli wartościach naturalnych dla elementów wyświetlanych na ekranie.

unitsrulers

Wtyczki (dodatki):

1. Przy projektowaniu dla sieci  (i nie tylko) niezwykle przydatna jest wtyczka GuideGuide, dzięki której można szybko utworzyć siatkę bazową (grid), pomagającą uporządkować poszczególne elementy projektu. Taka przyjemność kosztuje teraz 10$, ale jeśli nie chcecie inwestować, można pobrać ten sam dodatek do Photoshop’a w starszej wersji, za darmo tutaj. (Wystarczy rozpakować pobrany plik i otworzyć go. Proces instalacyjny rozpocznie się automatycznie dzięki panelowi zarządzania dodatkami Adobe – Adobe Extension Manager. Po otrzymaniu informacji, że wtyczka jest poprawnie zainstalowana trzeba uruchomić Photoshop’a jeszcze raz i w górnej zakładce „Window > Extensions” powinien pojawić się GuideGuide). Tak jak na załączonym obrazku:

guideguide1

Poniżej macie przykładową siatkę utworzoną za pomocą tej wtyczki. Jeśli w trakcie projektowania będziecie chcieli podejrzeć jak projekt wygląda „na czysto” wystarczy wcisnąć kombinację klawiszy „Ctrl + ;”, żeby ukryć siatkę i jeszcze raz, żeby ponownie się pojawiła.

grid2c

2. Do projektowania dla sieci warto wykorzystać Kuler – wbudowane narzędzie Photoshopa. Pozwala on przeglądać bezpośrednio w Photoshopie gotowe, dostępne na stronie Adobe Color CC zestawy kolorów, pobierać je do panelu Swatches, w razie potrzeby edytować albo tworzyć własne kompozycje. Znajdziecie go w menu górnym: Window > Extensions > Kuler (o doborze kolorów w projektowaniu pisałam już wcześniej tutaj).

kuler1

*Warto wiedzieć, że raz utworzoną paletę kolorów można wykorzystać ponownie. Wystarczy zapisać ją klikając w rozwijane menu w prawym górnym rogu panelu Swatches, za pomocą opcji Save Swatches, a później otworzyć je ponownie przy pracy nad nowym projektem korzystając z opcji Load Swatches:

3. Przydatna jest też opcja generowania tekstu Lorem Ipsum do naszych projektów bez wychodzenia z programu. Można to zrobić za pomocą darmowej wtyczki Free Lorem Ipsum Generator, którą można pobrać stąd (wtyczkę instalujemy dokładnie w ten sam sposób jak wyżej opisany dodatek GuideGuide).

Przydatne panele (okna z narzędziami Photoshop’a):

panele-otwarte

U mnie zwykle zwinięte są wzdłuż prawej krawędzi ekranu, ale jeśli macie dodatkowy monitor, mogą być cały czas otwarte, według uznania.

Od lewej są to:

  • 1. Guideguide
  • 2. Kuler
  • Narzędzia do edycji tekstu: 3. Paragraph, 4. Character, 5. Paragraph style, 6. Character style
  • 7. Panel Historii
  • 8. Actions
  • 9. Color/ Swatches
  • 10. Layers
  • na dole ekranu 11. Mini Bridge
  • w prawym górnym rogu Navigator

Skróty klawiaturowe:

Nie chciałabym przynudzać w tym temacie, każdy wie, że skróty poprawiają efektywność pracy. Widziałam kiedyś jak można pracować w PS z wyłączonym panelem Tools (Narzędzia), wpisując wszystkie funkcje wyłącznie z klawiatury… No i szczerze, nie wyobrażam sobie jak można to ogarnąć… Dla mnie opanowanie skrótów to ciągle wyzwanie, wciąż muszę się zmuszać, żeby je pozapamiętywać (nigdy nie skusiłam się na kupno naklejek na klawiaturę, ani plakatów infografik z opisem skrótów, a może warto?). Ale przyznaję, że te skróty które znam, z których korzystam, są bardzo przydatne – już teraz nie chciałabym szukać wszystkich tych opcji w menu za pomocą myszy. Oj nie.

Oto kilka przykładowych, takich najprostszych, których używam zawsze:

  • Shift + Ctrl + N – nowa warstwa
  • Shift + Ctrl +Alt + E – tworzy nowa warstwę w panelu Layers ze scalonych wszystkich warstw – ekstra praktyczne!
  • Ctrl + D – wyłącza zaznaczenie
  • Shift + Ctrl + I – odwraca zaznaczony obszar
  • Shift + Ctrl + S – zapisz dokument jako

Skrótów niekoniecznie trzeba się uczyć – można ustawić sobie własne tutaj: Alt + Shift + Ctrl + K (Menu górne Edit > Keyboard Shortcuts). Osobiście nigdy się na to nie zdecydowałam bo nie chciało mi się później przenosić ich między komputerami na których pracowałam. Poza tym, te domyślnie ustawione często sprawdzają się także w innych programach AdobeIllustratorze czy In Designie. Co więcej, myśląc praktycznie, praca na twoim pracowniczym stanowisku komputerowym nie będzie kłopotliwa dla innych użytkowników, którzy nie znają twoich ustawień.

Zabawnie korzysta się też ze skrótów, kiedy równolegle używasz komputera działającego na platformie Mac OS i chwilę potem pracujesz na Windowsie. Automatycznie wpisujesz skrót, a tu nic nie działa… bo przyciski na klawiaturze są w innym miejscu. Na to jeszcze nie znalazłam rozwiązania ;)

Teraz, kiedy wszystko jest już uporządkowane można zapisać ustawienia przestrzeni roboczej. Z rozwijanego menu w prawym górnym rogu ekranu wybieramy opcję: New Workspace i gotowe! Dzięki temu nie będzie trzeba za każdym razem otwierać manualnie wszystkich wspomnianych powyżej paneli.

2

Dobrze, na dzisiaj to już wszystko. Mam nadzieję, że to co tu napisałam jest w miarę zrozumiałe dla trochę już „wtajemniczonych” w obsługę Adobe Photoshop ;). Jeśli obsługujecie program w polskiej wersji językowej – skorzystajcie z umieszczonych w tekście ilustracji. Na pewno z łatwością poradzicie sobie z odnalezieniem odpowiednich funkcji w menu. Wiadomo, że korzystając z tych informacji nie stworzycie od razu genialnej strony www, ale na pewno uprzyjemni/ułatwi/przyśpieszy wam to pracę. Powodzenia!

2 Komentarzy

Dodaj komentarz

Twój adres email nie zostanie opublikowany.