Jak w gadżecie "obserwuj przez e-mail" zmienić "submit" i "email address..." na swój własny tekst

9 czerwca 2017


Ci co używają gadżetu "obserwuj przez e-mail", wiedzą, że nie jest on w języku polskim tzn. pole do wpisywania maila i przycisk, który potwierdza naszą subskrypcję. O ile prowadzimy bloga po angielsku lub dwujęzycznego to jest okej, nie gryzie się to aż tak ze sobą, ale jeśli wszystko mamy po polsku, a tu nagle wyskakuje nam gadżet po angielsku, to już jest to trochę ze sobą niespójne. Dlatego w tym wpisie pokażę Ci jak łatwo można zmienić "submit" i "email address..." na swój własny tekst.

1. Przechodzimy do motyw - edytuj kod HTML
2. Rozwijamy listę "Przejdź do widżetu" i wybieramy "FallowByEmail" - numerek przy tym widżecie może być różny, zależnie od tego, który jest to z kolei gadżet "obserwuj przez e-mail".





















3. Przeniosło nas do części kodu, gdzie znajduje się nasz gadżet. Teraz musimy kliknąć na strzałkę obok naszej części lub kropeczki, aby rozwinąć tą część kodu.



















4. Pojawi nam się kolejna część do rozwinięcia


5. Kiedy rozwiniemy pojawi nam się cały kod. Widzimy, że również mamy tutaj sekcję odpowiedzialną za napis "submit" i "email address..."

6. W tych częściach kodu, które na zdjęciu powyżej zostały zaznaczone szarą ramką, zmieniamy nasz tekst, ale pamiętajmy o tym aby nie usuwać ' '. Po zmianie tekstu klikamy "zapisz motyw"


Jeśli chcesz przy okazji zmienić wygląd swojego gadżetu "obserwuj przez e-mail" to linki do tych wpisów znajdziesz poniżej


Instrukcja 1 Instrukcja 2 Instrukcja 3



Czytaj dalej »

Darmowa alternatywa dla Illustratora

27 maja 2017


Mamy darmową alternatywę dla Photoshopa m.in znany wszystkim GIMP, ale też mamy darmową alternatywę dla Illustratora i to nie jedną!

W dzisiejszym wpisie przedstawię Wam programy, które nadadzą się jako alternatywa dla Illustratora.

1. Inkscape

Niektórzy z Was pewnie spotkali się z tym programem, a jeśli nie, to na pewno spotkaliście się z nazwą i coś Wam tam w głowie świta. Inkscape to dobra alternatywa (i przede wszystkim darmowa) dla Illustratora. Program cały czas jest ulepszany przez co jeszcze bardziej przypomina nam program z rodziny Adobe. Dodatkowo Inkscape ma możliwość zapisania pliku w formacie AI.
Nie ukrywam, że Inkscape bardzo pomógł mi w pierwszych krokach w grafice wektorowej, dzięki temu, pierwsze zajęcia na temat tworzenia wektorów nie były dla mnie aż tak ciężkie.



Program dostępny jest na Windows, Mac, Linux.

2. Gravit Designer

Interfejsem nie przypomina ani Illustratora ani Inkscape. Można powiedzieć, że interfejs tego programu jest trochę dziecięcy. Nie ma również niektórych opcji jakie posiada Inkscape i Illustrator, ale pracować na warstwach, tworzyć wektory za pomocą krzywych, tekst oraz kształty, którymi można dowolnie manipulować - jak najbardziej da radę. Jeśli ktoś szuka czegoś prostego i nie wymagającego - to ten program na pewno się sprawdzi. Niestety, w tym programie nie zapiszemy naszej pracy w formacie AI, ale w PDFie jak najbardziej.


Program dostępny jest na Windows (opcja portable i installer), Mac, Linux oraz w wersji przeglądarkowej.

3.SVG-edit

