Szablon Forest na Bloggera do pobrania za darmo

Szablon Forest na Bloggera do pobrania za darmo


Szablon Forest, jest to darmowy szablon na Bloggera w odcieniach zieleni. Przypadnie do gustu każdemu, kto ceni sobie najprostsze rozwiązania i ładny wygląd szablonu. Szablon można dostosować bez problemu do swoich potrzeb. Zmienić tło, kolory, fonty etc.


Info o szablonie


  • Szablon nie zawiera automatycznego skracania wpisów
  • W szablonie jest funkcja automatycznego dopasowania zdjęć we wpisie oraz w kolumnie bocznej w gadżecie "o mnie".
  • Menu to standardowe strony Bloggera
  • Można zmieniać kolory, fonty, dodawać i usuwać nowe strony w menu
  • Ikony udostępniania wpisu
  • Dodana instrukcja 

Uwagi

  • Szablon oraz grafiki dodawane do szablonu są tylko i wyłącznie na użytek własny. 
  • Udostępnianie szablonu osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione.
  • Szablon posiada nieusuwalną stopkę z podpisem autora. Po usunięciu jej, szablon nie będzie poprawnie działał 
  • Nie wolno modyfikować wyglądu stopki tzn. zmieniać jej koloru tak, aby nie była widoczna i podpisywać się pod szablonem jako autor 
  • W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com
  • Nie proś osób trzecich o pomoc przy szablonie w razie powstania problemu - istnieje ryzyko, że dana osoba źle podejdzie do Waszego problemu, a wtedy szablon może zostać uszkodzony lub całkowicie zniknąć z bloga. Pamiętaj! Zawsze zwracaj się z prośbą o pomoc do autora szablonu 

To może Ci się przydać







Chcesz indywidualny szablon?


Zawsze możesz zamówić szablon, jeśli te, które udostępniam do pobrania Ci nie odpowiadają. Wystarczy, że zajrzysz na stronę.

Możesz również wziąć udział w losowaniu, w którym do wygrania jest metamorfoza szablonu - zajrzyj tutaj.

Zobacz jak wygląda szablon Pobierz szablon
Czytaj dalej

5 zimowych tapet do pobrania za darmo

5 zimowych tapet do pobrania za darmo


Trochę późno, trochę miało to inaczej być, ale są! 5 zimowych tapet do pobrania za darmo. W trochę innym stylu niż zazwyczaj takie tapety są, bo nie będzie tutaj nic niebieskiego, białego, zielonego. Bombek, choinek również nie zobaczycie, ale mam nadzieję, że przypadną Wam do gustu :)


Tapeta Winter!




1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080


Tapeta Winter! na telefon



Pobierz tapetę na telefon


Tapeta Let it snow!


1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080

Tapeta na telefon Let it snow!



Pobierz tapetę na telefon

Tapeta Śnieżynka



1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080

Tapeta na telefon Śnieżynka




Pobierz tapetę na telefon

Tapeta Let it snow! - napis



1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080


Tapeta Let it snow! - napis na telefon



Pobierz tapetę na telefon

Tapeta Winter! - napis



1024x768 1280x800 1280x1024 1366x768 1440x900 1600x900 1920x1080


Tapeta Winter! - napis na telefon



Pobierz tapetę na telefon
Czytaj dalej

Wypełnienie tekstu tłem w Photoshopie

Wypełnienie tekstu tłem w Photoshopie


Pewnie niektórym z Was mówi już coś ten tytuł, bo podobna instrukcja już się na blogu pojawiła (na marginesie jako jedna z pierwszych instrukcji graficznych), ale była ona wykonana w GIMPie. Dziś pokażę Wam jak zrobić to samo, ale w Photoshopie.

Przejdź do wpisu z instrukcją w GIMPie

1. Tworzymy nowy plik (ctrl + n (PC) lub cmd + n (MAC), plik - nowy), ustalamy dowolny rozmiar i wpisujemy nasz tekst. 
































2. Otwórz teksturę do wypełnienia tekstu - ctrl+o (PC) lub cmd + o (MAC), plik - otwórz.  Tekstura otworzy nam się w nowej karcie, więc musimy wybrać narzędzie zaznaczenia, zaznaczyć teksturę i za pomocą skrótów klawiszowych ctrl+c, ctrl+v (PC), cmd+c, cmd+v (MAC) - kopiuj, wklej. Wkleić w podstronę z naszym napisem.

































