Jak zrobić napis na łuku w Photoshopie

21.11.2016


Dla niektórych może wydać się to banalne, ale dla innych nie, co świadczy o tym fakt, że ostatnio dostałam parę pytań o to, jak zrobić tekst zawijany czyli inaczej pisany na łuku. Dla ciekawskich - podobny wpis, był już na blogu, ale dotyczył on programu GIMP.

Chce zapoznać się z instrukcją w GIMPie

1. Otwieramy Photoshopa, wybieramy CTRL+N lub CMD+N (MAC) - tworzymy nowy plik. Obojętnie jakiej wielkości - to zależy tylko od nas, ja mam format pliku A4.

2. Wybieramy narzędzie "Tekst", tworzymy nasze pole do wpisywania tekstu i wpisujemy nasz tekst.



3. Jak widzicie na powyższych zdjęciach, górna belka różni się w zależności od tego czy pole tekstowe jest aktywne czy nie, jeśli chcemy umieścić nasz tekst na łuku, musimy na niego kliknąć (oczywiście cały czas będąc na narzędziu tekst).


4 . Z górnej belki, wybieramy "utwórz zawinięty tekst". Jak możemy zauważyć, pojawiła nam się ramka, w której możemy wybrać styl i pobawić się suwaczkami. W tej instrukcji, mówimy o napisie na łuku, więc będą nas interesowały style "łuk", oczywiście możecie spróbować również i innych stylów.

5. Efekt


Czytaj dalej »

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

16.11.2016


Jeśli znudził Ci się tradycyjny pager bloga, to ten wpis jest dla Ciebie. Pokaże Ci, jak łatwo można pozbyć się z naszego pagera na blogu "strony głównej" i zostawiając tylko "starsze posty" oraz "nowsze posty". Niewątpliwie taka modyfikacja sprawi, że nasz pager będzie wyglądał nowocześnie.
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.

3. Efekt przed i po


Czytaj dalej »

Jak zrobić efekt bokeh w photoshopie

12.11.2016


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

06.11.2016

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
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 »

Copyright © Szablon wykonany przez Blonparia