Oczywiste nieoczywiste

25 lutego 2017


Digital painting - z biegiem lat co raz bardziej popularny. Można go kochać lub nienawidzić. Tak samo jak malarstwo, tak i digital painting potrzebuje czasu. Nie ma tutaj niczego na już, a komputer nie zrobi za nas całej roboty po jednym kliknięciu.

Pamiętam moje pierwsze zajęcia z malarstwa - nigdy takich zajęć nie miałam, jestem samoukiem. Pamiętam jak się stresowałam i miałam wątpliwości co do wybranego kierunku. Pamiętam jak się zastanawiałam po co mi tak właściwie malarstwo na grafice i pamiętam to jak mówiłam, że nigdy, ale to przenigdy w życiu nie będę nic malować, ani na płótnie ani na komputerze. Było to dość dziwne, ponieważ odkąd pamiętam uwielbiałam malować, ale niestety, poziom zaprezentowany na zajęciach to już nie był etap samouka, był to etap wymagający od nas wszystkich ruszenia głowami. Trzymania się idealnych proporcji, bez pozwolenia sobie na jakiekolwiek odstępstwa. Ze światłem i cieniem też nie można było sobie poszaleć - maluj to co widzisz. Wtedy uświadomiłam sobie, że uczenie się wszystkiego na własną rękę nie do końca jest dobre tzn. na pierwszych zajęciach usłyszałam, że mam "dobre oko" i moje proporcje danego elementu bez wcześniejszego zmierzenia są nienaganne. Tak, to był jedyny plus tego.

Byłam również wtedy na etapie "nienawidzę grafiki warsztatowej" (zostało mi to do tej pory) oraz "nienawidzę malarstwa", ale za to głosiłam "kocham grafikę wektorową". Oj tak grafika wektorowa była moim wybawieniem.

Niestety, ta sielanka nie trwała długo i przyszedł czas na digital painting. Na zaliczenie. O zgrozo. Męczyłam się nad tym długo, za długo. Kiedy inni znajomi z grupy już dawno swoje pracę ukończyli i były one nienaganne ja się ciągle nad swoją pracą męczyłam. Kompletnie tego nie czułam. Jedyne co wtedy miałam w głowie idąc na zajęcia to "Za jakie grzechy? Może wróćmy do robienie identyfikacji wizualnej, ulotek, zaproszeń - cokolwiek, byle tylko nie digital painting".

Moje modły nie zostały wysłuchane i przez ponad miesiąc musieliśmy robić digital painting.

Wiecie jak wyglądała moja pierwsza praca? Właśnie tak:


Jak to się mówi, szału nie ma, tyłka nie urywa, a dziewice nie piszczą, ale ja byłam wtedy naprawdę szczęśliwa i mega dumna z tego. Nie obchodziło mnie to, że wygląda to jak (kolokwialnie mówiąc) wyrzygane przez psa. Nawet moi wykładowcy widząc mój akt desperackiego czynu spojrzeli na to pobłażliwie.

Moja druga praca (miało być w formie komiksu) znowu nie powala, bo wyglądała tak:


Wiecie co miałam ochotę wtedy zrobić? Siąść i płakać. tak po prostu siąść i płakać, bo moje prace z DP nadal odbiegały jakością od innych. To samo tyczyło się malarstwa, którego w owym czasie nie czułam kompletnie.

Nie wiem czy to było spowodowane tym, że prace powyżej mogłam malować tylko i wyłącznie na zajęciach, bo nie dorobiłam się wtedy jeszcze swojego tabletu graficznego, czy po prostu moim zniechęceniem. Porwałabym się na stwierdzenie, że czynniki, które na to wypływały to właśnie brak tabletu w domu i zniechęcenie spowodowane porównywaniem się do innych.

Dorobiłam się swojego tabletu, całe wakacje ćwiczyłam, usuwałam wszystkie prace jakie powstawały, bo ciągle to nie było to. Przez cały kolejny rok również ćwiczyłam po mimo, że zajęć z DP nie mieliśmy.