3. Wypełnienie tekstu tłem możemy zrobić na dwa sposoby. Klikamy w oknie warstw tryby i zmieniamy ze zwykłego na jasny lub wybieramy skrót klawiszowy alt+ctrl+g (PC), alt+cmd+g (MAC), drugi sposób można zrobić również inaczej. Rozwijamy listę opcji w oknie warstw i wybieramy "utwórz maskę przycinającą".

Pierwszy sposób 





Drugi sposób 





Efekt: 




Czytaj dalej

Prosty CSS - dwa style dla dat

Prosty CSS - dwa style dla dat


W dzisiejszym wpisie pokażę Wam, jak w prosty sposób za pomocą CSS zmienić wygląd daty wpisu. Pokażę Wam dwa style, które są proste i idealnie wpasują się w każdy szablon.

Styl pierwszy


.date-header span {
background-color: #fff;
letter-spacing: 2px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
top: -8px;
}
h2.date-header {
border-top: 1px solid #999;
font: 10px Open Sans;
letter-spacing: 2px;
text-align: center;
}

Analiza kodu 

Tło daty
Odstępy między literami 
Marginesy wewnętrzne 
Styl tekstu (ustawiony na drukowane litery, wpisując none, pozbywamy się tego efektu)
Położenie daty (góra, dół) 
Grubość, rodzaj i kolor podkreślenia 
Rodzaj i wielkość fontu 
Odstęp między literami
Położenie daty

Styl drugi 



.date-header span {
background-color: #fff;
border: 1px solid #999;
letter-spacing: 2px;
padding: 10px 10px;
position: relative;
text-transform: uppercase;
top: -7px;
}
h2.date-header {
background: none repeat scroll 0 0 #999;
height: 1px;
font: 10px Open Sans;
text-align: center;
}

Analiza kodu 

Kolor tła
Grubość, rodzaj, kolor obramowania daty
Odstęp pomiędzy literami
Marginesy wewnętrzne 
Styl tekstu 
Położenie daty (góra, dół)
Kolor linii 
Grubość linii
Wielkość i rodzaj fontu 
Położenie daty

Wszystkie pogrubione i kolorowe wartości są zmienne.
Czytaj dalej

Jak usunąć "strona główna" z pagera bloga

Jak usunąć "strona główna" z pagera bloga

Jak usunąć przycisk strona główna z pagera bloga


W tym wpisie, pokażę Ci, jak łatwo można pozbyć się z naszego pagera na blogu, przycisku "strona główna" i zostawiając tylko "starsze posty" oraz "nowsze posty".
Niestety, muszę zmartwić tych, co nie lubią grzebania w kodzie - będzie trzeba troszkę pogrzebać, ale jeśli zrobicie wszystko dokładnie tak jak jest napisane, to nie ma się o co martwić :)

1. Szablon - edytuj kod HTML. Klikamy obojętnie jakie miejsce w kodzie i wybieramy ctrl+f i w okienko które nam się pojawiło wpisujemy  <div class='blog-pager' id='blog-pager'> i klikamy enter. Jest takich kodów 2 w szablonie i oba będą nas interesować.

2. Kiedy już wyszukamy daną frazę, musimy usunąć tą część kodu, która jest zaznaczona poniżej na zdjęciu:



Zapisujemy szablon.

Czytaj dalej

Jak zrobić efekt bokeh w photoshopie

Jak zrobić efekt bokeh w photoshopie


To jest kolejny tutorial na podstawie tych, które zostały wykonane w GIMPie. Dzisiaj omówimy sobie, jak wykonać efekt bokeh, który można wykorzystać na wiele sposobów.

Przejdź do wpisu z instrukcją w GIMPie

Uwaga! Jeśli chcecie robić efekt bokeh na zdjęciu, to pędzel nie musi mieć koniecznie koloru białego oraz omijacie wszystkie punkty zamieszczone poniżej (zaczynajcie od razu od pędzla)!

1. Na początku musimy stworzyć nowy plik. W tym celu wybieramy CTRL+N (PC) lub CMD+N (MAC). Wielkość pliku dowolna.

2. Wybieramy "wiadro z farbą" i wypełniamy nasz plik czarnym kolorem.

3. Ustawienia

4. Ustawienia 


5. Teraz wybieramy Filtr - Rozmycie - Rozmycie gaussowskie. Pojawi Wam się kolejne okienko, w którym ustawiamy promień na 40 i klikamy ok. 



6. Powtarzamy kroki z poprzednich punktów, czyli tworzymy nową warstwę, malujemy pędzlem kropki, ale tym razem krycie kropek zmienimy na 45, a rozmycie gaussowskie ustawiamy na 10.

7. Robimy to samo co opisałam w punkcie 6, z tą różnicą, że krycie naszych kropek musimy ustawić na 60, a rozmycie gaussowskie na 1. 

