Selektory CSS

31.12.2014


Napisałam dla Was już parę instrukcji, ale zdałam sobie sprawę, że nie przedstawiłam Wam najbardziej podstawowej rzeczy - selektorów CSS, które jakby nie patrzeć są potrzebne przy jakichkolwiek zmianach. Dlatego dziś przedstawię Wam listę tych selektorów.
Ostatnio dostałam kilka maili od osób z pytaniami "Jaki jest kod na wyśrodkowanie nagłówka" "Jak zmienić nagłówki gadżetów" i jeszcze wiele wiele więcej. Selektory pomogą Wam w otrzymaniu odpowiedzi na dane pytanie.

Selektory ogólne

body - odpowiada za cały blog,dzięki temu selektorowi możemy ustawić np. ramkę lub tło dla całego bloga przykład 1,przykład 2
.content-outer - dzięki temu selektorowi, możemy utworzyć np. obramowanie lub cień. Obejmuje to obszary - nagłówka, postów, kolumny bocznej, pagera. Przykład 1, przykład 2.
 #Blog1 - odpowiada za obszar całego postu wraz z jego datą i pagerem bloga,dzięki niemu możemy ustawić np tło dla obszaru wpisu i pagera.
.Attribution - podpis w stopce bloga czyli miejsce gdzie jest napis Technologia Blogger
.navbar - pasek nawigacyjny na górze bloga
.cookie-choices-info - ramka z informacją o ciasteczkach
.cookie-choices-info .cookie-choices-text - tekst (informacja o ciasteczkach)
.cookie-choices-info .cookie-choices-button - przyciski w informacji o ciasteczkach
a:hover - wszystkie linki po najechaniu na nie myszką
.feed-links - napis Subskrybuj: Posty (Atom)

Nagłówek

.header - nagłówek bloga
.Header h1 - tytuł bloga
.Header .description - opis bloga, pod nagłówkiem

Posty

.post-outer - odpowiada tylko za obszar postu,bez daty i pagera.
.date-outer - odpowiada za obszar całego postu wraz z datą bez pagera,dzięki niemu możemy ustawić np. tło dla obszaru wpisu.
.date-header  lub h2.date-header - cały obszar nagłówka z datą (na całą długość posta)
.date-header span - tylko nagłówek z datą
.post-footer - stopka postu
h3.post-title - cały obszar tytułu posta (na całą długość)
h3.post-title a - tylko obszar tytułu posta
h3.post-title a:hover - tytuł posta po najechaniu na niego myszką
.post-author - autor w stopce posta
.comment-link - komentarze w stopce posta
.post-footer-line-2 - etykiety w stopce posta
.post-body  - obszar samego wpisu bez daty i tytułu posta
.post-body img  - wszystkie zdjęcia umieszczone w poście
.jump-link - przycisk czytaj więcej w poście
.jump-link:hover - przycisk czytaj więcej w poście po najechaniu na niego myszką
.post blockquote - cytaty w poście
.column-center-inner - odpowiada za obszar postu wraz z datą, stopką posta oraz pagerem.

Komentarze

.comment-header - nagłówek komentarzy z nazwą komentującego,datą i godziną. Przykład możecie zobaczyć u mnie na blogu
.comments h4 - nagłówek komentarzy nad wszystkimi dodanymi komentarzami pod postem.
.comment p  - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem.
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzem po najechaniu na nie myszką.
.avatar-image-container - avatary obok komentarzy

Kolumna boczna

.column-right-inner - odpowiada za obszar całej prawej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny lub tła
.column-left-inner - odpowiada za obszar całej lewej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny,tła lub wielkości czcionki.
.column-right-inner .widget - dotyczy wszystkich gadżetów w prawej kolumnie
.column-left-inner .widget - dotyczy wszystkich gadżetów w lewej kolumnie