Nastąpił kolejny rok i na samym początku na grafice powitał mnie temat DP. Strach. Po prostu ogarnął mnie strach. Mieliśmy do wyboru - martwa natura lub postać do gry. Porwałam się na martwą naturę, ponieważ nadal mam problem z namalowaniem czegoś z głowy (później się okazało, że najpierw musimy zrobić fotomontaż aby później malować postać). Jak to moja pani profesor od grafiki powiedziała "twoje prace są matematyczne" -  no cóż lubię minimalizm i może dlatego mam problem z malowaniem z głowy i potrzebuje zdjęcia. Może właśnie dlatego tak pokochałam grafikę wektorową na samym początku.

Moja pierwsza praca, po powrocie do DP na zajęciach wyglądała tak:


Uwierzcie mi, od razu poczułam się lepiej. Podobało mi się, pierwsza moja praca, o której powiedziałam, że mi się podoba, a moja koleżanka poprosiła o przesłanie jej tego pliku do druku. Wydrukowała i wisi to u niej w pokoju.

Po tej pracy pokochałam digital painting. Polubiłam malarstwo, bo nie wiem czy wiecie, ale DP bardzo pomaga jeśli chodzi o naukę malarstwa. Możecie bez problemu przełożyć to co robicie na komputerze na płótno (pod warunkiem, że macie jakiekolwiek pojęcie, bo jeśli chodzi o naukę malarstwa od podstaw to tutaj nawet DP nie pomoże. Do DP również trzeba mieć podstawową wiedzę o tym jak malować). Takim o to sposobem, malowanie subtelnych blasków na owocach lub naczyniach nie stanowiło dla mnie problemu. Wcześniej - różnie z tym bywało. Radziłam sobie, ale czy byłam z tego zadowolona - no nie powiedziałabym, nie wyglądało to może najgorzej, ale ja nie byłam z tego zachwycona.

Oczywiste nieoczywiste 

Skoro już Was wprowadziłam w temat (trochę długo, ale jakoś nie potrafiłam się powstrzymać), to przejdźmy do rzeczy. Powiem Wam trochę o moich błędach i jednocześnie odpowiem na pytania niektórych z Was.

Dużo osób zastanawia się jak to właściwie jest z tym digital paintingiem. Ile jest w tym pracy komputera, a ile człowieka. 

Powiem tak, komputer jest Wam potrzebny w tym wypadku do podłączenia tabletu graficznego (wiadomo), zainstalowania i uruchomienia programu graficznego (wiadomo) oraz do pobrania pędzli - dobre pędzle to już połowa sukcesu.

Reszta - szkic, pomysł, malowanie, należy do Was. Jedyne udogodnienie jakie tutaj macie to to, że można zrobić ctrl+z/cmd+z lub ctrl+alt+z/cmd+alt+z - uwierzcie mi zbawienna opcja, ale też uzależniająca - tutaj mała dygresja - w pewnym momencie, tak się "uzależniłam" od DP i programu graficznego, że jak poszłam na zajęcia z malarstwa i zrobiłam błąd, to na sztaludze szukałam przycisku cmd+z (byłam już wtedy padnięta i właściwie moja twarz znajdowała się już prawie na podłodze, więc to jest moje usprawiedliwienie). Oprócz tego, łatwiej jest też robić szkic, no i oczywiście są moje kochane warstwy - kocham warstwy i nie ufam osobom, które je omijają :)

Kolejna kwestia, która zastanawia wiele osób, to kolory. Tak, taka prosta rzecz, a często nas myli, a właściwie to wzrok nas oszukuje.

Pierwszy przykład - gruszki, które wrzuciłam Wam powyżej. Tło widzimy jako odcień szarości. Tylko w miejscu gdzie pada światło widzimy odcień fioletu. Tak naprawdę całe tło jest zrobione z odcieni fioletu. Na początku sama dałam się złapać w pułapkę swojego wzroku i malowałam tło szare, dopiero później zobaczyłam, że coś nie gra i poprawiłam.

