O szablonach, ich projektowaniu i moich z tym zmaganiach...

kolory i edycja grafiki

środa, 31 marca 2010

UWAGA!!! Szablon pod adresem http://filmowy02szablonkatemac.blox.pl przeszedł diametralną zmianę. Ta notka dotyczy tylko przerabiania grafiki ale powiązana jest z następną, która umieszcza już ją we wspomnianym szablonie.


Gdzie pachną stokrotki (ang. Pushing Daisies)Jedne szablony łatwiej przerobić inne trudniej. Te które mają jakieś ramki graficzne, ozdobniki, różnobarwne tła itd. trudniej znoszą przeróbki. Nie mówię, że się nie da ale szukam tutaj najprostszych rozwiązań i dlatego na kulinarne proponuje przerabiać szablony w których zmiany łatwo przeprowadzić. Czasami jednak, mimo iż łatwo, bez programu do obróbki graficznej się nie obejdzie. W następnej natce opiszę szablon dla którego teraz przerobimy grafikę.

ramkiZakładam, że prowadzący blogi kulinarne mają własną bazę świetnych zdjęć. W przerabianym szablonie filmowym 02 można będzie wykorzystać kilka z nich. Przygotowałam szkielet dla czterech, które będą się powtarzać w pionie. W związku z tym, że nie dysponuję własnymi kulinarnymi zdjęciami postanowiłam pójść drogą połączenia tematów kulinarnego i filmowego i wykorzystałam zdjęcia z serialu Gdzie pachną stokrotki. Zrobiłam też plik png w którym zostawiłam wszystkie ustawienia dotyczące cienia czy ramek a zdjęcia usunęłam - to mój dzisiejszy szkielet. Można do niego wstawić własne zdjęcia korzystjąc z programu graficznego w którym można pracowac na warstwach -  w tym przypadku z całą pewnościa świetnie się sprawdzi gimp ale zapewne jest wiele równie dobrych jeśli nie lepszych programów.

Szybki kurs jak w Gimpie wstawić zdjęcia do ramki.

1. Otwieramy w programie nasz szkielet. Z przyborników z narzedziami niezbędny jest ten podstawowy, przydałby sie też ten z warstwami ale nie jest niezbędny i postataramy się dzisiaj poradzić sobie bez niego.

Otwieramy w programie nasze ramki przybornik z warstwami

2. Otwieramy w programie pierwsze zdjęcie. Kopiujemy je (Crtr+C albo Edycja -> skopiuj) i wklejamy do pliku z ramkami jako nową warstwę (Edycja -> Wklej jako -> Nowa warstwa).

Musimy przede wszystkim zmienić kolejność warstw. Jeżeli włączony jest przybornik z warstwami to tylko kursorem jak palcem przesuamy nową warstę niżej. Ale skoro mieliśmy sobie radzić bez przybornika z warstwami więc obniżamy warstę korzystając z menu Warstwa -> Stos -> Obniż warstwę.

Obniżamy warstwę

3. Teraz warstwa z ramkami jest na wierzchu ale uwaga w dalszym ciągu edytujemy warstwę ze zdjęciem. Moje zdjęcie jest zdecydowanie za duże i ma niewłaściwe proporcje. Zaczniemy od zmniejszenia go troszeczkę. Zdjęcie Charlotte "Chuck" Charles miało wymiary ok 600x800px. Jest za szerokie ale chcę też je nieco inaczej wykadrować tak więc zmniejszm je tylko troszeczkę (pamietaj o zachowaniu proporcji zdjęcia). Następnie korzystając z narzędzia przesunięcia (niebieska poczwórna strzałka) ustawiam sobie zdjęcie w ramce.

Zmniejszanie zdjęcia Presuń zdjęcie

W dalszym ciagu jest sporo za duże. Ale kadr który sobie wymyśliłam jest już w ramce więc nie bedziemy skalować a przycinać. Korzystając z narzędzia zaznaczania prostokatnego zaznaczam obszar zdjęcia a następnie wybieram Warstwa -> kadruj według zaznaczenia.

zdjęcie w całości jest za duże kadrowanie

W ten sam sposób dodajemy kolejne zdjęcia. Omijamy punkt pierwszy i drugi poniweaż teraz skopiowane zdjęcia wklejają się nam na naszym poprzednim zdjęciu a pod plikiem z ramkami.

Ned Charlotte Olive Snook

Jak wypełnimy wszystkie ramki i mamy gotowy plik. Pozostaje go tylko zapisać. Wybieramy Plik -> Zapisz jako... (Shift+Ctrl+S). Możemy zachować nazwę i rozszerzenie ale trzeba uważać  na wielkośc pliku - mi wyszedł zdecydowanie zbyt duży: prawie 400KB. Proponuje zapisać go jako jpg o sporej kompresji choć radziłabym ostrożnie bo gimp całkiem sporo zubaża kolory. Przy 85% otrzymuję jakieś 50-60KB.