Gadżety

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych
.widget h2 - odpowiada za wszystkie nagłówki gadżetów wraz z datą
.main-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych oraz za nagłówek z datą
#Label1  - cały obszar etykiet wraz z tytułem gadżetu.
.label-size a - tylko etykiety
#Label1 h2 - nagłówek gadżetu etykiety
#Label1 a:hover - linki etykiet po najechaniu na nie myszką
#BlogArchive1 - gadżet archiwum
#BlogArchive1 h2 - Nagłówek gadżetu archiwum
#BlogArchive1 a - linki w archiwum
#BlogArchive a:hover - linki archiwum po najechaniu na nie myszką
#ArchiveList  - sam lista archiwum bez nagłówka gadżetu
#Stats1  - gadżet statystyki
#Stats1 h2  - Nagłówek gadżetu statystyki
#Text1 - cały gadżet z tekstem,liczba 1 jest zmienna zależy od tego jaki nasz gadżet Tekst ma numerek,żeby to sprawdzić wystarczy wejść w układ-otworzyć nasz gadżet z Tekst i na górze przewinąć link do samego końca tam nam się pojawi jaki numer ma nasz gadżet.
#Image1 - cały gadżet z obrazkami na blogu,tutaj również liczba jest zmienna jak w przypadku gadżetu tekst i tak samo się to sprawdza.
#FollowByEmail1 - cały gadżet obserwuj przez e-mail
#HTML1 - cały gadżet HTML/JavaScript,tutaj również liczba jest zmienna jak w przypadku zdjęć i tesktu.
#Followers1 - cały gadżet z obserwatorami bloga
.popular-posts - cały gadżet popularnych postów
.popular-posts  .item-thumbnail img  - miniaturka popularnych postów
#BlogArchive1_ArchiveMenu - archiwum, styl menu
.FollowByEmail .follow-by-email-inner - gadżet obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-address - pole do wpisywania adresu w gadżecie obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-submit - przycisk do subskrypcji w gadżecie obserwuj przez e-mail

Strony/menu

.tabs-outer lub .tabs-inner - pasek stron
.tabs-inner .widget li a - same strony
.tabs-inner .widget li.selected a - aktywna strona tzn. strona na której obecnie się znajdujemy
.tabs-inner .widget li a:hover - strony po najechaniu myszką
#PageList1 - cały gadżet ze stronami
#PageList1 a - same strony
#PageList1 a:hover  - strony po najechaniu myszką

Stopka bloga/pager bloga

.footer-outer - stopka bloga
.footer-outer h2 - nagłówki gadżetów w stopce bloga
.blog-pager  - cały obszar pagera bloga (starsze,nowsze posty)
.blog-pager a - tylko obszar przycisków starsze,nowsze posty i strona główna
.blog-pager a:hover  - przyciski starsze,nowsze posty i strona główna po najechaniu na nie myszką
a.home-link - przycisk strona główna w pagerze bloga
a.home-link:hover - przycisk strona główna w pagerze bloga po najechaniu myszką
a.blog-pager-older-link - przycisk starsze posty
a.blog-pager-older-link:hover - przycisk starsze posty po najechaniu myszką
a.blog-pager-newer-link  - przycisk nowsze posty
a.blog-pager-newer-link:hover - przycisk nowsze posty po najechaniu myszką
Czytaj dalej »

Jak wykonać aktywny przycisk czytaj więcej + odpowiedzi na pytania

16.12.2014

Tak naprawdę jest to bardzo proste do zrobienia i wielkiej filozofii w tym nie ma. Taki aktywny buton "czytaj więcej" możemy wykonać za pomocą kodów CSS. Pokażę wam dwa kody i różne opcje jak taki buton można dostosować do własnych potrzeb.
Pierwsze co należy zrobić aby taki buton posiadać to oczywiście zastosować na swoim blogu zwijanie tekstu. Taką możliwość mamy podczas tworzenia postu. Opcja ta znajduje się obok ikonki,która umożliwia nam wstawianie filmów.



Trzeba pamiętać aby kliknąć w tą ikonkę po fragmencie tekstu,który ma się wyświetlać jako nasz wstęp,oczywiście można tą opcje zastosować po głównym zdjęciu,które wstawiliśmy na początku wtedy pojawiać nam się będzie tylko pierwsze zdjęcie i buton,który zaprowadzi nas do wpisu.

Jak widać po wybraniu opcji zwijania tekstu pojawia nam się szara kreska,która pokazuje nam,w którym miejscu oddzieliliśmy nasz tekst i która jego część będzie widniała na stronie głównej.
Nasz buton obecnie jest mały i słabo widoczny,ale dzięki temu tutorialowi zmienimy to. Zaczynamy.

