[Teoria] Poradnik dot. tworzenia stron internetowych.

[Wredna]

I. Wstęp

W tym poradniku postaram się przedstawić kilka podstawowych zagadnień, jeśli chodzi o pracę przy tworzeniu szablonów stron internetowych, tricków programów takich, jak Adobe Photoshop, czy Adobe Illustrator oraz zbiór przydatnych linków, które każdy designer powinien przynajmniej raz odwiedzić, a z części korzystać dość często. Znajdziecie tutaj informacje o:

• Strona responsywna- co to jest, czym się charakteryzuje oraz, czy ma duże znaczenie we współczesnym świecie grafiki komputerowej oraz językach webowych.
• Przydatne strony, oraz download'y dla początkujących, jak i bardziej zaawansowanych designerów.
• Znaczenie kolorystyki w szablonach. Sposoby na jej dobór oraz synchronizacje z ekranami i przeglądarkami.
• Podstawowe wartości strony oraz znaczenie jej układu.
• Sposoby na dopasowanie Adobe Photoshop'a i Illustratora do pracy przy layoutach.
• Typografia i najczęstsze wpadki designerów, czyli jak uniknąć błędów przy zamieszaniu informacji na szablonie.
• HTML i CSS, czyli dlaczego grafik powinien znać języki webowe lub mieć kontakt z osobą, która je zna.

II. Strona responsywna

Dawno temu, jeszcze przed erą tabletów i iphonów, graficy mieli bardzo ułatwione zadanie. Grafikę pod stronę internetową tworzyło się w standardowych rozmiarach, jakimi były 1024px na 768px. Teraz każdy designer powinien mieć świadomość, że stronę można otworzyć zarówno używając komputera, notebook'a, tabletu, czy telefonu komórkowego. Oznacza to, że jesteśmy zmuszeni w większości przypadkach (chyba, że klient nie chce się otwierać na posiadaczy rożnych sprzętów) stworzyć kilka wersji tego samego szablonu, który będzie kompatybilny z rożnymi urządzeniami.

Jak w takim razie dobrze przygotować bazę pod nasz projekt?

Polecę tutaj kilka stron. Jedną z nich jest list of displays by pixel density na wikipedii, która zawiera większość, o ile nie wszystkie rozdzielczości sprzętów, którymi możemy otwierać strony internetowe.

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Mamy tutaj alfabetycznie podane różne marki oraz ich produkty. Na co my, jako graficy powinniśmy zwrócić uwagę?



Jest to wycinek z selekcji Apple. jak widzimy mamy tutaj podane zarówno nazwy produktów, ich rozdzielczość w inchah, czyli centymetrach, generacje, ppi, czy rozmiar w pixelach. Od razu napomnę, żebyście nie wystraszyli się ilością tych produktów. W większości przypadków, jak można zauważyć rozdzielczość jest taka sama, pozostaje między nimi jeden schemat. Czasami zdarzają się jakieś małe odchyłki, jak np w Motorolii 854x800, ale jeżeli zapamiętacie, to co zaraz napisze, nie będzie stanowiło to dla Was żadnego problemu.

Nas, jako grafików z powyższej listy interesuje tylko i wyłącznie jedna wartość, jaką są pixele (resolution). To na ich podstawie tworzymy nowy dokument w Photoshopie, czy chociażby w GIMPie, oraz tylko i wyłącznie nimi powinniśmy się kierować. To właśnie pixele tworzą nam obraz w internecie. Oczywiście przeważnie patrzymy na szerokość. Wysokość strony może być różna i tutaj jest to kwestia indywidualna. Nie musimy idealnie wpasować się w wysokość urządzenia, możemy zrobić mniejsza, lub dużo większą.

Powrócę teraz do tego, co pisałam wcześniej, czyli do stałych wartościach pixeli, jeśli chodzi o rozdzielczość. Najczęściej są to:
Dla komputerów, telewizorów i laptopów: 1024>
Dla tabletów: 1023-768
Dla mniejszych tabletów i większych telefonów komórkowych lub innych urządzeń mobilnych : 767- 480
Dla telefonów komórkowych: 479<