To samo tyczy się cieni. Owszem występuje tam czerń, ale nie wszędzie. Cienie składają się z czerni, granatu i szarości.

Gruszki też mają przekłamany kolor przez nasz wzrok. Niektóre ich odcienie nie mają nic wspólnego z żółtym, bliżej im do pomarańczowego.

W skończonej pracy tego nie widać i ciężko nam się jest dopatrzeć tych innych kolorów.

Najczęściej popełnianym błędem na początku (sama się na tym złapałam) jest malowanie kolorów tak jak widzimy na obrazku i nie wgłębiamy się w to czy niebieski jest na pewno niebieski czy może zawiera trochę różowego lub zielonego.

Malując na komputerze, mamy kolejne ułatwienie - pobieranie koloru z oryginalnego obrazu (kroplomierz). Wtedy możemy ładnie zobaczyć, jak poszczególne elementy naszego obrazu mają zróżnicowane kolory po mimo tego, że wydają nam się jednolite.

Kolejny przykład. Przedstawię Wam teraz moją najświeższą pracę - namalowany Sauron i Ola.


Tutaj również wydaje się wszystko oczywiste, ale ten rozchodzący się błysk od bluzy Oli i na pyszczku Saurona nie ma nic wspólnego z czystym brązem lub odcieniem pomarańczowym - to jest odcień fioletu i przybrudzony brąz.

Kolejnym przykładem będą chrapy Czytnika - na zdjęciu wydają się czarne, w niektórych miejscach są odcienie niebieskiego. Jak możecie zobaczyć poniżej, jest to zlepek kilkunastu kolorów (zieleni, szarości, czerni, brązu, niebieskiego).


Trochę inna ma się sytuacja jeśli chodzi o malowanie postaci komiksowych czy bajkowych. Tutaj wzrok nas nie oszukuje aż tak bardzo jak w przypadku malowania obrazu ze zdjęcia. Dlaczego mówię, że nie aż tak bardzo? Ponieważ większość kolorów jest taka jaką możemy zobaczyć, ale jeśli chodzi o cienie - różnie z tym bywa. Za przykład posłuży nam tutaj moja Pocahontas.


Wszystko fajnie pięknie, nie ma tutaj elementów zaskoczenia po za trzema elementami - rumieńce na policzkach to zasługa odcieni brązu i beżu, a cień rzucany przez włosy na głowę mało ma wspólnego z czernią - jest to kolor brązowy. Błysk na dolnej wardze to odcień pomarańczu.

Kolejny i już ostatni przykład (bo i tak wpis jest już dość długi) to malowanie części ciała. Ja przedstawię Wam akurat oko. Osobiście uważam, że jest to najtrudniejszy element do namalowania - szczególnie jeśli chodzi o tęczówkę. Patrzymy na oko - niebieskie, zielone, brązowe. Jednak w trakcie malowania wychodzi na to, że tych odcieni niebieskiego jest naprawdę dużo, występują różnego rodzaju plamki, gdzieś tam przewinie się jakiś odcień zielonego. Tak było w przypadku oka, które ja malowałam.


Najgorsze w tej pracy było to, aby kolor zielony zrobić spójny z niebieskim i morskim, żeby nie rzucał się tak chamsko w oczy.

Teraz podrzucę Wam bonus - najświeższa praca nad którą pracuje. Maluje gniadego (brązowego) konia. Na zdjęciu poniżej możecie zobaczyć pierwszy etap pracy, dzięki temu widzicie rozkład kolorów, z ilu kolorów ten koń się składa, a przecież widzimy go jako brązowego.