Jest to program typowo przeglądarkowy, uproszczony jak tylko się da. Po mimo swojego uproszczenia posiada warstwy, więc nie musimy się martwić o to, że całą pracę wykonujemy tylko na jednej warstwie. Osobiście nigdy nie polubiłam się z tym programem, ale jeśli ktoś potrzebuje czegoś naprawdę prostego to ten program jest dla niego. Jedynym minusem w tym programie jest oznaczenie krzywych. Niestety, nie jest to tradycyjne piórko lub (tak jak w przypadku Inkscape) ikonka z pisakiem (?) i linią z punktami, a ikonka z zielonym elementem. Pliki z tego programu można eksportować do PDF.


A Wy tworzycie grafiki wektorowe czy dopiero chcecie zacząć coś działać w tym temacie?Jaki program macie na uwadze i dlaczego akurat ten? Jestem ciekawa Waszych odpowiedzi :) 
Czytaj dalej »

Jak wypełnić tekst tłem w GIMPie - wideo

17 maja 2017


Czytaj dalej »

Szablon do pobrania za darmo - White

15 maja 2017



Szablon White. Jest to darmowy szablon na Bloggera w odcieniach bieli i szarości. Utrzymany w minimalistycznej formie. 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 społecznościowe w gadżecie "O mnie"
  • 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ć

Czytaj dalej »

Opcje i narzędzia, które ułatwiają mi pracę

3 maja 2017


Oczywiście mowa tu o tej graficznej pracy - blog o grafice to i o organizacji takiej pracy czasem warto napisać, ale myślę, że niektóre z tych narzędzi/opcji przyda się i Wam do codziennej pracy :)

1. Zacznijmy od najprostszego. Ukrycie paska zadań.

Nie lubię mieć zbiorowiska ikon na pulpicie - uważam to za rozpraszacze - dlatego wszystkie potrzebne mi programy mam przypięte do paska zadań. Jedyne co mam na pulpicie to kosz i mój osobisty folder.
Pasek zadań również mnie rozpraszał, więc zastosowałam pewien "zabieg" - ustawiłam opcje "włącz autoukrywanie paska zadań", dzięki temu, pasek zadań mam zawsze schowany, a dół monitora "czysty".













2. Skróty klawiszowe 


F5, F11, Alt + Tab - To są skróty klawiszowe, które używam za każdym razem.

F5 - odświeżenie strony. Bardzo to ułatwia życie. Szczególnie kiedy nasza praca ogranicza się do klawiatury.

F11 - Dzięki temu klawiszowi uzyskamy pełny ekran. Koniec z rozpraszaczami na górze strony.


Alt + Tab - przełączanie między otwartymi programami.


























3. Tablet graficzny.


Nie wyobrażam sobie bez niego pracy - szczególnie przy digital paintingu (podziwiam ludzi, którzy malują myszką) ale i nie tylko, tablet jest dla mnie dużym wybawieniem jeśli chodzi o obróbkę zdjęć czy fotomontaże (nie wiem jak kiedyś sobie radziłam przy tym myszką).
Tablet jaki posiadam to Wacom One S.

4. Dysk zewnętrzny.


Kiedy zaczynam pracę na komputerze, pierwsze co robię to podpinam dysk zewnętrzny i robię rozeznanie wśród plików. Nie robię tego po to, bo brak mi miejsca na komputerze - wręcz przeciwnie, robię to po to, aby miejsce na komputerze zostało dla rzeczy ważnych i ważniejszych. Pliki typu: obrazki, materiały ze studiów, fonty, które zostały zainstalowane, archiwalne zdjęcia - po prostu pliki, które nie są mi potrzebne przy codziennej pracy - wrzucam na dysk. Nie przeszkadzają, ja się nie irytuje, że wśród moich plików panuje syndrom chomika i łatwiej jest mi znaleźć materiały potrzebne do pracy.
Dysk zewnętrzny jaki posiadam, znajdziesz TUTAJ

5. Programy.


Mam dwa programy, z których korzystam nagminnie, z dwóch powodów:
  • Wymaga się tego ode mnie 
  • Z wygody 