Co za tym idzie. Jeżeli wpasujemy się w te wymiary, nie będzie problemu z odtworzeniem strony na większości, o ile nie wszystkich urządzeniach. Czasami pojawią się duże przerwy po bokach, np jeżeli jakiś produkt jest dużej rozdzielczości, ale nie spowoduje to błędów podczas przeglądania.

Tutaj podam jeszcze jedną przydatną stronkę:

http://ranking.pl/pl/rankings/screen-resolutions.html

Jest to aktualny ranking urządzeń. Jeżeli już jesteśmy na stronie, wystarczy, że po prawej stronie wybierzemy "Urządzenia mobilne" i pojawi nam się lista tych najbardziej popularnych. W połączeniu z wcześniejszym linkiem z wikipedii może nam to bardzo ułatwić pracę.

Na co powinniśmy zwracać uwagę przy tworzeniu różnych wersji na różne urządzenia?

Komputery i telewizory. Tutaj w sumie nie ma żadnych, większych wymagań jeśli chodzi o dopasowanie do rozdzielczości o ile znamy lub przeczytaliśmy to, co jest wyżej. Jednak istnieją dwie, bardzo ważne rzeczy, na które musimy zwrócić uwagę:

• Pasek do scrollowania znajdujący się po prawej stronie
• Przeglądarkę