Gotowe. Możemy zamknąć program i przejść do wprowadzania zmian w szablonie.

sobota, 21 lutego 2009

Jest wiele rodzajów plików graficznych, niektóre cieszą się większą popularnością niż inne. O jednych można powiedzieć, że są lepszym rozwiązaniem od drugich ale najważniejsze jest chyba aby wybrać taki rodzaj który zagwarantuje nam maksymalny efekt przy minimalnych kosztach. W odniesieniu do plików graficznych efektem jest oczywiście jakość a kosztami rozmiar pliku. Dzisiaj postaram się nieco przybliżyć tematykę różnych rodzajów plików graficznych.

Rodzaje grafiki komputerowej

W najprostszym podziale moglibyśmy wymienić dwa rodzaje grafiki: grafikę rastrową i grafikę wektorową.

W grafice rastrowej obrazy tworzone są z położonych regularnie, obok siebie pikseli. Jest to rodzaj siatki odpowiednio pokolorowanych punktów. Takie grafiki nazywane są mapami bitowymi (lub bitmapami). Po powiększeniu takiej bitmapy widać punkty z których składa się obraz.

Do najpopularniejszych formatów grafiki rastrowej należą .GIF, .JPEG i .PNG

W grafice wektorowej obraz opisany jest za pomocą figur geometrycznych umiejscowionych w matematycznie zdefiniowanym układzie współrzędnych. W tym przypadku obraz jest zbiorem prostych, łuków, krzywych, okręgów, wielokątów itp. W przeciwieństwie do grafiki rastrowej grafika wektorowa jest skalowalna, oznacza to, że obrazy wektorowe można powiększać oraz zmieniać ich proporcje bez uszczerbku na jakości. Grafikę wektorową można bez większego problemu przekształcić w bitmapę podając jedynie docelową rozdzielczość obrazu rastrowego – w drugą stronę nie jest już tak prosto i rzadko kiedy uzyskuje się odpowiednie wyniki.

Wiele programów do tworzenia grafiki ma wewnętrzne formaty zapisu grafiki wektorowej przykładowo: .AI – Adobe Ilustrator, .CDR – Corel Corporation. Obecnie popularność zdobywa promowany przez W3C (jedną z największych organizacji zajmujących się standardami w Internecie) format SVG. Obsługiwany jest on w przeglądarkach: Amaya (której rozwój wspiera W3C), Mozilla Firefox (od wersji 1.5), Konqueror, Opera, (od wersji 8 beta 3). Aby używać SVG w innych przeglądarkach potrzebna jest odpowiednia wtyczka.

Orc - Raster vs Vector comparison, created by Nil Einne. Illustrates the difference between a vector image and a raster image.
Ilustracja będąca własnościa publiczną, umieszczona w repozytorium Wikimedia Commons

Dziś jednak zajmiemy się grafiką rastrową, która cieszy się dużo większą popularnością na stronach internetowych.

JPEG (ang. Joint Photographic Experts Group – Wspólna Grupa Ekspertów Fotografii)

Format JPEG (w zasadzie chodzi o format JFIF który stanowi rozszerzenie wobec standardu JPEG ale posługuje się rozszerzeniem jpeg i jpg więc często jest traktowany jako synonim) najlepiej sprawdza się w przypadku fotografii czy obrazów zawierających więcej niż 256 kolorów. Obrazy zapisywane z rozszerzeniem jpg są kompresowane co oznacza, że pewne informacje o obrazie ulegają stracie i ilustracja traci na jakości (często ta utrata szczegółów jest niezauważalna). Przy dużej kompresji obrazu wyraźnie widać efekt blokowy charakterystyczny dla tego typu kompresji.

Standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych, charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali.

JPEG - jakość maksymalna JPEG - jakość średnia JPEG – kompresja 100%
Ilustracja podstawowa wyraźne zakłócenia i przekłamania w kolorach Widoczne silne "pocięcie" obrazu na kwadraty
jakość maksymalna - przybliżenie 200% jakość średnia - przybliżenie 200% kompresja 100% - przybliżenie 200%

JPEG
jakość maksymalna
4 5024 bajtów (4,39KB)

JPEG
jakość średnia
1 2981 bajtów (1,26KB)

JPEG
kompresja 100%
442 bajtów

GIF (ang. Graphics Interchange Format)