Jeśli nie chcesz posiadać aktywnego butony (który się zmienia po najechaniu myszką) omiń punkt II.

I. Najpierw zajmiemy się kodem,który odpowiada za wygląd "czytaj więcej" przed najechaniem na niego myszką.

1. Nasz buton znajduje się obecnie po lewej stronie,ale co zrobić aby znajdował się po środku lub po prawej stronie? Należy wpisać ten kod:

.jump-link a, #blog-pager-post a {text-align: center; } lub .jump-link a, #blog-pager-post a {text-align: right; }

Nasz odnośnik do wpisu został ustawiony.

2. W tym punkcie zmienimy wielkość i rodzaj czcionki "czytaj więcej" za pomocą tego kodu:

.jump-link a, #blog-pager-post a {font: normal 30px Times New Roman;} 

 pogrubienie to są wartości zmienne,pierwsza to wielkość czcionki,a druga to rodzaj,można się tu pobawić i dopasować wedle uznania.

3. Teraz dodajmy "efekty specjalne" takie jak: tło,marginesy,zaokrąglenia,ramka,kolor linku.

A. Kod odpowiadający za tło naszego butonu: (pamiętamy o tym,że wartości pogrubione to wartości zmienne)

.jump-link a, #blog-pager-post a {background-color: #f8ecf3;} 
lub
.jump-link a, #blog-pager-post a {background-image: url(adres do obrazka);}

B. Marginesy:

.jump-link a, #blog-pager-post a {margin: 0px 265px 0px 265px;}

Pierwsza wartość to margines górny,odpowiada on za odległość między tekstem/zdjęciem,a buttonem.
Druga wartość to margines prawy,dzięki niemu możemy ustawić długość naszego butonu.
Trzecia wartość to margines dolny,odpowiada za odległość między tym co znajduje się pod butonem.
Czwarta wartość to margines lewy i ma takie samo zastosowanie jak margines prawy

C. Zaokrąglenia:

.jump-link a, #blog-pager-post a {border-radius: 10px 10px 10px 10px;}

Pierwsza wartość odpowiada za górny lewy róg
Druga wartość odpowiada za górny prawy róg
Trzecia wartość odpowiada za dolny prawy róg
Czwarta wartość odpowiada za dolny lewy róg

D. Ramka:
Rodzaje ramek: solid - linia ciągła, double - linia podwójna, dashed- linia kreskowana, dotted - linia kropkowana 

.jump-link a, #blog-pager-post a {border-style: solid;}

Grubość ramki:

.jump-link a, #blog-pager-post a {border-width: 1px;}

Kolor ramki:

.jump-link a, #blog-pager-post a {border-color: #cccccc;}

E. Kolor linku:
Aby kolor linku zmieniał nam się po najechaniu wystarczy w projektancie szablonów wejść w zakładkę linki.


Ważne jest aby kolor linku był inny od koloru linku po wskazaniu kursorem.

II. Aktywna części butonu.

Kody wyglądają tak samo jedyne co musimy dodać przed .jump-link, #blog-pager-post a to :hover,czyli ma to wyglądać tak:

.jump-link a:hover, #blog-pager-post a:hover

Po tym możemy wpisywać wszystkie te opcje co podane w punkcie 3. Pamiętaj jednak,że aby efekt był zamierzony to musisz pozmieniać niektóre wartości,aby różniły się wyglądem od butonu przed najechaniem na niego myszką.
Co możesz zmieniać? kolor tła,ramki,kolor ramek i ich grubość oraz zaokrąglenia.


Teraz nadszedł czas pytań i odpowiedzi. 
Monika z bloga classic&red nominowała mnie do  Liebster Blog Award 2014 i moim zadaniem jest odpowiedzieć publicznie na zadane przez nią pytania,które umieściła na swoim blogu i nominować kolejne osoby. Nominować nikogo nie będę,bo zupełnie nie mam pomysłu na pytania. 