Dlaczego jest to tak ważne?
Na przykładzie paska scroll: Mamy już stworzony nowy dokument o szerokości 1024 pixele, zaczynamy tworzyć już szablon, przy okazji zostawiając po bokach trochę "luzu" (na większości stron można to zaobserwować". Ok, stworzyliśmy szablon, kodujemy, wrzucamy na stronę i co się okazuje? Że pasek scroll zasłania nam część, mimo, że małą informacji na szablonie.
Dlatego też warto dać jeszcze więcej tego "luzu" po bokach.

Co do przeglądarki. Tworząc szablon nie mamy żadnych pasków po bokach, jak jest to w przeglądarkach. Czasami dopiero po zakodowaniu strony widzimy, że rożni się ona minimalnie od oryginału. Nie jest to w sumie jakaś wielka różnica, wiele grafików nie zwraca na to uwagi.

Tablety:

W nich nie ma paska scroll, większość ruchów wykonujemy palcem, czy rysikiem, jak i nie ma charakterystycznych, bocznych pasków przeglądarki. Co więcej, warto pamiętać, że tablet oferuje nam możliwość oglądania strony poziomo i pionowo.

Telefony:

Jeżeli chodzi o telefony to jedną ważną cechą jaką się charakteryzują to bardzo mała szerokość (pole widzenia) strony. Oznacza to, że powinniśmy stronę stworzyć w taki sposób, by najważniejsze informacje pojawiały się pionowo, jeden pod drugim. Powinniśmy również zrezygnować z większości dużych grafik, buttonów i zastąpić je tekstem. Dla lepszego wyobrażenia sobie tego, możesz się posłużyć stworzonym przeze mnie, wyżej obrazkiem, prezentującym 3 urządzenia i trzy rodzaje wyświetlania tej samej strony.

Przy zabawie z rozdzielczością polecę jeszcze jedną stronę.

http://resizemybrowser.com/

Naprawdę super strona. Ja używam jej za każdym razem i naprawdę bardzo polecam. Możemy wybrać sobie tutaj rozdzielczość, przy jakiej pracujemy, następnie, kiedy otworzy nam się nowe okno zrobić screen i wrzucić do photoshopa, by dobrze odwzorować szerokość.

III. Zaczynamy tworzyć layout

Na początku tworzymy nowy dokument. Photoshop ułatwia nam zadanie ponieważ możemy od razu wybrać jedną z webowych rozdzielczości. Podczas tworzenia nowego projektu wybieramy opcję "Web" za listy Preset, a następnie rozmiar z listy Size. Oczywiście możemy modyfikować tymi wartościami.




Jest jeszcze jedna bardzo ważna kwestia przy tworzeniu projektów na potrzeby sieci. Jest to kolorystyka sRGB. Oznacza to, że kolory są podawane w liczbie szesnastkowej. W większości przypadków Photoshop wymusza na nas ten rodzaj kolorystyki, jednak jeżeli mamy ustawioną inną, wystarczy, że wybierzemy ją z listy Color Profile.



Warto jeszcze (jeżeli nie mamy ustawione tego domyślnie) o przełączenie się na podgląd w kolorystyce sRGB. Podam przykład na moim starym layoucie. Pierwszy prezentuje kolorystyke CMYK, którą PS w jakiś sposób przypisuje do każdego nowego dokumentu (nawet, jak jest tworzone w RGB)



Drugi natomiast jest z ustawioną kolorystyką sRGB. Widzimy, że nasycenie kolorów uległo dużej zmianie.



Ustawiamy to w Menu- View:


Czasami po zmianie nie zauważycie żadnej różnicy. Nie martwcie się. Są różne karty graficzne, różne nasycenia kolorów w ekranach, więc nie u każdego ten efekt będzie tak widoczny. Ale o kolorach i ich anomaliach później.

Gridy i Guides

Chyba jedną z najważniejszych rzeczy przy tworzeniu szablonów jest używanie gridów oraz guides (linii pomocniczych). Jak możecie zaobserwować na wielu stronach, poszczególne elementy tworzą pewien zależy od siebie schemat. Nie są porozrzucane w nieładzie, odnosi się wrażenie, że "przylegają do niewidocznych linii". A to wszystko dzięki projektowaniu za pomocą właśnie gridów i guides.

Co to takiego?

Te linie możemy wywołać poprzez naciśnięcie skrótu Ctrl+R. Po lewej stronie pojawi nam się jedna przedziałka i również na górze photoshopa, czy illustratora. Musimy pamiętać, by ustawić ją w pixelach, jeżeli nie mamy tego domyślnie. Naciskamy na nią (górną lub boczną) PPM i wybieramy opcje "pixels".



Teraz "łapiąc" za którąś z "linijek" i przeciągając w bok lub w dół możemy tworzyć linię, które oczywiście są widoczne tylko w Photoshopie, czy illustratorze. Po zapisaniu dokumentu nie będzie ich na projekcie. Możemy za ich pomocą ustawić idealne, rożne odległości np boków strony, czy poszczególnych elementów. Mimo to, jest to wyjątkowo czasami czasochłonne, zwłaszcza, jeżeli szablon ma zawierać wiele elementów. W tym procesie pomaga nam strona:

http://960.gs/

Jak działają gridy możemy zaobserwować na poniższych przykładach, które są na stronię. Wystarczy, że przy którymś szablonie naciśniemy na button "show grid". Tutaj dam Wam jeden przykład:



Z podglądem gridów:



Możemy zauważyć, że elementy na stronie są idealnie wpasowane w gridy, dzięki temu wszystko jest estetyczne, równe.

Jak mieć takie gridy w photoshopie?

Wystarczy, że ściągniemy je na swój komputer naciskając na duży button, znajdujący się na górze strony:



Mamy tutaj dużo folderów, nas interesuje tylko folder templates- photoshop.

Mamy tam trzy pliki psd. Jeden, zawierający 12 kolumn, drugi 16, a trzeci 24. Otwórzcie go sobie w PS'ie, by zrozumieć czym się różnią. Ja osobiście najczęściej korzystam z 16, czasami z 12 jeżeli szablon nie ma wielu elementów. Z 24 w ostateczności, rzadko. Dla mnie jest niewygodny, ale może Wy będziecie mieć o tym inne zdanie.

Ja otworzyłam PSD z 16 kolumnami. Wygląda on w pomniejszeniu w ten sposób:



Na pomniejszeniu jest to słabiej widoczne, ale otwierając sobie w Photoshopie możemy zauważyć, że mamy zarówno niebieskie linie, jak i o zmniejszonej opacity- linie czerwone. W polu linii czerwonych powinien znajdować się nasz szablon, a dokładniej to, co jest widoczne/ co musi być widoczne dla odwiedzających.
Plik PSD oczywiście wymusza na nas określoną szerokość i wysokość strony, więc jeżeli mamy inny dokument, o innych wymiarach i chcemy zastosować na nich nasze psd z gridami, by móc rozpocząć pracę, wystarczy, że wejdziecie w Image- Image size i tam zmienicie rozmiar swojego dokumentu:



Gridy, jako akcje

Nie zawsze chcemy bawić się w otwieranie nowego PSD, szukanie go w folderach, czy za pomocą photoshopa. W paczce macie również plik, który jest rozszerzeniem akcji do photoshopa.
app_plugins- photoshop- 960_GRIDS.atn

Kiedy dwa razy naciśniemy na niego LPM otworzy i zainstaluje on nam się w Photoshopie w zakładce akcje.

Co to są akcje?

Akcje możemy wywołać za pomocą Window- Actions lub wciskając skrót Alt+F9. Otworzy nam się nowa zakładka, w której mamy wszystkie akcje photoshopa.
Akcje najprościej tłumacząc to "nagrane" poszczególne fazy tworzenia, które po odtworzeniu photoshop wykonuje za nas samodzielnie.



Na powyższym obrazku mamy właśnie przykład takiej akcji, jest to wgrany plik gridów, o którym pisałam wcześniej. Teraz wystarczy, że wybierzemy odpowiadającą nam ilość kolumn i naciśniemy na ikonkę "play" znajdująca się na dole okna akcji. Zauważymy, że wszystkie gridy i guides photoshop ustawił nam sam. Oczywiście, tak jak pisałam wyżej, za pomocą Image-Image size możemy również i po tym zabiegu, zmienić rozmiar naszego dokumentu.

Snap Guides

Snap to inaczej przyleganie. Funkcja bardzo, ale to bardzo pomocna przy tworzeniu Layoutów za pomocą gridów i guides. Dzięki temu, tworząc jakiś kształt lub też wpisując tekst, możemy zauważyć, że Photoshop wymusza na nas przyleganie tego elementu do guides (niebieskich linii).

Stwórzcie sobie kwadrat, czy też prostokąt i postarajcie się wpasować go idealnie między niebieskie linie. Zauważycie, że następuje nagle takie odcięcie, które charakteryzuje właśnie tego snapa.

Dzięki temu, nasze elementy będą proporcjonalne.

Jeżeli nie mamy tej opcji ustawionej automatycznie warto ją sobie włączyć poprzez View- Snap (lub Shift+Ctrl+; ) oraz View- Snap to - Guides

IV. Przygotowanie Photoshopa do tworzenia layoutów

Przygotowanie photoshopa do tworzenia layoutów, jest bardziej kwestią estetyczną, jak i indywidualną. Ja tutaj postaram się przedstawić, jak ja pracuje i dlaczego uważam, że tak jest dobrze oraz, że ten system ułatwia nam projektowanie.

Ok, pisałam już o rozdzielczości, pisałam o kolorystyce sRGB, pisałam o gridach, teraz zajmiemy się zakładkami w Photoshopie i ich umieszczeniu w taki sposób, by w 100% dawały nam komfort podczas tworzenia.

W większości przypadków jeden z głównych układów okien w Photoshopie wygląda w ten sposób:


Mamy tutaj od góry -próbnik kolorów, oraz swatche, style warstw i dopasowanie obrazu, nawigacje i histogram, oraz warstwy/kanały/ścieżki.

U mnie, wygląda on podczas tworzenia layoutów w sposób następujący:



Jak widzimy, zniknęło nam kilka rzeczy. Między innymi próbnik kolorów, nawigacja i histogram oraz style warstw . Dlaczego? Nawigacja tak naprawdę podczas tworzenia layoutów jest nam absolutnie niepotrzebna (według mnie rzadko co jest potrzebna), małe okienko pokazujące, jak w mini wersji wygląda nasz szablon w żaden sposób nam nie pomaga, a niepotrzebnie zajmuje tylko miejsce. Zniknęła również zakładka z kolorami, ale dlaczego tak się stało, napisze później opisując kolorystykę, oraz to, dlaczego pojawił się sam panel swatches. Zniknęły style warstw ( to jest kwestia indywidualna, ja rzadko korzystam z tych gotowych, przeważnie tworze je sama od razu na potrzeby projektu). Pojawiły się za to nowe zakładki. Paragraph Styles i Character Styles.

Bardzo ułatwiają one życie: Zapamiętują dany styl czcionki (jej rozmiar, rodzaj etc), jest to często przydatne. Nie musimy ponownie szukać danej czcionki, jeżeli uznamy, że jednak do naszego szablonu przyda się dodatkowy tekst. Natomiast Character Styles ułatwia nam przeglądanie strony. Np Możemy zapisać stronę główną oraz zapisać stronę z wysuniętym menu. Później wystarczy, że przełączamy się na któryś podgląd. (niektórzy robią to na zasadzie ukrywania warstw, czy grup, ale ta metoda jest 100x szybsza).

Dzieki takiemu układowi, mamy bardzo dużo miejsca na warstwy. Przy tworzeniu szablonów pojawia nam się nieraz ponad 100-200-300 warstw. Dlatego jest to podwójnie dla nas korzystne.

OK, jednak było by to bardzo niewygodne dla nas, gdybyśmy za każdym razem mieli tak ustawiać nasz układ w photoshopie. Zwłaszcza, że nie każdy zajmuje się tylko layoutami. Adobe pomyślało o takich osobach i umożliwiło nam zapisanie aktualnego schematu.

Wystarczy, że naciśniemy na button/rozwijaną listę na górze programu i wybierzemy opcje "New workspace"



Teraz możemy nasz układ zapisać np, jako "WEB" i w przyszłości bez problemu przełączać się na niego, jeżeli tego potrzebujemy:

V. Kolorystyka i jej dobór

Dobrze dobrana kolorystyka do szablonu jest bardzo często gwarancją sukcesu i tego, czy zleceniodawcy spodoba się nasz projekt. Przede wszystkim powinna nawiązywać do:
- tematyki strony
- Loga firmy

Na przykładzie strony, która oferuje np zakup różnych wyrobów czekoladowych online. Wiadomo, myśląc czekolada od razu mamy w głowie takie kolory, jak brązowy i jego pochodne, złoty, czerwony, biały, beżowy etc. Warto właśnie na takich skojarzeniach budować swoją kolorystykę w szablonach. Oczywiście istnieją wyjątki, czasami logo strony nie pozwala nam na użycie danej kolorystyki bo według nas, zbyt "gryzła by się" z resztą, ewentualnie klient takiej nie chce, lub zażyczył sobie inną.

W doborze kolorystyki do naszego szablonu bardzo pomaga strona:

https://kuler.adobe.com/create/color-wheel/

Jest to tzw Adobe Kuler. Bardzo fajne narzędzie, które pozwala nam na dobór wielu kolorów do siebie. Ciekawe jest to, że pewnie większość z Was zauważy, że na dole w kwadratach pokazują się kolory, które byście nigdy ze sobą nie połączyli. Np są z różnej "rodziny" ewentualnie występują w nich zarówno kolory zimne i ciepłe. Ale wierzcie mi, że po zaprojektowaniu na ich podstawie, oczywiście z głową, szablonu, efekt wygląda bardzo ciekawie, mimo iż na pierwszy rzut oka, nie pomyślelibyśmy nawet o takim schemacie.

W bocznej liście mamy do wyboru między innymi takie rodzaje jak:

• Analogiczne
• Monochromatyczne
• Triadowe

I tak dalej. Ja osobiście bardzo często korzystam Triadowych. Według mnie efekt na ich podstawie wygląda naprawdę super. Oczywiście to zależy od projektu i tematyki. Np do szablonów w stylu RPG, czyli takie, jak można zobaczyć np na privach gier Mt2, czy wowa, można posłużyć się schematem monochromatycznym, który w tej sytuacji bardzo dobrze się sprawdza.

Dodatkowo, czasami jest tak, że klient ustala, jaki kolor bazowy ma występować na jego stronie. Poniżej kwadratów możemy wpisać w jednej sekcji kod szesnastkowy "HEX" (o którym pisałam wcześniej) i dzięki temu kuler dobiera do głównego koloru inne.

Strona również oferuje nam ściągnięcie zaprojektowanego przez nas schematu, czy pobranie takich, które stworzyli inni użytkownicy. Oczywiście musimy założyć tam konto, by móc to zrobić.
W zakładce "Explore" mamy naprawdę masę różnych schematów, które możemy pobrać i zastosować w naszych projektach.

Ok, ale co w sytuacji, kiedy nie chcemy za każdym razem wchodzić na stronę i się rejestrować?

Photoshop ma wbudowany kuler w program. Wystarczy, że wejdziemy w Window- Extension- Kuler



Pojawi nam się nowa zakładka, z kuler'em, który posiada takie same opcje, jak ten online.



Możemy tworzyć nasze schematy kolorystycznie, a następnie je zapisać (pierwsza ikonka na dole okna kulera), opublikować na stronę kulera (ostatnia ikonka) ewentualnie dodać do swatchów (środkowa ikonka). I właśnie teraz wyjaśnię, dlaczego ja mam ustawione swatche na samej górze w obszarze roboczym.

Domyślnie ilość i kolory w zakładce swatch wyglądają tak:


Jednak jest ich za dużo, nie wszystkie sa nam potrzebne do projektu, więc je sobie wyczyścimy. Naciskamy na mała ikonkę na górze okienka ze swatchami i wybieramy Preset Manager.



Pojawi nam się nowe okno. Zaznaczamy pierwszy kolor i trzymając SHIFT zaznaczamy ostatni. Powinny zaznaczyć nam się wszystkie kolory.



Naciskamy Delete, a następnie OK. Teraz nasz panel swatch wygląda następująco:



Proszę się nie martwić, zawsze domyślne kolory można przywrócić. Ok, ja w kulerze wybrałam sobie taki schemat kolorów.



Ikonką na dole kulera dodaje ich to zakładki swatch (add to swatch).



Teraz mamy prawie wszystkie kolory w jednym miejscu, których będziemy używać przy tworzeniu szablonu. Nie musimy za każdym razem wpisywać kodu hex, czy też używać próbnika. Dodatkowo każdy z tych kolorów możemy wybrać, zmienić je lekko np ich nasycenie i dodać do naszego swatcha, jeżeli uznamy, że jeszcze jakiś dodatkowy kolor się przyda.

Naciskamy na próbkę i po lewej stronie, na dole pod narzędziami pojawi nam się on, jako główny, aktualnie używany kolor.

Wybrałam kolor pierwszy, ten żółty.



Nacisnęłam na niego dwukrotnie i pojawiło nam się nowe okno. W selekcji "B" zmniejszyłam jego jasność, a następnie nacisnęłam na button "add to swatches".



Nadajemy naszemu kolorowi jakąś nazwę lub ustawiamy domyślną i naciskamy OK. Widzimy, że dodał się on nam do naszej zakładki:



Od razu napomnę, że warto również tym sposobem dodać sobie od razu do palety swatch kolor czarny oraz biały.

Co jeszcze warto wiedzieć o kolorach?

Jak już wcześniej pisałam, są rożne karty graficzne, różne nasycenia kolorów na różnych ekranach, więc nie zawsze efekt, który jest widoczny u nas na komputerze, będzie identyczny u kogoś innego, czy chociażby na rożnych urządzeniach. Nie jest to jakaś drastyczna różnica, ale mimo wszystko powinniśmy wziąć pod uwagę, że nasz kolor może się minimalnie inaczej wyświetlać u kogoś innego.

Możemy sobie ułatwić życie dobrym skalibrowaniem ekranu naszego monitora. Wystarczy, że wejdziemy w Panel Sterowania- Wygląd i personalizacja- Ekran, a następnie wybierzemy Kalibruj kolor.
Trzeba przejść przez parę etapów, ja tego nie będę tłumaczyć, możecie sami popróbować o co z tym chodzi.

VI. Adobe Illustrator przyjazny dla Adobe Photoshop, czyli używamy dwóch programów równocześnie.

Warto, jako designer znać również program Adobe Illustrator. Czasami możemy w nim stworzyć specjalne elementy, czy logo, do naszego szablonu. Pokaże teraz fajny trik z zastosowaniem zarówno włączonego Illustratora, oraz Photoshopa.

a ) Tworzenie patternu.

