Menu

Jak zrobić napis z obrazu na obrazie - Photoshop


Ten temat był już poruszany na blogu, ale dotyczył on programu GIMP. Teraz pokażę Wam jak zrobić ten sam efekt w Photoshopie. Jednak jeśli bardziej interesuje Was instrukcja w GIMPie, to link do niej macie poniżej.

Przejdź do wpisu z instrukcją w GIMPie

1. Odpalamy Photoshopa
2. Otwieramy wybrane zdjęcie za pomocą plik-otwórz lub przy użyciu skrótu klawiszowego ctrl+O (PC)/cmd+O (MAC).
3. Tworzymy nową warstwę i wypełniamy ją białym kolorem





















4. Zmniejszamy krycie białej warstwy - wartość dowolna






















5. Dodajemy napis


6. Klikamy prawym przyciskiem myszki i wybieramy "rasteryzuj tekst"


7. Teraz musimy zaznaczyć nasz tekst, wybieramy: zaznacz - wczytaj zaznaczenie (oczywiście cały czas musimy być na warstwie z tekstem)

8. Przechodzimy do warstwy z tekstem i klikamy delete, aby pozbyć się zaznaczenia klikamy ctrl+D (PC)/cmd+D (MAC)

9. Efekt:


Czytaj dalej

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

Illustrator

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


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


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
Subskrybuj: Posty (Atom)

Copyright © Twórczy notatnik