1. W jaki sposób najchętniej wypoczywasz? 
- Najchętniej wypoczywam w stajni,spędzam tam każdą wolną chwilę.
2. Wymarzone miejsce na wakacje? 
- Raczej trzymam się zasady,że nie ważne gdzie,ważne z kim. Jak ma się odpowiednie osoby wokół siebie to każde miejsce staje się tym wymarzonym. 
3. Ulubiony deser? 
- Koktajl owocowy 
4. Jak według Ciebie powinna wyglądać idealna randka?
- Spacer po parku
5. Ufasz bardziej lekom z apteki,czy naturalnym środkom z Twojej kuchni? Weź pod uwagę działanie i ewentualne skutki uboczne.
- Zdecydowanie lekom. Jestem alergikiem i naturalne środki mogłyby mi zaszkodzi niż pomóc. 
6. Jaka jest dla Ciebie najważniejsza cecha u mężczyzn? 
- Cierpliwość 
7. Kot czy pies? 
- Pies 
8. Jaki film mi polecasz? 
- Na pewno być może 
9. Najzabawniejsza sytuacja,która Cię spotkała? 
- Pozostawię to dla siebie :) 
10. Ulubiona piosenka? 
- Nie mam ulubionej piosenki. 
11. Jaki jest twój kosmetyczny ulubieniec? 
- Oliwkowy balsam do ust z Ziaji 

Aktualizacja 11.02.2015

Czytaj dalej »

Jak w prosty sposób zmienić wygląd etykiet

10.12.2014



Etykiety - gadżet dzięki,któremu łatwiej jest nam coś znaleźć na blogu. Miło jest gdy nawet taki gadżet jak etykiety wygląda tak jak chcemy dlatego w dzisiejszym tutorialu pokarzę wam jak w prosty sposób odmienić nasze etykiety.


Do zmiany wyglądu etykiet będzie nam potrzebny następujący kod:

.label-size a{
 float: left; 
 height: 30px;
 line-height: 30px; 
 position: relative;
 font-size: 14px;
 margin-bottom: 10px;
 margin-left: 10px;
 padding:0 20px 0 20px;
 background:#000;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:0px;
 -webkit-border-bottom-right-radius:0px;
 border-bottom-right-radius:0px;
 -moz-border-radius-topright:0px;
 -webkit-border-top-right-radius:0px;
 border-top-right-radius:0px;
 }