Mało kto wie, że adobe illustrator świetnie nadaje się do tworzenia patternów i ma w sumie bardziej rozbudowany ten system, niż adobe photoshop. Pokaże to na przykładzie symboli, jakie mamy w illustratorze.

Wybrałam sobie taki symbol:



Teraz weszłam w Object- Pattern- Make

Otworzyło nam się nowe okno.

Nie będę opisywać wszystkich opcji. Popróbujcie sobie sami. Ale już na pierwszy rzut oka widać, że system ten jest o wiele bardziej rozbudowany, niż ten w photoshopie.
Jak już utworzymy taki, jaki chcemy wystarczy, że naciśniemy "Done" na pasku, który pojawił nam się na górze dokumentu.



Teraz, wystarczy, że np stworzymy sobie prostokąt i zastosujemy na nim kolor, który jest właśnie naszym patternem.



Możemy go dowolnie modyfikować, zmieniać jego rozmiar, ze względu na to, że jest to vector, a następnie zapisać, jako plik ai i otworzyć w Photoshopie lub bezpośrednio skopiować CTRL+S CTRL+V do photoshopa.

b ) Modyfikowanie obiektów

Przykładowo stworzyliśmy jakieś logo, czy też ikonkę w adobe illustratorze do naszego layoutu. Wrzucamy ją do szablonu, okazuje się, że jej kolorystyka, rozmiar, czy jakiekolwiek inne wartości nam nie odpowiadają. Ok... znowu wracamy do illustratora, nanosimy poprawki znowu zapisujemy lub kopiujemy i wklejamy do photoshopa. Ale o co utrudniać sobie życie? Obydwa te programy, kiedy są włączone jednocześnie tworząc coś na kształt "jednego organizmu". Zaraz wyjaśnię o co chodzi:

Przykładowo, mamy taką ikonkę stworzoną w illustratorze:



Wrzucam go poprzez skopiowanie (ctrl+s ctrl+v) do dokumentu w photoshopie. Jednak pamiętajcie, zawsze obiekty warto ustawiać, jako Smarty:


Dzieki temu jest to obiekt vectorowy. Ok, ale okazuje się, że np nam sie coś nie podoba w tej ikonce i chcemy np zmienić kolor szybki telewizorka. Naciskamy 2x LPM na mała ikonkę przy miniaturce warstwy, automatycznie przeniesie nas do Illustratora.



Zmieniamy kolor szybki i zapisujemy (CTRL+S). Teraz ponownie przełączamy się na Photoshopa i możemy zauważyć, że grafika również w nim uległa zmianie i kolor szybki. ;-)


To tylko kilka tricków, i sposobów na prace z obydwoma programami, ale nie będę ich wszystkich opisywać, zrobię to może przy okazji tworzenia poradnika odnośnie Illustratora.

VI. Typografia w layoucie

Najczęściej popełnianymi błędami wśród osób, które dopiero zaczynają pracę z layoutami jest nie tylko dobór kolorystyki, ale i również odpowiednie dobranie do niego typografii. Często w takich sytuacjach fonty mieszają się ze sobą, na jednym projekcie może być ich nawet kilkanaście rodzajów ewentualnie ich rozmiar jest przesadnie za duży. Postaram się przedstawić kilka najważniejszych wiadomości, które według mnie wpływają na dobre dobranie typografii do szablonu.