8. Znowu tworzymy nową warstwę. Wybieramy gradient, zmienimy na tęczowy i rozciągamy, zmienimy krycie według uznania. Jeśli robimy efekt bokeh na zdjęcie, wystarczy ominąć ten krok. 


Efekt końcowy: 


Zdjęcie


Tapeta


Czytaj dalej

Jak zrobić automatyczne skracanie wpisów na Bloggerze

Jak zrobić automatyczne skracanie wpisów na Bloggerze

Podsumowania października nie będzie, bo najzwyczajniej w świecie nie miałam nawet czasu na buszowanie po sieci, więc byłoby nie fair, jakbym je zrobiła. Postanowiłam, że zamiast podsumowania podrzucę Wam instrukcję na to, jak zrobić automatyczne skracanie wpisów (czytaj więcej), dzięki tej instrukcji będziemy mogli stworzyć układ kafelkowy taki, jak jest w szablonach Black and White oraz Ms. mint brown. Uprzedzam - tak, trzeba będzie grzebać w kodzie, ale myślę, że każdy sobie z tym poradzi :)

1. Przechodzimy do szablon - edytuj kod HTML (dla starszej wersji wyglądu "zaplecza") dla nowszej wersji grafika poniżej: 



2. Klikamy obojętnie w jakie miejsce w kodzie i w okienko, które nam się pojawi wpisujemy <data:post.body/> i za pomocą klawisza "enter" wyszukujemy. W kodzie szablonu jest ich trzy. My musimy się skupić na 2 i 3.



3. Tą część kodu, która została podświetlona na żółto, usuwamy, a zamiast niej wklejamy poniższy kod (w dwóch miejscach czyli przy 2 i 3 wyszukanym):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Czytaj dalej &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Teraz wyszukujemy </head> i NAD </head> wklejamy:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Analiza:


posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;

Ilość znaków po skróceniu wpisu bez zdjęcia
Ilość znaków po skróceniu wpisu ze zdjęciem
Wysokość zdjęcia
Szerokość zdjęcia 

Wartości pogrubione i kolorowe można zmieniać.

5. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS, aby wkleić styl CSS dla naszego przycisku "czytaj więcej".
6. Wklejamy kod:

.readmore a, #blog-pager-post a {
background: #ec95a8;
color: #fff;
text-transform: uppercase;
font-family: Open Sans Condensed;
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
padding: 10px 343px;
display: block;
max-width: 500px;
margin: 10px auto;
}
.readmore a:hover, #blog-pager-post a:hover {
background: #efd6d2;color: #fff;
text-transform: uppercase;
font-family: Open Sans Condensed;
font-weight: 700;font-size: 20px;
letter-spacing: 2px;
padding: 10px 343px;
display: block;
max-width: 500px;
margin: 10px auto;
}

Analiza

Wszystkie wartości kolorowe i pogrubione są zmienne.

Tło przycisku przed najechaniem myszką 
Tło przycisku po najechaniu myszką 
Kolor tekstu przed najechaniem myszką 
Kolor tekstu po najechaniu myszką 
Styl tekstu (w tym kodzie jest on ustawiony tak, aby litery były tylko wielkie, aby wyłączyć tą opcje wystarczy usunąć uppercase i wpisać none)
Rodzaj fontu
Pogrubienie fontu 
Wielkość fontu 
Odstęp między literami
Marginesy wewnętrzne
Czytaj dalej

Zrób ze mną szablon na bloga część 2

Zrób ze mną szablon na bloga część 2


Zobacz pierwszą część

Pierwsza część tego wpisu przyjęła się bardzo dobrze, więc postanowiłam zrobić część drugą. Ta część od pierwsze będzie różniła się tym, że zrobimy sobie jeden szablon, a nie dwa. Na czym polega ta seria wpisów? Podaje Wam kody na zrobienie danego szablonu. Tak, podaje Wam najzwyczajniej w świecie gotowce. Dlaczego nie udostępniam tych szablonów do pobrania za darmo? Bo mimo wszystko jest to forma nauki, poznaje się kody, które dla niektórych mogły być nieznane i jednocześnie można je od razu zmodyfikować pod siebie, bez szukania CSSa w kodzie szablonu, tak jak to jest w przypadku szablonów do pobrania. Zaczynamy!

1. Na początek jako naszą bazę wybieramy sobie szablon Simple (prosty) biały. Od razu mówię, że od góry zakładam, że zdjęcia do wpisów będziemy wstawiać w oryginalnym rozmiarze. Na początek, mniej więcej nasz szablon będzie prezentował się tak:

1. Przechodzimy do układu - pasek nawigacyjny - edytuj - wyłączone - zapisz


2. Wracamy do szablon - układ - wybieramy sobie układ prawo lub lewo kolumnowy i rodzaj stopki. U mnie to wygląda tak: 


3. Teraz musimy ustawić sobie szerokość naszego bloga. Przechodzimy więc do "Dostosuj ustawienia szerokości". Ja ustawiłam najbardziej optymalną czyli cały blog 1240px a kolumna boczna 330px 

4. Wracamy do zaawansowane - dodaj arkusz CSS i wklejamy kody.
Pierwszy kod, jest na dopasowanie zdjęć do szpalty, bez ruszenia mniejszych zdjęć. Małe zdjęcia pozostaną małe.


.post-body img {
  max-width:100%;
  height: auto;}
.post-body .tr-caption-container {
   padding: 0;}
.post-body .tr-caption-container img {
   max-width: 100%;
   height: auto;
   margin-left: 0;
   padding: 0;
   display: block;
}

Teraz, dodajemy kod na usunięcie ramek i cienia zdjęć we wpisie, które w szablonie Simple są narzucane odgórnie.

.post-body img {border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding: 0px !important;
background: none !important;
}

Teraz zajmiemy się naszymi stronami. Przechodzimy do "tło kart" i zaznaczamy wszystko na przezroczyste. Następnie przechodzimy do "akcenty" i tam również wszystko zaznaczamy na przezroczyste. Przechodzimy do arkusza CSS i wklejamy tam taki kod: 

#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}
#PageList1  {border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
letter-spacing: 2px;
text-transform: uppercase;}

Oczywiście kolor i rodzaj fontu (czcionki) ustawiamy w zakładce "tekst kart". U mnie w menu, font to Times New Roman. 

Przechodzimy dalej. Teraz zajmiemy się wpisami. Tutaj pracujemy głównie w CSSie. Dodajemy kod:

.column-center-inner {text-align: justify;}
.post {font-family: Open Sans;
color: #444;
font-size: 12px;}
h3.post-title {text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Times New Roman;
font-size: 18px;}
h3.post-title a {
color: #000;}
h3.post-title a:hover {
color: #76a5af;}

Przechodzimy do "nagłówek z datą". Tam zmieniamy kolor tła na przezroczyste, a kolor tekstu na czarny, ciemno szary czy jaki tam chcecie. Odznaczamy pogrubienie. Wracamy do CSSa i dodajemy kod:

h2.date-header {text-align: center;
font-family: Times New Roman;
font-size: 10px;}

Przechodzimy do "stopka posta" i kolor tekstu zmieniamy na dowolny kolor, a kolor tła i cienia na przezroczyste. Przechodzimy do CSSa i dodajemy kod:
.post-footer { text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Open Sans;
font-size: 8px;
border-bottom: 1px solid #ddd;
padding: 10px;} 

Przy okazji dodajemy efekt dla cytatów: 

.post blockquote {
margin: 1em 20px;
}
.post-body blockquote {
line-height:21px;
background: #fff;
border: 1px solid #dadada;
padding:10px;
}

Oraz pozbywamy się tego co nam przeszkadza. Czyli kropek w pagerze bloga, "Subskrybuj: Posty (Atom)", "Technologia Blogger" i przerywanej linii w stopce bloga. 

#blog-pager {background: transparent;}
.Attribution, .feed-links {display: none;}
.footer-outer {border: 1px solid transparent;}

Skoro już jesteśmy na dole naszego bloga, to dostosujemy sobie nasz Pager, wklejając kod: 

#blog-pager a{display: inline-block;  
color: #888;  
letter-spacing: 2px;  
text-transform: uppercase;  
font-size: 10px;  
border: 1px solid #e5e5e5;  
padding: 13px 15px;  
font-weight: 700;
background-color:#ffffff;}

Skoro już mamy wszystko ogarnięte, to została nam kolumna boczna, a właściwie tytuły gadżetów. Tutaj również robimy wszystko za pomocą CSSa. Dodajemy kod: 

.sidebar .widget h2, #Followers1 h2 {font-family: Times New Roman;
font-size: 15px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #000;
padding: 2px;}

Pewnie zastanawiacie się, czemu zostało dopisane #Followers1 h2 - ten selektor odpowiada za nagłówek obserwatorów. Do niektórych gadżetów, trzeba dopisać selektor po przecinku, tak jak w kodzie powyżej np. #Text1 h2 - selektor dla tytułu gadżetu "Tekst". 

Następnie dodajemy kod, na wyśrodkowanie nagłówka:

.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

Zapisujemy szablon. Przedstawiłam Wam ogólny zarys szablonu jaki możecie zrobić. Poniżej są linki do wpisów z których możecie skorzystać przy dalszej modyfikacji. Nie wstawiłam ich tutaj, ponieważ nie chce powielać tego co już jest na blogu :)