Nie traktujcie tego wpisu jak przykazań typu "jak malować digital painting", ani nie traktujcie tego jako wprowadzenie jak brać się za malowanie. Jest to bardzo luźny wpis z przedstawionymi moimi doświadczeniami i spostrzeżeniami. Ot taka ciekawostka.
Czytaj dalej »

Adobe Illustrator część druga - podstawy, poznajemy narzędzia

20 lutego 2017


Dzisiaj mam dla Was kolejną część dotycząca narzędzi w Illustratorze. Trochę czasu minęło od publikacji pierwszej części, ale po prostu zawsze było coś ważniejszego do opublikowania. Jeśli jeszcze nie widzieliście pierwszej części, to teraz możecie do niej przejść:

Adobe Illustrator część pierwsza

Pozostałą część z Was, zapraszam do tego wpisu :)

 Narzędzie Gradient (G) 

 Narzędzie Kroplomierz (I) i Narzędzie Miarka - Kroplomierz pozwala na pobieranie koloru. Narzędzie miarki, służy do mierzenie odległości między dwoma punktami.

 Narzędzie lupa (Z) 
 Narzędzie Generator kształtów (Shift+M), Narzędzie Aktywne wiadro z farbą (K) i Narzędzie Zaznaczenia aktywnego malowania (Shift+L) - Generator kształtów służy do tworzenia własnych kształtów, które powstają za pomocą łączenia prostych utworzonych kształtów. Aktywne wiadro z farbą maluje zaznaczone elementy. Narzędzie zaznaczenia aktywnego malowania, służy do zaznacza obiekt, który malowaliśmy. 

 Narzędzie obszaru roboczego (Shift+O) - pozwala na stworzenie nowego obszaru roboczego, obok tego, na którym już pracujemy o tej samej wielkości. 

 Narzędzie Tworzenia przejść (W) - możemy tworzyć przejścia między obiektami o różnych kolorach oraz kształtach. 

 Narzędzie Przekształcanie Swobodne (E) 
 Narzędzie Obracania (R) i Narzędzie Odbijania (O) 

Została jeszcze 3 część Illustratorowych narzędzi, którym poświęcimy trochę więcej uwagi. 

Czytaj dalej »

Tytuły gadżetów na boku

16 lutego 2017


Dzisiaj mam dla Was kolejną prosta instrukcję (a raczej gotowca) która będzie się opierać tylko na kodzie CSS.
Skupimy się dzisiaj na tytułach gadżetów -  zmienimy ich położenie tak, aby były na boku naszego gadżetu. Na koniec tego wpisu, będziecie mieli gotowe style do użycia.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. W arkuszu CSS wklejamy kod:
.sidebar .widget h2 {
border-radius:22px 22px 0 0;
width:170px;
position:absolute;
top:100px;
left:220px;
background:#a64d79;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}

Analiza kodu: 
Zaokrąglenie narożników 
Szerokość 
Położenie 
Odsunięcie do lewej 
Kolor tła
Rodzaj fontu 
Wielkość fontu
Marginesy wewnętrzne
Transformacja tekstu
Położenie tekstu 
Odstęp między literami 
Kolor napisu 

Wszystkie pogrubione i kolorowe wartości są zmienne. 
Pewnie niektórzy zastanawiają się za co odpowiada ta część kodu:

-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);

To właśnie ona pozwala nam na zmianę położenia naszych tytułów gadżetów.

Gotowe style do użycia