.label-size a:hover{background: #ccc;}

Teraz przeanalizujmy nasz kod krok po kroku
.label-size a{
 float: left; - położenie etykiet 
 height: 30px;  - wysokość     
 line-height: 30px; - wysokość  (ważne jest żeby w tych dwóch miejscach były takie same wartości) 
position: relative;
 font-size: 14px; - wielkość czcionki 
 margin-bottom: 10px; - margines dolny 
 margin-left: 10px; - margines lewy 
 padding: 0px 20px 0px 20px;  - wielkość naszych etykiet pierwsza wartość odpowiada za górną krawędź naszych etykiet, druga wartość odpowiada za długość prawego boku,trzecia wartość odpowiada za dolną krawędź etykiety,czwarta wartość odpowiada za długość lewego boku. 
 background:#000; - kolor naszych etykiet
 color:#fff; - kolor tekstu 
 text-decoration:none;
 -moz-border-radius-bottomright:0px;
 -webkit-border-bottom-right-radius:0px; - zaokrąglenie prawego dolnego rogu 
 border-bottom-right-radius:0px;
 -moz-border-radius-topright:0px;
 -webkit-border-top-right-radius:0px; - zaokrąglenie prawego górnego rogu 
 border-top-right-radius:0px;
 }

.label-size a:hover{background: #ccc;} - kolor etykiety po najechaniu na nią myszką 


Ps. Bardzo ważne jest aby przy tym nasze etykiety były wyświetlane w formacie chmury
Ps2. Zapraszam wszystkich fanów DIY do polubienia jedynej takiej strony na Facebooku. Stronę tworzą rękodzielnicy podsyłając do administratorów swoje pomysły wraz ze zdjęciami i dokładnymi instrukcjami STRONA - KLIK  strona dopiero się rozkręca,więc będzie naprawdę miło jak przybędzie trochę lajków :)
Ps3. Dajcie znać w komentarzu co myślicie o nowej szacie graficznej bloga,postawiłam jednak na kafelki - według mnie dzięki nim blog jest bardziej przejrzysty.
Czytaj dalej »

Jak wstawić gadżet wyszukiwania i dostosować jego wygląd

03.12.2014


Gadżet wyszukiwania,każdy zna. Jest to bardzo pomocny gadżet,szczególnie przy blogach lifestylowych,ponieważ umożliwia nam wyszukanie danego artykułu bez przeszukiwania całego bloga. W dzisiejszym tutorialu pokaże wam jak w prosty sposób wstawić swój własny gadżet wyszukiwania i dostosować jego wygląd do naszego bloga.

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript


2. Kiedy otworzy nam się okno HTML/JavaScript  wpisujemy następujący kod:

<style>
#wc-searchblack1
{
background: #0db7b3;
border-radius:10px;
width:280px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #ff5353;
background: #ff5353;
padding:5px;
color:#ffffff;
font:14px Times New Roman;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px Times New Roman;
}

</style>
<div id='wc-searchblack1'>
         <form name="input" action="Link do naszego bloga/search"  method="get"  id="wc-searchblackbox1"> 
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Wyszukaj...";}' onfocus='if (this.value == "Wyszukaj...") {this.value = ""}' type='text' value='Wyszukaj...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Szukaj'/>
         </form>
      </div>
2a. Analizujemy kod.

Ta część odpowiada za ten element:

           <style>
#wc-searchblack1 
{
background: #000000; - tło naszego gadżetu,możemy je zmienić na dowolny kolor,jeśli chcemy aby było przezroczyste wpisujemy transparent.
border-radius: 10px; - zaokrąglone narożniki (jedna wartość odpowiada wszystkim czterem narożnikom) naszego tła,wartość zmienna,wartość wystarczy zmienić na 0 aby zaokrągleń nie było. Jeśli chcemy mieć zaokrąglony każdy narożnik inaczej to zamieniamy tą linijkę na border-radius: 30px 30px 20px 20px - pierwsza liczna to górny lewy narożnik,druga liczba to górny prawy narożnik,trzecia liczba to dolny prawy narożnik,a czwarta to dolny lewy narożnik.
width:280px; - szerokość naszego tła 
}

#wc-searchblackbox1
{
padding:10px; - odpowiada za szerokość naszego tła.
}
Ta część odpowiada za ten element:

#wc-searchblacksubmit1
{
border:1px solid #fff; - grubość ramki,rodzaj ramki,kolor ramki. Rodzaje obramowań: solid - linia ciągła, double - linia podwójna, dashed - linia kreskowana, dotted - linia kropkowana
background: #000; - kolor tła,przycisku wyszukiwania
padding: 5px; - szerokość przycisku 
color:#ffffff; - kolor napisu 
font:14px Times New Roman; - rozmiar i rodzaj czcionki przycisku 
}
Ta część odpowiada za ten element:

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;  - ta cześć odpowiada za zaokrąglenie narożników
-webkit-border-radius: 10px;
border:1px solid #ffffff; - grubość ramki,rodzaj ramki i grubość ramki 
background:#ffffff; - kolor tła pola wyszukiwania 
padding:5px; - szerokość pola wyszukiwania
color:#888888; - kolor tekstu pola wyszukiwania 
width:178px; - długość pola wyszukiwania
font:14px Times New Roman; - wielkość i rodzaj czcionki wyrazu "wyszukaj..." 
}
</style>
<div id='wc-searchblack1'>
         <form name="input" action="Link do naszego bloga/search"  method="get"  id="wc-searchblackbox1">  - dokładnie ma to wyglądać tak:  
<form name="input" action="http://blonparia.blogspot.com/search"  method="get"  id="wc-searchblackbox1"> 
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Wyszukaj...";}' onfocus='if (this.value == "Wyszukaj...") {this.value = ""}' type='text' value='Wyszukaj...'/>  - słowo "wyszukaj..." możemy zmienić np na "wpisz czego szukasz" wedle uznania,ważne jest aby było zmienione w 3 miejscach 
            <input id='wc-searchblacksubmit1' type='submit' value='Szukaj'/> - tak samo,możemy zmienić wedle własnego uznania np na search

        </form>
      </div>
3. Klikamy zapisz i nasz gadżet widnieje na naszej stronie
Czytaj dalej »

Jak zmienić wygląd paska przewijania na blogu

24.11.2014


Pasek przewijania strony - mały szczegół,większość z nas nie zwraca nawet na niego uwagi jednak,fajnie to wygląda kiedy nawet taki mały szczegół komponuje się z naszym blogiem.
W dzisiejszym tutorialu pokaże wam jak w bardzo prosty sposób możemy odświeżyć nasz pasek przewijania na blogu.