Czytaj dalej

Jak zrobić chowane-rozwijane archiwum na Bloggerze

Jak zrobić chowane-rozwijane archiwum na Bloggerze


W dzisiejszym wpisie mam dla Was kolejną instrukcję, która nie wymaga grzebania w kodzie HTML. Jest to kolejna krótka instrukcja, która pozwoli nam zmodyfikować wygląd naszego archiwum.

1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:
#ArchiveList ul > li > a.post-count-link {
    font-size: 15px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 34px;
    background-color: #eee;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#ArchiveList ul ul li  a.post-count-link{
    font-size: 15px;
letter-spacing: 2px;
    width: auto;
    margin: 0 5px 0;
    padding: 10px 2px;
    line-height: 1;
background: transparent;
    text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 10px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

1A. Analiza kodu:

#ArchiveList ul > li > a.post-count-link {
    font-size: 15px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 34px;
    background-color: #eee;
    box-sizing: border-box;
    letter-spacing: 1px;
}

#ArchiveList ul ul li  a.post-count-link{
    font-size: 15px;
letter-spacing: 2px;
    width: auto;
    margin: 0 5px 0;
    padding: 10px 2px;
    line-height: 1;
background: transparent;
    text-transform: uppercase;
color: #444;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 10px !important;
    text-transform: none;
}

#ArchiveList ul {
    margin: 0 0 2px !important;
}

span.post-count {
display: none;
}

Nagłówek z datą 

  • Wielkość fontu 
  • Tło nagłówka 
  • Odstęp między literami/cyframi
Nagłówki - miesiące
  • Wielkość fontu 
  • Kolor 
Efekt: 



Czytaj dalej

Nietypowy avatar w Photoshopie na dwa sposoby (wypełnianie grafiki nietypowym tłem)

Nietypowy avatar w Photoshopie na dwa sposoby (wypełnianie grafiki nietypowym tłem)


Już kiedyś na blogu był podobny wpis, ale robiliśmy to w GIMPie. Postanowiłam odtworzyć to samo w Photoshopie. Da się to zrobić na dwa sposoby, tak samo łatwo i szybko jak w GIMPie, także nie ma co się obawiać. Ten trik możemy wykorzystać na różne sposoby, nie tylko do tworzenia avatarów, ale również możemy to wykorzystać do tworzenia ciekawych nagłówków czy banerów.

Pamiętaj! Będziemy posługiwali się skrótami klawiszowymi - CTRL - dla PC, CMD - dla MAC

CTRL/CMD+N - nowy plik
CTRL/CMD+O - otwórz
CTRL/CMD+C - kopiuj
CTRL/CMD+V - wklej
CTRL/CMD+A - zaznacz wszystko
CTRL/CMD+T - kontrolki przekształceń

Przejdź do wpisu z instrukcją w GIMPie

1. Otwieramy Photoshopa i wybieramy ctrl+n (nowy plik) (PC) lub cmd+n (MAC), ustalamy sobie własną wielkość.


2. Otwieramy okno z warstwami


Sposób pierwszy 


3. Wybieramy tworzenie kształtów lub wrzucamy nową grafikę (ctrl+o - otworzy nam się folder aby wybrać grafikę). Następnie wybieramy znowu ctrl+o i wybieramy nasze zdjęcie, później, zaznaczmy nasze zdjęcie (ctrl+a)  i wybieramy ctrl+c, przechodzimy do zakładki z naszym pustym plikiem lub z wrzuconą grafiką i wybieramy ctrl+v.






4. Klikamy w warstwach na nasze zdjęcie i wybieramy ctrl+t - włączą nam się kontrolki przekształceń, dzięki którym będziemy mogli dopasować nasze zdjęcie do danego elementu.


5. Z listy wybieramy "utwórz maskę przycinającą"


Efekt:

Sposób drugi 


6. Powtarzamy wszystko z punktu 3. Ustawiamy warstwę ze zdjęciem nad kształtem lub daną grafiką i z listy trybów wybieramy "jaśniej". Zdjęcie dopasowujemy tak samo jak robiliśmy to w punkcie 4.



Trzeba brać pod uwagę to, że w tym wypadku, dany kształt doda nam coś w rodzaju filtru na zdjęciu.
Efekt:




Czytaj dalej

Copyright © Twórczy notatnik