Format pliku graficznego z kompresją bezstratną stworzony w 1987 r. Format GIF wyświetla maksymalnie 256 kolorów (czyli w przypadku zapisywania w tym formacie obrazów stworzonych przy użyciu większej ilości kolorów jak by nie było następuje strata – gif jest więc bezstratny tylko dla prostych obrazów). W plikach z rozszerzeniem .gif można umieszczać przezroczystość, nadają się też do drobnych animacji.

Najlepiej wykorzystywać je w przypadku obrazów o dużej płaszczyźnie tego samego koloru czy też posiadającego ostre krawędzie które powinny być zachowane.

gif przezroczyste tło
brak obsługi kanału alfa
ostre krawędzie
GIF
2 712 bajtów
(2,64KB)
gif - przybliżenie 200%

PNG (ang. Portable Network Graphics)

Rastrowy format plików graficznych oraz system bezstratnej kompresji danych graficznych. Format PNG jest podobny do formatu GIF pod tym względem, że akceptuje przezroczystość i najlepiej sprawdza się w przypadku obrazów o jednolitych kolorach. Przewagą PNG jest obsługiwanie stopniowanej przezroczystości (tzw. kanału alfa). Niestety starsze wersje Microsoft Internet Explorera (MSIE albo jeszcze krócej IE - starsze czyli te przed siódmą) nie obsługują przezroczystości alfa.

Format PNG zalecany jest przez konsorcjum W3C jako najlepszy format grafiki dla sieci WWW.

png stopniowa przezroczystość tła
PNG
6 344 bajtów
(6,19KB)
png - przybliżenie 200%

Wybierając rodzaj pliku graficznego pamiętaj aby tak określić jego parametry aby uzyskać najlepszy kompromis pomiędzy jakością obrazu a wielkością pliku.

 

Źródła i dodatkowe informacje:

  • Wikipedia: GIF, JPEG, PNG, SVG
  • pornel: PNG – Jak i dlaczego używać
  • hawro.wordpress.com: .png - w praktyce
  • Magazyny Internetowe: Formaty graficzne: PNG - nieużytek czy spełnienie marzeń webmasterów?
sobota, 29 września 2007

Wybierając schematy kolorystyczne do naszej strony warto zastanowić się nad znaczeniem koloru. Odpowiednio dobrane kolory są w stanie wiele zdziałać. Pewne zestawienia kolorystyczne od razu mogą zdefiniować zawartość strony. Łatwo to dostrzec na podstawie stron portali internetowych. Schemat kolorystyczny naszego bloga powinien wiązać się z ogólnymi tendencjami. Nie znaczy to oczywiście, że masz być niewolnikiem regół, czasami warto zdowyć się na wyjście z szeregu i ustalenie własnych norm. Pamiętaj jedynie, że czytelnik ma pewne oczekiwania. Zestawienie barw powinno mieścić się w granicach tolerancji odbiorcy w innym przypadku spada wiarygodność bloga (czy wyobrażacie sobie poważny blog o finasach z różowymi wstążeczkami czy żółtymi słoneczkami)

Barwa ma kilka poziomów znaczeń. Kolor zawiera zarówno treść psychologiczną, fizjologiczną jak i kulturową.

  • psychologiczna – o niektórych kolorach mówimy, że są wesołe, pogodne a o innych że działają przygnębiająco
  • fizjologiczna – barwy oddziaływają na nasz system wegetatywny, mogą pobudzać (wzrost ciśnienia krwi, przyspieszenie oddechu i tętna oraz zwiększa częstotliwość mrugania powiekami) jak i uspokajać
  • kulturowa – w zależności od kultury barwy wykorzystuje się na różne sposoby, zwykliśmy uważać czerń za kolor żałoby podczas gdy są kultury w których taką rolę będzie odgrywała biel kojarzona przez nas ze ślubami, chrztami, niewinnością

Wracając jednak do portali proponuję porównać serwisy o podobnej tematyce.

Kobieta

Jak widać dominujące kolory to róż i szary.

Gazeta Kobietaonet Kobietawp kobietainteria kobieta

Biznes, Gospodarka, Giełda

Tutaj przeważają zieleń i niebieski.

Gazeta Gospodarkaonet bizneswp biznesinteria biznes

Turystyka

Kolory kojarzące się z wakacjami nad morzem czyli żółty i niebieski albo w lesie czy górach: zielony i brązowy.

Turystyka - Gazeta.plOnet.pl Podróże Turystyka - Wirtualna Polska Turystyka - INTERIA.PL

Oczywiście nie zawsze się to sprawdza. Ale pewne generalne reguły można dostrzec.

  • Sport - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Dziecko - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Astrologia - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Pogoda - Gazeta.pl, Onet.pl, wp.pl, interia.pl