Tymi programami są Illustrator i Photoshop. Rzadziej (ale również się zdarza) InDesign oraz  Adobe Premiere/After Effect. Na pierwszym roku "katowałam" również Corela. 

Dodatkowymi programami, z których obecnie korzystam bardziej dla rozrywki są GIMP i FireAlpaca. Oba są darmowe. FireAlpaca jest programem typowo do malowania. 

6. Organizacja 


Jeśli chodzi o organizacje, to tutaj króluje u mnie Evernote. Dzięki niemu mogę wszystko sobie zaplanować, rozpisać i co najważniejsze dla mnie - możliwość połączenia dwóch urządzeń, dzięki temu zapisane notatki z pozycji telefonu mam również na komputerze. 
Dodatkowo, bardzo przydatna jest wtyczka Evernote do Chrome, która zapisuje nam dany fragment strony. 
























7. Narzędzie do pobierania koloru z każdego miejsca w sieci. 


Bardzo często podczas swojej pracy korzystam z palet kolorystycznych, czasem przeglądając internet trafiam na zdjęcie, z którego chciałabym pobrać paletę barw, aby nie bawić się w zapisywanie zdjęcia, otwieranie programu i tworzenia palety, ułatwiłam sobie życie wtyczką do Chrome - Palette Creator














8. Relaks i wyznaczony czas podczas pracy. 


Noisli - pewnie większość z Was zna. Jest to strona z odgłosami natury lub kawiarni, która pomaga nam się zrelaksować lub produktywnie pracować. Więcej korzyści z tej strony będziemy mieli jeśli założymy tam konto i zainstalujemy wtyczkę do Chrome, ponieważ, na swoim koncie możemy utworzyć własne dźwiękowe kompozycje i zapisać, które później pojawią nam się w naszej wtyczce. Wtyczka Noisli ma jeszcze coś - technikę Pomodoro - odlicza nam 25 minutowy czas pracy. 


Jeśli jednak ktoś lubi pracować przy muzyce - obojętnie jakiej, aby mu coś grało w tle, to osobiście polecam ten kanał na YouTube - The Vibe Guide

Jeśli chodzi o pracę przy muzyce na uczelni, to mamy na tyle dobrych profesorów, że pozwalają nam włączyć jakieś radio aby nam się milej pracowało.

To tyle jeśli chodzi o rzeczy, które pomagają mi przy pracy, a co u Was się sprawdza lub co się nie sprawdza? Napiszcie w komentarzu! :) 

Czytaj dalej »

Jak zrobić panoramiczne zdjęcie (efekt planety) w Photoshopie

27 kwietnia 2017


Na pewno wszystkim znane są zdjęcia panoramiczne, które posiadają efekt planety PRZYKŁAD TUTAJ. Dziś pokażę Wam jak taki efekt wykonać w Photoshopie, jest to bardzo proste i co najważniejsze - szybkie do wykonania.

Mała informacja przed przejściem do instrukcji: 

Jak możecie zauważyć nie było takiej instrukcji w GIMPie, to jest pierwsza instrukcja Photoshopowa na moim blogu, która nie odtwarza tych GIMPowych - powód jest prosty, zauważyłam, że więcej osób jest zainteresowanych instrukcjami w Photoshopie. Jeśli jednak są tu osoby, które były by zainteresowane tą instrukcją w GIMPie - napiszcie o tym w komentarzu ;)

1. Otwieramy nasze zdjęcie w Photoshopie (plik-otwórz / ctrl+o (PC) / cmd+o (MAC))
2. Odwracamy nasze zdjęcie "do góry nogami". Obraz - obracanie obrazu - 180॰.

























3. Wybieramy filtr - zniekształcenie - współrzędne biegunowe

























4. Pojawi nam się ramka, w której musimy mieć zaznaczone "Kartezjańskie na biegunowe" i klikamy ok.


5. Jak widzicie, efekt już jest gotowy, ale pozostała nam brzydka linia łączenia, którą musimy usunąć, aby efekt był taki jak być powinien. Z okna narzędzi wybieramy "punktowy pędzel korygujący" i "zamalowujemy" nasze łączenie.