Pamiętaj aby przed rozpoczęciem edycji szablonu zrobić kopię zapasową 



1. Przechodzimy do szablon - edytuj kod HTML 
2. Klikamy kursorem w dowolne miejsce a następnie za pomocą CTRL + F wywołujemy okno wyszukiwania.




3. W oknie wyszukiwania wpisujemy ]]></b:skin> i klikamy enter.

4. Kiedy już znajdziemy wyszukiwany  przez nas fragment kodu to nad nim wklejamy następujący  kod:


::-webkit-scrollbar {
background:#fff;             
width:10px; 
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%);
}
::-webkit-scrollbar-track {
}

background:#fff; - kolor tła 
width: 10px - szerokość naszego paska
background-image: -webkit-linear-gradient(top, #3FB1AE  10%, #3FB1AE 51%) - kolory naszego paska,jeśli ma być on w jednolitym kolorze to ten sam kolor musi byc zarówno przy 10% i przy 51% aby uzyskać efekt tzw ombre na naszym pasku zmieniamy kolor albo przy 10% albo przy 51% 
Jeśli chcemy mieć dwukolorowy pasek bez efektu ombre to zmieniamy 10 % na 51% (wartościami procentowymi możemy się bawić) 

Oto kilka przykładów: 



Czytaj dalej »

Jak dodać teksturę do zdjęcia - Photoscape

17.11.2014


Photoscape to jeden z najprostszych programów w obsłudze jeśli chodzi o edytowanie grafiki.
Widziałam,że wiele osób poszukuje instrukcji jak dodać przezroczyste kółko/kwadrat/prostokąt lub właśnie teksturę do zdjęcia aby później na nim dodać tekst. Nie jest to nic trudnego do zrobienia musimy posiadać tylko program PhotoScape. W dzisiejszym tutorialu skupię się właśnie na dodaniu tekstury.

1. Otwieramy nasze zdjęcie w programie photoscape.


2. Następnie klikamy obiekt - następnie ikonkę zdjęcia i wybieramy "zdjęcie..."



3. Otworzy nam się nowe okno i teraz należy wyszukać folderu z naszą teksturą i klikamy na nią.


4. Nasza tekstura pojawiła się już na zdjęciu. Pojawiło nam się kolejne okno,jednak do niego wrócimy za chwilę na razie je zamykamy,klikając "ok" lub "x",teraz trzeba dopasować naszą teksturę do zdjęcia.


Teraz najeżdżamy myszką na naszą teksturę,pojawią nam łapka,dzięki której możemy przesunąć naszą tekturę.


Kiedy nasza tekstura znajdzie się tam gdzie chcemy możemy zabrać się za dopasowanie jej do naszego zdjęcia. Mamy dookoła wklejonego obrazu małe,białe kwadraciki,najeżdżamy na nie i rozciągamy naszą teksturę do takiego rozmiaru jaki chcemy.


Kiedy nasza tekstura została już rozciągnięta,klikamy na nią,pojawia nam się okno,w którym wybieramy "właściwości" i pojawia nam się kolejne okno,które zamknęliśmy na początku tego punktu,a które teraz będzie nam potrzebne.


Teraz się zajmujemy naszym drugim oknem,które się pojawiło. Mamy w nim opcje "zaczernienie" ,dzięki której dostosujemy przezroczystość naszej tekstury.


5. Kiedy nasza tekstura już jest gotowa zabieramy się za dodanie tekstu. Przechodzimy do ikonki z literką "T" pojawia nam się okno,w którym należy wpisać tekst.



Jak widzicie powyżej pod 1 znajduje się pole do wpisania tekstu,pod 2 lista czcionek do wybrania,pod 3 zmieniamy rozmiar naszego tekstu (jak widzicie dookoła tekstu też są takie małe kwadraciki,które służą do rozciągania go we wszystkie strony,ja korzystam właśnie z tej metody przy doborze rozmiaru tekstu) pod 4 znajduje się kolor tekstu,a pod 5 przycisk "ok" który klikamy jak wszystko już jest po naszej myśli. W edytorze tekstu znajdują się również inne opcje takie jak np. cień,na zrzucie ekranu tych innych opcji nie widać,bo przysłania lista z dostępnymi czcionkami,ale jak ktoś będzie chciał się bardziej pobawić z cieniem i pozycjonowaniem tekstu,to bez problemu te opcje w oknie tekstu znajdzie.

6. Aby nasz tekst się za bardzo nie rzucał w oczy i jakoś się komponował z naszą teksturą,możemy użyć opcji zaczernienia,tej samej,której użyliśmy przy dodaniu naszego obrazu,również po najechaniu myszką na tekst (tak samo jak przy teksturze) pojawi nam się łapka,dzięki której ustawimy nasz tekst w dowolnym miejscu.



7. Efekt końcowy


Jak wam się podoba taki tutorial? :)
Czytaj dalej »