Styl 1
.sidebar .widget h2 {
width:170px;
border: solid 1px #999;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#444;}



Styl 2
.sidebar .widget h2 {border-radius: 20px 20px 20px 20px;
width:170px;
background: #9fc5e8;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}



Styl 3 
.sidebar .widget h2 {border-radius: 0px 20px 0px 20px;
width:170px;
background: #f4cccc;
position:absolute;
top:100px;
left:220px;
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
font-family: Open Sans;
font-size:11px;
padding: 10px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
color:#fff;}


Czytaj dalej »

Jak zrobić pager bloga z ikonkami Font Awesome - Blogger

13 lutego 2017


Chodzi mi tutaj o taki efekt:


Nie jest to trudne do zrobienia, nie trzeba się bawić w HTMLu - wystarczy nam do tego CSS, a jeśli ominął Cię pierwszy wpis o Font Awesome, to zapraszam Cię do na niego właśnie teraz. Tam pokrótce opowiadam o zasadzie działania, gdzie znajdziesz ikonki i jak zrobić za pomocą nich gadżet z ikonkami społecznościowymi.

Pierwszy wpis o Font Awesome

1. Przechodzimy do szablon - edytuj kod HTML
2. Nad <head> wklejamy:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Zapisujemy szablon
4. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS
5. Wklejamy kod:

#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Analiza kodu:


#blog-pager {
background: transparent;
margin:60px 0 0 0;
text-align:center;
}
#blog-pager-older-link {
letter-spacing: 1px;
}
#blog-pager-newer-link {
letter-spacing: 1px;
}
.home-link {
letter-spacing: 1px;
}
.blog-pager span,.home-link {
display:inline-block;
}
.blog-pager span a,.home-link {
text-transform:uppercase;
display: inline-block;
font:normal bold 12px 'Open Sans', sans-serif;
color: #4e4d4c;
letter-spacing:1px;
}
.blog-pager span a:hover,.home-link:hover {
text-decoration:none;
color: #fbe2dd;
}
#blog-pager-older-link a:after {
content:'\f101';
font-family:'FontAwesome';
padding-left:5px;
}
#blog-pager-newer-link a:before {
content:'\f100';
font-family:'FontAwesome';
padding-right:5px;
}
.home-link:before {
content: '\f015';
font-family:'FontAwesome';
padding-right:5px;
}

Część odpowiadająca za font - rodzaj, wielkość, grubość 
Kolor linków w pagerze
Kolor linków po najechaniu 
Ikonki z Font Awesome 

Jak wyszukać numerków ikonek Font Awesome?


Przechodzimy na tę stronę - KLIK
Wyszukujemy ikonkę, jaką chcemy użyć


Po wyszukaniu, klikamy na daną ikonkę - przeniesie nas na podstronę. Na dole pod ikonką będziemy mieli numerek.


Czytaj dalej »

MałgoLINKI - podsumowanie stycznia

3 lutego 2017


Dawno nie było żadnego podsumowania, ale ostatnio naprawdę nie mam czasu na przejrzenie porządnie sieci. Styczeń był pod tym względem zdecydowanie lepszy.
Trochę mi się ten miesiąc dłużył i muszę powiedzieć, że czekałam na to, aż w końcu się skończy, nie mówię, że był zły - był bardzo dobry i muszę Wam powiedzieć, że dzięki temu czuję, że ten rok będzie naprawdę dobrym rokiem :)


  1. Były już darmowe banki zdjęć, to teraz pora na darmowe banki z...filmikami! W którymś podsumowaniu (już nawet nie pamiętam którym - przyznaje się bez bicia), wspomniałam tam o banku zdjęć Pexels, to teraz polecam wam ich bank Pexels videos
  2. Chcecie stworzyć swój unikalny pattern? Ta strona Wam to zapewni.
  3. Wacom spełnił moje marzenie...nie tak do końca, bo nie mam tego jeszcze u siebie, ale grunt, że jest już dostępne na rynku, a ja zaczynam już zbierać na to moje marzenie. Mowa tutaj o inteligentnym notatniku. Więcej informacji, znajdziecie TUTAJ
  4. Jeśli lubicie oglądać fantastyczne prace, to te od Natalie Shau Was naprawdę zachwycą.

Popularne wpisy na blogu w styczniu 



No cóż, w styczniu statystyki marne, w grudniu było jeszcze gorzej, a w tym miesiącu mam zamiar sobie to odbić - zobaczymy jak mi to wyjdzie :) 
Czytaj dalej »