Efekt: 




Czytaj dalej »

Zmiana koloru poszczególnych elementów w Photoshopie

16 kwietnia 2017


Jakiś czas temu, był omawiany ten temat, ale robiliśmy to wtedy w programie GIMP. Teraz zajmiemy się tym samym, ale w Photoshopie. Jeśli jednak interesuje Was instrukcja w GIMPie - nic straconego, poniżej macie odnośnik do tej instrukcji.

Przejdź do wpisu z instrukcją w GIMPie

1. Otwieramy zdjęcie w Photoshopie i tak jak robiliśmy to w GIMPie, wybieramy zaznaczenie, które najbardziej nam będzie pasować.


2. Zaznaczamy element, który będzie miał zmieniany kolor.






















3. Jeśli nasze elementy są już zaznaczone - wybieramy: obraz - dopasowanie - barwa/nasycenie 

























4. Pojawi nam się ramka z suwaczkami, którymi zmieniamy kolor naszego elementu.


Efekt:


UWAGA! Jest to zmiana kolorów na szybko i najlepiej wychodzi na symetrycznych kształtach. Ta metoda nie nadaje się do dokładnego zmieniania koloru np. włosów. 
Czytaj dalej »

Jak wstawić instagramowy wpis do wpisu na blogu

14 kwietnia 2017

Nie ukrywam, że sama z tej opcji nie korzystam, bo po prostu nie mam po co, ale na wielu blogach widziałam już, że niektórzy, przy podsumowaniach, zaprezentowaniu czegoś wstawiają zrzuty ekranu z Instagrama, a przecież można to zrobić w inny, bardziej (według mnie) estetyczny sposób. Mówię tutaj o wrzuceniu aktywnego wpisu z Instagrama do wpisu na blogu. Jest to bardzo proste do zrobienia, więc nie macie się czego bać :)

1. Zaloguj się na Instagram przez komputer.























2. Wybieramy sobie konkretne zdjęcie/wpis z Instagrama. Klikamy trzy kropeczki na dole.























3. Pojawi nam się kolejne okno z opcjami takimi jak: Kod osadzania/Anuluj. Wybieramy "Kod osadzania".






















4. Pojawi nam się kolejna ramka, wybieramy "kopiuj kod osadzania".























5. Kiedy skopiujemy kod, przechodzimy do wpisu na blogu, w którym chcemy umieścić nasze zdjęcie/wpis z Instagrama. Wybieramy opcje HTML i wklejamy kod.
























6. Efekt:
Czytaj dalej »

Animowana data wpisu

7 kwietnia 2017


Dzisiaj mam dla Was kolejny wpis ze stylem dla dat. Animowana data - po najechaniu myszki może nam się zmienić kolor tła, kształt daty lub font. Taki efekt uzyskacie za pomocą kodu CSS.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

STYL 1

h2.date-header span {
background-image: url(LINK DO OBRAZKA)
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
box-shadow: #fff -3px -3px 0px inset ;
border-radius: 0px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 0px 20px 0px #a64d79 , inset 0px -50px 0px #a64d79;
color: #fff ;
}


Zobacz efekt


STYL 2

h2.date-header span {
background: #a64d79;
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
border-radius: 90px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 30px 0px 0px #d5a6bd , inset -40px 0px 0px #d5a6bd;
color: #fff ;
}

Zobacz efekt


Link do obrazka, który będzie pełnił rolę tła/Kolor tła
Szerokość
Marginesy wewnętrzne
Kolor fontu
Rodzaj fontu
Położenie tekstu
Odstęp między literami
Wielkość fontu
Transformacja tekstu
Położenie - góra
Położenie - lewa strona
Cienie
Zaokrąglone rogi
Font po najechaniu na niego myszką
Kolor tła po najechaniu myszką
Kolor fontu
Czytaj dalej »

4 pędzle bokeh do Photoshopa za darmo

26 marca 2017