Jak zrobić własne pędzle (brushe) do GIMPa

03.11.2014


Uwielbiam bawić się w GIMPie,a w szczególności uwielbiam opcje pędzla. Bardzo często szukam nowych pędzli do pobrania,ale ostatnie poszukiwania nie przyniosły żadnego efektu,postanowiłam,więc sama zrobić pędzle,które będą spełniały moje wymagania.


Jeśli posiadasz obraz w formacie PNG omiń punkt 2,jeśli posiadasz obraz PNG z przezroczystym tłem omiń punkt 2 i 3.
Jeśli chcesz posiadać pędzle bez możliwości zmiany koloru przy użytkowaniu i pozostawić je w kolorze omiń punkt 4 i 5.

1. Pierwsze co należy zrobić to wybrać zdjęcie/grafikę,z którego chcemy zrobić nasz pędzel,ja stworzyłam sobie w tym celu konia.


Klikamy prawym przyciskiem myszki na naszą grafikę i wybieramy Edit with GIMP,jeśli ta opcja nam się nie pokażę to należy otworzyć GIMPa i wybrać plik - otwórz... i szukamy naszego obrazu.

2. Jeśli nasz obraz jest w formacje JPEG/JPG to musimy wykonać następujący krok: przechodzimy do kolumny warstwy - pędzle i prawym przyciskiem myszki klikamy na nasz obraz w kolumnie i wybieramy dodaj kanał alfa,jeśli nie pojawiła wam się kolumna z warstwami oraz pędzlami wystarczy je włączyć klikając okna - dokowalne okna dialogowe - warstwy/pędzle lub sprawdzić czy nie zostały przez was ostatnio zamknięte: okna - ostatnio zamknięte doki. 


W moim przypadku grafika jest już w formacie PNG dlatego nie muszę dodawać kanału alfa.

3. Teraz będziemy robili przezroczyste tło naszej grafiki. Jak już mamy dodany kanał alfa to przechodzimy do przybornika i za pomocą narzędzia różdżki zaznaczamy i usuwamy niepotrzebne nam tło.


Po zaznaczeniu tła klikamy na obraz prawym przyciskiem myszy i wybieramy edycja - wytnij



4. Teraz klikamy obraz - tryb - odcienie szarości 


Nasz obraz zmienił kolory na czarno - białe,co pozwoli przy używaniu pędzla na zmianę koloru,jeśli chcemy aby nasz pędzel pozostał w kolorach bez możliwości zmiany omijamy ten punkt.


5. Klikamy znowu na obraz i wybieramy spłaszcz obraz


6. Zapisujemy nasz obraz klikamy plik - wyeksportuj 



Otwiera nam się drugie okno na dole mamy mały plusik po lewej stronie przy którym jest napisane Wybór typu pliku (Według rozszerzenia) klikamy na plusik i wybieramy typ pliku w naszym przypadku będzie to Pędzel programu GIMP gbr i klikamy wyeksportuj



Po tym pojawi nam się jeszcze jedno okno w nim nie zmieniamy nic tylko klikamy wyeksportuj


7. Teraz pozostaje nam skopiować pędzel



i wgrać nasz do gimpa w tym celu przechodzimy do dysku C - Program Files 



GIMP 2 - share - gimp - 2.0 - brushes i wklejamy nasz skopiowany pędzel,można nam się pojawić okno,które prosi o uprawnienia administratora w tym celu należy kliknąć kontynuuj 




8. Uruchamiamy gimpa ponownie i możemy cieszyć się nowymi pędzlami





Czytaj dalej »

Copyright © Szablon wykonany przez Blonparia