• Nie przesadzamy z wielkością

Oznacza to, że czcionka nie powinna przekraczać tych 18/24 pixeli, oczywiście w zależności od jej kroju. Dla mnie osobiście 24 to jest maksimum i stosowane tylko w niektórych sytuacjach, jak np buttony, czy menu/ nawigacja. Pamiętajcie, że czasami przesadnie duża czcionka może nam niepotrzebnie wydłużać layout, np jak informacji na nim ma być dużo. Lepiej jest używać mniejszej, ale przy tym czytelnej czcionki.

• Kolorystyka

Starajcie się nie używać "mocnych", rażących w oczy kolorów, takich jak żółty, czerwony, różowy, etc. W doborze kolorystyki pomoże wam oczywiście kuler i to, co pisałam wcześniej.

• Uważajcie na czcionki.

Tak, internet oferuje nam pobranie naprawdę masę przeróżnych fontów. Jednak uwaga, tworząc na potrzeby internetu musicie pamiętać, że ta czcionka, która używacie nie koniecznie musi się u nas w przeglądarce wyświetlać. Dlatego też istnieje takie pojęcie, jak "bezpieczne fonty".

Tutaj macie dwie strony z dl.

http://www.fontsquirrel.com

Z tej strony czcionki są absolutnie darmowe, posiadają licencję "BY", czyli do użytku komercyjnego (można "sprzedać" je wraz z layoutem). Dodatkowo umożliwiają za pomocą języka CSS wgrać je na stronę/domenę.