Wiecie, że wszystkie posty Photoshopowe pokrywają się z tymi, które zostały opublikowane już dla GIMPa, jednak ten będzie małym odstępstwem, bo postu z darmowymi pędzlami do GIMPa jeszcze nie było :)

W dzisiejszym wpisie mam dla Was do pobrania za darmo 4 pędzle, dzięki którym będziecie mogli stworzyć efekt bokeh.


Pobierz pędzle


Zasady pobierania

  1. Udostępnienie pliku w postaci oryginalnej lub zmienionej jest zabronione. Chcesz się z kimś podzielić - podaj link do wpisu. 
  2. Plik pobierasz tylko na użytek własny 
Czytaj dalej »

Jak zmienić wygląd gadżetu "obserwuj przez e-mail" - część 3 - okno newslettera

14 marca 2017


Na blogu już były dwa wpisy poświęcone gadżetowi "obserwuj przez e-mail". Dziś pokażę Wam jak w prosty sposób, bo za pomocą kodu CSS, zmienić wygląd tego gadżetu tak, aby przypominał okienko newslettera. Dzięki tej instrukcji, będziecie mogli dodać tekst do Waszego gadżetu "obserwuj przez e-mail", który zaprosi Waszych potencjalnych czytelników do subskrypcji.

1. Motyw (kiedyś szablon) - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

.widget.FollowByEmail {
text-align: center;
padding: 0 !important;
}
.FollowByEmail h2.title{
display: none;
}
.FollowByEmail .widget-content {
background: #fafafa;
padding: 20px;
}
.FollowByEmail .widget-content:before {
content: "Newsletter";
color: #161616;
text-align: center;
font: normal bold 14px 'Playfair Display', serif;
font-size: 20px;
font-style: normal;
}
.FollowByEmail .follow-by-email-inner {
display: block;
overflow: hidden;
}
.FollowByEmail .follow-by-email-inner:before {
content: "TU WPISZ TEKST";
color: #161616;
font-size: 13px;
font-style: italic;
line-height: 1.7;
margin: 10px;
display: block;
opacity: .7;
}
.FollowByEmail .follow-by-email-inner td {
display: block;
width: 100%;
}
.FollowByEmail input.follow-by-email-address {
display: block;
padding: 10px;
width: 100% !important;
font-style: italic;
border: 0 !important;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
margin-right: 0;
padding: 0;
border: 0;
color:#ffffff;
background-color: #000;
font:normal normal 12px Open Sans !important;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
z-index: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
font-size:90% !important;
margin: 0 -1% 0px;
width: 100%;
}
.follow-by-email-inner .follow-by-email-submit:hover {
background: #fbe2dd;
color: #4e4d4c;
}

Tło całego okienka 
Marginesy wewnętrzne całego okienka
Tytuł 
Kolor tytułu
Font tytułu
Wielkość fontu
Tekst, który ma się pojawiać nad okienkiem wpisywania maila
Kolor tekstu
Wielkość tekstu
Styl tekstu 
Odstęp między liniami w tekście 
Margines
Marginesy wewnętrzne okna do wpisywania maila 
Kolor tekstu przycisku "subskrybuj" 
Kolor tła przycisku
Font przycisku 
Transformacja tekstu 
Odstęp między literami
Wysokość przycisku 
Kolor tła po najechaniu na przycisk myszką 
Kolor tekstu po najechaniu na przycisk myszką 

Efekt:



Czytaj dalej »

4 geometryczne, minimalistyczne patterny do pobrania za darmo

6 marca 2017


Dzisiejszy wpis będzie bardzo krótki, ale myślę, że dla niektórych z Was również przydatny. Chce, aby na blogu pojawiały się również darmowe materiały graficzne, więc oprócz instrukcji blogowych lub graficznych będą pojawiać się takie wpisy jak ten. Mam dla Was tzw. darmówki - 4 geometryczne, minimalistyczne patterny do pobrania za darmo.


Pobierz patterny

Czytaj dalej »

Jak zrobić napis z obrazu na obrazie - Photoshop

2 marca 2017


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 »