Zobacz więcej:

Marek Kasperski: e-brand: kolory... kobiety

sobota, 08 września 2007

KoloryCzasami warto poszukać małej pomocy w dziedzinie wyboru kolorów. Nasz zmysł estetyczny i ulubione kolory są oczywiście bardzo ważne ale czemu nie skorzystać ze sprawdzonych metod dopasowywania kolorów?

Kolorowe strony

W internecie jest wiele stron zawierających schematy, tabele bądź generatory kolorów. W zależności od celów jakim ma służyć kolor czy od Twoich metod pracy, możesz znaleźć stronę, która najbardziej będzie Ci odpowiadała.

  • ColorHelper bardzo wygodna stronka do sprawdzenia jak będą ze sobą wyglądać kolory; zamiast testować na blogu możesz popróbować na tej właśnie stronce; kolory możesz określać dla tła, tekstu a także linków; możesz wybrać kolor z palety albo samemu go zdefiniować w postaci HEX albo RBG
  • Tabela kolorów z szablon-blogowy.friko.pl – bardzo funkcjonalna, działa w obie strony – możesz szukać zarówno wskazując kolor jak i wpisując kod szesnastkowy; bardzo wygodna gdy szukasz koloru tła
  • Color Chart ze strony www.allfreebackgrounds.com - tym razem tabela kolorów w postaci tekstowej; dzięki temu możesz sprawdzić czytelność tekstu w danym kolorze
  • Generator gradientów i tablica kolorów z DetectZONE – można określić górną i dolną barwę a generator wyświetli kolory pomiędzy dzięki temu można znaleźć barwy harmonijnie przechodzące od jednego do drugiego koloru
  • Color Palette Generator z DeGraeve.com - fantastyczna strona; nie tyle generator harmonijnych schematów kolorystycznych co generator kolorów pasujących do obrazu; wpisujesz adres ilustracji - klikasz - i otrzymujesz dwie palety po pięć kolorów pasujących do Twojego obrazu (wersja przytłumiona i żywsza)

Schematy kolorów

Sporo jest także stron na których możesz wygenerować optymalne schematy kolorów. Jedne są bardzo proste, podają tylko kilka wartości inne, bardziej rozbudowane, dają nieco więcej możliwości. Zazwyczaj generatory prezentują kolory monochromatyczne (monotoniczne), analogiczne, dwie wersje komplementarnych (uzupełniających) i triady oraz tetrady kolorów.

  • color schemer ze strony www.allfreebackgrounds.com - prosty generator schematów kolorystycznych; kolor można podać w postaci HEX, RBG czy też HSL. Jeżeli jeszcze się nie zdecydowałeś na kolor możesz skorzystać z suwaków RG B lub też wybrać jeden z kolorów z tabeli Web Colors lub Named Colors (kolorów posiadających nazwę).
  • Color Wizard z www.colorsontheweb.com - podobny do poprzedniego generator podaje jednak więcej kolorów przez co daje lepsze możliwości; dodatkowo prezentuje koło barw tłumaczące zasady dobierania kolorów
  • Color Schemer Online z www.colorschemer.com - prosta wersja online świetnego generatora schematów; w wersji online komponuje on paletę 16 kolorów a także w prosty sposób umożliwia wygenerowanie nieco ciemniejszej albo jaśniejszej palety; kolor można wybrać z tabeli albo wpisać jego wartość HEX lub RBG
  • Color Scheme Generator 2 z wellstyled.com - całkiem fajny generator; przede wszystkim  przypadku schematów dopełniających rozszczepionych czy triad umożliwia zdefiniowania własnych odległości miedzy kolorami; dodatkowo wyświetla schematy w kilku wersjach: normalnej, pastelowej, ciemnopastelowej, jasnopastelowej, bardziej kontrastowej czy też wyblakłej (pale); i najciekawsza rzecz pozwala sprawdzić jak te kolory będą widziane przez osoby cierpiące na jakieś choroby czy upośledzenia związane z widzeniem kolorów (do wyboru masz 8 różnych wariantów)
  • Schemes z www.colorschemer.com - gotowe schematy kolorów - fantastyczna sprawa dla tych którzy uważają, że nie mają wyczucia kolorów
  • Palettes z www.colourlovers.com - świetna strona na której możesz znaleźć gotowe schematy jak i stworzyć własne

Inne strony:

  • ColorBlender.com
  • 4096 Color Wheel

Oczywiście jeżeli samemu poszukasz to znajdziesz jeszcze więcej stron z tabelami kolorów. Te które podałam mają służyć jedynie za przykład. Moje ulubione to aktualnie Color Palette Generator i Color Wizard.

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...