http://www.google.com/fonts/

A to strona google, która również posiada darmowe czcionki oraz oferuje ich wgranie na stronę/domenę. jednak dobrze jest mieć jakiś kontakt z osoba znająca się na kodowaniu, by mieć w 100% pewność, że dana czcionka na pewno się wgra.

Teraz pewnie się zastanawiacie, dlaczego podaje te strony, a nie wszystkim dobrze znaną dafont. Odpowiedź jest bardzo prosta. Czcionki z dafont mimo, iż są również darmowe, to bardzo często są kopią czcionek komercyjnych objętych prawem autorskim. Np "czcionka batmana" etc. Gdybyście przez przypadek użyli takiej czcionki i ktoś by się do tego przyczepił, to wy, jako autorzy ponosicie odpowiedzialność, a nie klient.

• Głupie treści

Czasami osoby, które dopiero co zaczynają pracę z layoutami wpisują w swoje szablony jakieś głupie treści lub ogólnie jakieś zdania, które są absolutnie niepotrzebne. Odwracają one uwagę od tego co jest najważniejsze, czyli grafiki i układu strony. Wśród grafików panuje taka zasada, by podczas wpisywania treści w nasze szablony, chcąc pokazać w którym one mają mieć miejscu używamy "lorem Ipsum", czyli zdań w języku łacińskim. Jest to standardowy wypełniacz w grafice. Do tego pomaga nam ta strona:

http://pl.lipsum.com/

Posiadacze Photoshopa CS6+, czyli zarówno CS6, jak i CC nie muszą za każdym razem wchodzić na stronę, Lorem Ipsum wbudowany jest w program. Wystarczy, że zaznaczymy narzędziem tekstu jakiś fragment i wybierzemy ta opcje:

To chyba na tyle. Mam nadzieje, że przebrneliście przez ten "artykuł" i nauczyliście się czegoś przydatnego. Chętnie zobaczę tutaj opinię oraz pytania ;-)
Pozdrawiam.

[Sajmon.]

Świetny tutorial. Tylko moim zdaniem za mało downloadu :P

[Remover]

Dzięki za tą lekturę. Naprawdę sporo się nauczyłem, aż byłem w szoku, że tak mało wiedziałem

 

Wielkie dzięki! :-)

[Resthor]

Wow, naprawdę, świetnie przedstawione, ode mnie +

[Beornottobe.]

Świetny Tutorial!

 

Nawet nie czytałem :3 Może kiedyś >.<

[Pattern.]

Wow! Bardzo fajnie się czytało. Poradnik bardzo mi pomógł i myślę, że nie tylko mi. Leci Like!

[Absurd Turtle]

Dobry poradnik, na pewno się przyda. Like dla ciebie