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

15.11.2017


Po ostatniej ankiecie, wszystko stało się jasne - chcecie kolejną część z serii "Zrób ze mną szablon na bloga" i o to jest część 3! Ta część będzie się różnić trochę od poprzednich, ponieważ pokażę Wam jak zrobić nasz szablon za pomocą kodów, które są już dostępne na blogu. Mam nadzieję, że część 3 przyjmie się tak samo dobrze, jak część 1 i 2 :) 


część 1 część 2

Paleta kolorów, z której korzystałam przy tej instrukcji:

https://www.design-seeds.com/studio-hues/collage/color-create-7/

#798340 #B1B85F #D1D183 #CADED8 #D7E7DD #F5EFE8

Zapamiętaj!
Przed każdą edycją szablonu, zrób jego kopię zapasową, aby w razie pomyłki, nie utracić cennych dla Ciebie informacji :)

1. Za bazę naszego szablonu wybieramy szablon Simple (prosty) biały. Najlepiej się na nim pracuje :)




















2. Motyw - dostosuj - układ (będziemy pracować na prawo kolumnowym układzie z pojedynczą kolumną w stopce bloga)



3. Teraz przechodzimy do dostosuj ustawienia szerokości i szerokość bloga ustawiamy na optymalną czyli 1240, a szerokość kolumny bocznej - dowolnie, u mnie jest to 340








4. Wybieramy "Zastosuj do bloga"
5. Teraz musimy jakoś doprowadzić do porządku nasze zdjęcia we wpisach i same wpisy, aby zaczęły się jakoś prezentować :) W tym celu przechodzimy do zaawansowane - dodaj arkusz CSS

Usuwanie ramek i cieni spod zdjęć we wpisie

W tym celu będziemy korzystać z tego wpisu Kilka przydatnych, podstawowych kodów
Wklejamy taki kod:



Automatyczne dopasowanie zdjęć do szpalty bloga, bez ruszania tych mniejszych


Bardzo przydatny kod - dzięki niemu możecie wrzucać zdjęcia w oryginalnym rozmiarze i nie przejmować się ich zmniejszaniem przed wrzuceniem na bloga. Ten kod pojawił się w drugiej częśći "Zrób ze mną szablon na bloga"



Tekst strony i wpisów 

Przechodzimy do "Tekst strony", wybieramy sobie font (taki, który obsługuje polskie znaki, bo wiadomo, nie chcemy, aby nasz wpis brzydko wyglądał z rozwalonym fontem), kolor oraz jego wielkość. W moim przypadku jest to font o nazwie Open Sans, kolor #444444 oraz wielkość 13px.

Wyśrodkowanie tytułu wpisu i daty

Te kody również znajdują się w 1 i 2 części "Zrób ze mną szablon na bloga" ;)

Wyśrodkowanie tytułu wpisu



Wyśrodkowanie daty



Zmiana wyglądu tytułu wpisu

Teraz musimy jakoś doprowadzić nasz tytuł wpisu do ładu i składu. W tym celu posłużymy się również kodami z 2 części wpisu "Zrób ze mną szablon na bloga". Jedyna zmiana będzie taka, że ustawienia naszych wartości się zmienią :)



Przy tym elemencie przyda nam się również kod, na zmianę koloru tytułu wpisów, po najechaniu na niego myszą.



Zmiana wyglądu daty

Pierwsze co zrobimy to usuniemy szare tło, zmienimy kolor i font. W tym celu przechodzimy do nagłówek z datą, zmieniamy kolor tekstu i dajemy tło na przezroczyste. Font ustawiłam taki sam jak tekst i w tytule wpisu czyli Open Sans. Możemy ustawić również wielkość fontu, pogrubić lub pochylić.


Przechodzimy do dodaj arkusz CSS i w tym przypadku również użyjemy kodu z 2 części "Zrób ze mną szablon na bloga". Tylko zmienimy trochę wartości.



Wyjustowanie tekstu we wpisie

Jak możecie zauważyć cały czas pozostajemy przy sekcji z wpisami, teraz zajmiemy się wyjustowaniem tekstu we wpisie. W tym celu pozostajemy cały czas w "dodaj arkusz CSS", wklejamy taki kod:



Stopka posta

Teraz będziemy doprowadzać do porządku stopkę posta. przechodzimy do stopka posta. Tam możemy zmienić kolor tekstu, usuwamy kolor tła (robimy przezroczyste) oraz kolor cienia (również ustawimy na przezroczyste). Następnie przechodzimy do dodaj arkusz CSS i dodajemy kod, który umożliwi nam dostosowanie fontu, wielkość etc.



Wygląd cytatów

Jeśli chodzi o edytowanie wpisu, to został nam jeszcze wygląd cytatów. Pozostajemy cały czas w zakładce dodaj arkusz CSS i wklejamy kod:



W tym celu korzystałam z tego wpisu STYLE DLA CYTATÓW WE WPISIE znajdziesz tam jeszcze więcej stylów dla cytatów.


Pager bloga


Zostając cały czas w arkuszu CSS możemy uporządkować nasz pager. Zaczniemy od usunięcia tła/kropeczek z pagera. Wpis do tego znajdziecie tutaj ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA



Teraz trochę ulepszymy nasz pager, aby nie był taki tradycyjny. W tym celu wykonujemy pierwsze 3 punkty z tej instrukcji: TROCHĘ O FONT AWESOME

Jeśli wykonaliśmy już nasza powyższą instrukcję, to przechodzimy znowu do dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy taki kod:



Separator stopki bloga i stopka bloga

Separator stopki bloga w szablonie Simple, jest przerywaną, szarą linią. Będzie nam on przeszkadzał, więc po prostu go usuniemy za pomocą kodu, który już raz użyliśmy we wpisie ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA



W tym samym wpisie, mamy kody na usunięcie niepotrzebnych elementów, jak napis "Obsługiwane przez technologię Blogger" oraz "Subskrybuj: posty (Atom)"



U mnie w stopce bloga znajduje się formularz kontaktowy, zmienimy teraz jego wygląd, a instrukcję na zmianę wyglądu formularza kontaktowego możecie znaleźć tutaj: JAK ZMIENIĆ WYGLĄD FORMULARZA KONTAKTOWEGO



Teraz usuniemy tytuł wpisu dla gadżetu w stopce, wklejamy taki kod:



Kolumna boczna

Teraz zajmiemy się naszą kolumną boczną, wyglądem gadżetów oraz ich tytułami. To będzie jeden z dwóch elementów w tym wpisie, gdzie pojawi się nowy kod, który jeszcze nie był publikowany w żadnym wpisie.



Teraz zmienimy wygląd naszego gadżetu "obserwuj przez e-mail", skorzystamy z drugiej części instrukcji na ten gadżet. JAK ZMIENIĆ WYGLĄD GADŻETU OBSERWUJ PRZEZ E-MAIL


Teraz zajmiemy się gadżetem "szukaj" wpis, w którym pojawiła się ta instrukcja znajduje się tutaj JAK ZMIENIĆ WYGLĄD GADŻETU SZUKAJ


Teraz zajmiemy się etykietami, wpis na ten temat jest już na blogu, ale w tym wpisie wrzucę Wam nowszy kod ;)



Teraz zmienimy nasze archiwum, w tym celu skorzystamy z tego wpisu: JAK EDYTOWAĆ WYGLĄD ARCHIWUM - STYL HIERARCHIA


Edycja menu bloggera

Zakończyliśmy już zmieniać naszą kolumnę boczną i gadżety, teraz przejdziemy do edycji menu Bloggera.
Przechodzimy do akcenty i kolor obramowania kart zaznaczamy na "przezroczysty". Teraz przechodzimy do "tło kart" i tam również zaznaczamy wszystko na przezroczystość. Przechodzimy znowu do arkusza CSS i wklejamy kod (to jest właśnie ten drugi nowy kod).



Wyśrodkowanie nagłówka i usunięcia paska nawigacji 

Pozostał ostatni element w edycji naszego szablonu, Wyśrodkowanie nagłówka i usunięcie paska nawigacji. Kod na wyśrodkowanie nagłówka przypomnimy sobie z poprzednich edycji "Zrób ze mną szablon na bloga".



Zapisujemy i przechodzimy do układ - pasek nawigacyjny (edytuj) - wyłączone - zapisz - zapisz rozmieszczenie

Efekt: 



Czytaj dalej »

Jak wyróżnić jedną ze stron w standardowym menu Bloggera

05.11.2017


W dzisiejszym wpisie przedstawię Wam jak w prosty sposób wyróżnić jedną ze stron w standardowym menu Bloggera. Podgląd tego efektu macie u mnie na blogu (jest wyróżniona strona "darmowe szablony do pobrania") oraz na stronie demo.

1. Przechodzimy do układ i wybieramy gadżet z naszymi stronami. Wybieramy opcje "edytuj"


2. Otworzy nam się okno, w którym możemy dodać stronę do naszego menu. Wybieramy "dodaj link zewnętrzny"


3. Pojawi nam się kolejne okno, które uzupełniamy następująco:


Poniżej kod do skopiowania: 



#ccc - to kolor, można go zmienić

Efekt:


Zobacz efekt kolorowej strony w menu Bloggera

Czytaj dalej »

Patterny do pobrania za darmo - zestaw 6 wzorów

02.11.2017


Prawdopodobnie się powtarzam, ale...uwielbiam patterny, uwielbiam je tworzyć, jestem zakochana w wektorach. Ostatnimi czasy bardzo dużo ich stworzyłam, ale jakoś tak nie miałam kiedy ich Wam udostępnić do pobrania. Dlatego, zrobiłam dokładną selekcje tego co miałam i wybrałam 6 patternów w odcieniach szarości, bieli, brązu i beżu i stworzyłam set do pobrania za darmo.


Pobierz set 6 patternów


Zasady pobierania


  • Grafiki do pobrania są tylko i wyłącznie na użytek własny. 
  • Udostępnianie grafik osobom trzecim w postaci oryginalnej lub zmienionej jest zabronione.
  • W razie jakichkolwiek problemów/pytań napisz na maila blonparia@gmail.com

Czytaj dalej »

Jak zrobić aktywne przyciski we wpisie

28.10.2017


W dzisiejszym wpisie pokażę Wam jak w prosty sposób za pomocą edytora HTML we wpisach oraz kodu CSS można stworzyć aktywny przycisk, który umożliwi nam podpięcie np. linku, pod którym kryje się nasz element do pobrania. Pokażę Wam, dwie wersje - z wykorzystaniem ikonki font awesome oraz tekstem + ikonka font awesome.

UWAGA! Jeśli chcesz mieć w swoim przycisku ikonkę font awesome skorzystaj z wpisu:


Dowiedz się jak zainstalować font awesome

Przycisk z ikonką font awesome + tekst


1. Przechodzimy do wpisu, w którym chcemy umieścić nasz przycisk. Wybieramy HTML, klikamy kursorem w wybrane miejsce,  w którym ma być umieszczony nasz przycisk i wklejamy taki kod:



2. Następnie przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy taki kod:




Analiza kodu (elementy do zmiany):

.twój selektor - miejsce na Twój selektor
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - wewnętrzne marginesy
border-bottom:none; - obramowanie i zaokrąglenie narożników
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important; - color tekstu
text-transform:uppercase; - transformacja tekstu (tutaj ustawione na drukowane litery)
font-size:14px!important; - wielkość fontu
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3); - cień pod przyciskiem

.twój selektor - ten sam co przy powyższych kodach
background: #FBD9DE; - kolor tła naszego przycisku

.twój slektor:hover - ten sam selektor co wcześniej (dopisujemy przed :hover. :hover odpowiada za efekt po najechaniu kursorem myszy na przycisk)

background: #D1EDFF; - tło naszego przycisku po najechaniu na niego myszką

.twój slektor:before - ten sam selektor (dopisujemy przed :before. :before odpowiada za naszą ikonkę)
content: "\f25a"; - numer ikonki font awesome
margin-right: 10px; - margines prawy


Jak zdobyć numer ikonki? 


I. Wchodzimy na stronę Font Awesome (link podany w podlinkowanym wpisie na początku wpisu)
II. Wybieramy zakładkę "Icons"
III. Wyszukujemy ikonki
IV. Klikamy na naszą wybraną ikonkę i pod ikonką na szarym tle będziemy mieli unicode: (tutaj jakiś numer) i kopiujemy nasz numer i wstawiamy do kodu między "\..."

Efekt:

Pod tym przyciskiem zobaczysz jak wygląda najnowszy szablon do pobrania

Przycisk z samą ikonką font awesome

1. Powtarzamy krok z poprzedniego przycisku i w HTML wklejamy taki kod:



2. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS



Analiza kodu (elementy do zmiany)

.twoj selektor - miejsce na Twój selektor
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none; - obramowanie i zaokrąglenie narożników
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#444!important; - color ikonki
font-size:24px!important; - rozmiar ikonki
line-height:40px!important;
cursor:pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3); - cień pod przyciskiem

.twoj selektor - miejsce na Twój selektor
background: #FBD9DE; - tło przycisku

.twoj selektor:hover -  ten sam selektor co wcześniej (dopisujemy przed :hover. :hover odpowiada za efekt po najechaniu kursorem myszy na przycisk)

background: #D1EDFF; - tło naszego przycisku po najechaniu na niego myszką

.twoj selektor:before - ten sam selektor (dopisujemy przed :before. :before odpowiada za naszą ikonkę)

content: "\f25a"; - numer naszej ikonki
font-family: FontAwesome;
margin-right: 5px; - margines prawy


Efekt



Czytaj dalej »

Jak zrobić podkreślenie za tytułami gadżetów

14.10.2017

Parę razy otrzymywałam wiadomości e-mail z pytaniem "jak zrobić podkreślenie za tytułami gadżetów". Nigdy tej instrukcji nikomu nie podawałam, bo jak wiecie nie mam w zwyczaju podawania instrukcji indywidualnie. Zbierałam się trochę z tym, aby tę instrukcję Wam tutaj opublikować. Serio. Jakoś wydawało mi się, że jest ona tak mało istotna, że będę ją sobie przekładać i przekładać, aż w końcu wybije jej moment. Pewnie by tak było nadal gdyby nie kolejna wiadomość o treści "jak zrobić podkreślenie za tytułami gadżetów", więc o to jest odpowiedź :)

Wiem, że najważniejsza informacja dla Was to to, gdzie te zmiany będą się odbywać, a więc w tym wypadku będzie to CSS i HTML.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod:



Jak zobaczycie, Wasz tytuł gadżetu został przekreślony, a teraz trzeba jakoś go "schować". W tym celu zapisujemy nasz arkusz CSS i przechodzimy do motyw - edytuj kod HTML.

2. Klikamy kursorem obojętnie jakie miejsce w kodzie i wybieramy ctrl+f. Pojawi nam się okno wyszukiwania, w które wklejamy:



Takich części kodu jest parę w szablonie - są one przy każdej sekcji odpowiadającej za dany gadżet i jego tytuł. Musimy tą część kodu zamienić na:



Jeśli nie wszystkie tytuły gadżetów nam się zamieniły, szukamy tej części kodu:



Zamieniamy ją na:



Efekt:


Czytaj dalej »

Szablon do pobrania za darmo - Mint Template

07.10.2017

Szablon Mint Template. Jest to darmowy szablon na Bloggera w odcieniach bieli i mięty. Utrzymany w minimalistycznej formie. Szablon można dostosować bez problemu do swoich potrzeb. Zmienić tło, kolory, fonty, dodawać i usuwać ikonki społecznościowe etc.


Info o szablonie


  • Szablon zawiera automatycznego skracania wpisów
  • W szablonie jest funkcja automatycznego dopasowania zdjęć we wpisie z pominięciem mniejszych 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 etc.
  • Ikony społecznościowe pod nagłówkiem 
  • 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 »

Jak szybko dodać etykiety do wpisów

27.09.2017


W dzisiejszym wpisie, pokażę Wam jak w szybki sposób, dodać etykiety do wielu wpisów jednocześnie. Będzie to krótka i bardzo szybka instrukcja, ale myślę, że komuś się to przyda :) Plusem tej instrukcji jest to, że nie wymaga ona bawienia się kodem, więc dla osób, które boją się coś wpisywać, wycinać, wstawiać do kodu naszego szablonu, będzie idealna. Wszystko ograniczać się będzie do zaplecza naszego bloga.

1. Przechodzimy do posty. Zaznaczamy wpisy, do których chcemy dodać wybraną etykietę. Możemy zaznaczyć tylko wybrane lub wszystkie.





















2. Klikamy na ikonkę etykiet i z listy wybieramy etykietę którą chcemy dodać do wpisów i gotowe. Etykieta została dodana do wybranych wpisów.



Czytaj dalej »

Trzy style dla górnej części bloga (nad nagłówkiem)

16.09.2017

Skoro możemy upiększać naszego bloga w każdym jego module, to czemu nie zadbać o górną część naszej strony, tą która zwykle nad nagłówkiem wieje pustką (no chyba, że ktoś ma menu na górze). Można dzięki niej nadać naszej stronie indywidualnego charakteru, a to wszystko za pomocą kodu CSS - no i w trzecim przypadku CSS+grafiki. Zaczynajmy!

Styl 1


1. Przechodzimy do motyw - dostosuj - zaawansowane- dodaj arkusz CSS i wklejamy kod:



solid - rodzaj podkreślenia
15px - grubość
#f8d7dd - kolor


Styl 2


2. Może paseczki? Nie ma problemu! Powtarzamy kroki z punktu 1, tylko tym razem wklejamy taki kod: 




Analiza kodu, taka sama jak w punkcie 1.


Styl 3


3. Powtarzamy kroki z punktu 1, w tym wypadku będzie taki kod:




background - kolor tła
url - link do grafiki
bottom - odstęp między grafiką, a nagłówkiem

Moja grafika ma wymiar 1600x240px (240 to wysokość, którą można dostosować do siebie, 1600 - szerokość, najniższa wartość, której przy tego typu grafice wypadałoby się trzymać)
Czytaj dalej »

Plany lekcji do pobrania za darmo

29.08.2017


Kolejny rok szkolny tuż za rogiem. Kolejny rok szkolny, w którym ja już nie uczestniczę, ale za to mam siostrę, która idzie właśnie do 6 klasy. Co to ma wspólnego z dzisiejszym wpisem? To ona, moja siostra, namówiła mnie do tego, abym plany lekcji stworzyła. Prawdę mówiąc nie miałam zamiaru się podejmować tego w tym roku, bo za dużo mam na głowię, ale skoro zaczęłam robić planu dla siostry to czemu i Wam nie miałabym dać? :)

Tak więc powstały 4 wersje, mniej niż w poprzednich latach, ale myślę, że również Wam się spodobają.

Plany lekcji są w formacie A4. Do pobrania zupełnie za darmo. W tym roku nie ma różnorodności jeśli chodzi o motywy. W tym roku postawiłam na paski, pokochałam paski w grafikach :)

Dajcie znać w komentarzach, który plan lekcji przypadł Wam do gustu :)


Pobierz plan


Pobierz plan


Pobierz plan


Pobierz plan
Czytaj dalej »

Czy warto pobierać graficzne darmówki?

26.08.2017


Graficzne darmówki - fonty, cliparty, patterny, tekstury, tapety, mockupy i wiele więcej. Można je zdobyć pobierając je ze stron, które oferują darmowe elementy graficzne, ale i nie tylko. Również można je zdobyć na płatnych stronach. Tak, dobrze czytacie, na płatnych platformach można zdobyć tzw. "graficzne darmówki". Dzisiejszy wpis, będzie odpowiedzią na często zadawane pytanie, które towarzyszyło mi podczas studiów: czy warto?

Pewnie się teraz zastanawiacie "Jak to? Darmowe grafiki na płatnych stronach?", niektóre serwisy oferują swoim subskrybentom takie prezenciki raz na jakiś czas. Wybierają spośród istniejących płatnych pakietów, te które uważają, że warto je dać na darmowe prezenty. Pewnie niektórzy z Was sobie pomyślą "Pewnie dają te, które nie schodzą" - powiem Wam, że macie po części racje, niektóre serwisy tak działają.

Kiedyś z takiego serwisu korzystałam - były darmowe pliki, do wykorzystania jak tylko dusza zapragnie, dziwne? Nie. Były to rzeczy, które za każdym razem jak wchodziłam na tę stronę, na stronie głównej były podpisane jako "wyprzedaż". Co jakiś czas o te parę dolarów obniżane, aż w końcu trafiło na darmówkę.

Można by dyskutować na temat tego czy to było fair czy nie. Jedni będą uważali, że nie, bo przecież, to że Wy jesteście jako subskrybenci i nie jednokrotnie przyjmujecie spam od danej strony na swojego maila zobowiązuje ich do tego, aby nie dawać Wam byle "g". Z drugiej strony, jeśli by rzucili ciekawy font za 100 dolarów, który schodzi jak świeże bułeczki to czy to by było fair wobec twórcy, że dano jego pracę na darmówkę i takim sposobem stracił parę ładnych sumek? No też nie. Ktoś włożył w to swój czas, umiejętności i ogrom pracy, aby taki font z efektem WOW stworzyć. Co jak co, ale font wcale nie jest tak łatwo stworzyć. Wiem coś o tym, bo sama swój font tworzyłam i jeszcze miałam z tego zaliczenie, które wbrew pozorom do najprzyjemniejszych nie należało, albo po prostu ja nie lubię tworzyć fontów :)

Są również strony, które na darmówki co jakiś czas rzucają tzw. hity. Można spotkać na nich fonty, cliparty, szablony na WP etc. które kosztują różnie, ale czas na pobieranie ich jest ograniczony. Na jednych stronach jest to tydzień, na drugich parę dni, a na innych parę godzin liczone od czasu wysłania newslettera. Jest to niewątpliwie wielka okazja na zdobycie ciekawych grafik lub fontów.

Tylko czy aby na pewno?

Skoro płatne rzeczy są udostępniane za darmo to znaczy, że można z nich korzystać do woli prawda? Są dwie strony medalu. Owszem, niektóre płatne grafiki, które są udostępniane później za darmo przez określony czas, mają licencję, która umożliwia nam korzystanie z danych plików dowolnie, gdzie chcemy i kiedy chcemy. Niestety, nie wszystkie. Niektóre z nich są "okrojone" tzn. autor fontu czy pakietu grafik stwierdził "ok, udostępnię w pakiecie darmówek swoją pracę, ale tylko na użytek własny". Znaczy to mniej więcej tyle, że możemy użyć jego pracy, ale tylko do własnych projektów, nie możemy tych projektów puszczać w obieg.

Złapała się na tym moja znajoma ze studiów, która poszukiwała elementów dekoracyjnych i fontów do tego, po prostu potrzebowała "na wczoraj" elementów z efektem watercolor. Na zajęciach nie było to możliwe, aby taki obrazek wykonać, więc sięgnęła po te płatne i nie strony z grafikami. Kiedy na jednej z płatnych stron znalazła idealne grafiki za darmo, po pobraniu w uwagach od autora było, że owszem może z nich korzystać, ale tylko na użytek własny, jeśli chce mieć swobodę używania tych grafik, to musi wykupić je za 30 dolarów. Kupiła, bo po co spędzać kolejne godziny na szukaniu czy przeciąganiu tego na następny dzień skoro projekt miał być "na wczoraj".

Inna sytuacja jaka towarzyszy darmowym grafikom, szczególnie kiedy dostajemy za darmo te płatne to rzucanie się na wszystko jak leci. Czasem naprawdę nie warto, bo coś zupełnie nie jest tego warte nawet za darmo. Wiem, co mówię, parę lat temu sama się rzucałam na wszystko jak leci, bo licencja, która pozwala wykorzystać je dowolnie, bo nie muszę wydawać na to pieniędzy i nie będzie mi szkoda, jeśli się okaże, że to jednak nie to. Zazwyczaj, w moich folderach pozostawało z tego nie wiele. Nie ma co się rzucać, lepiej poświęcić trochę czasu na rozeznanie się w tych plikach.

Takie rzucanie się na darmowe pliki, bez dokładnego rozeznania ma swoje minusy i nie mówię tutaj o sytuacji, kiedy chcemy pobrać grafikę do projektu, a okazuje się, że licencja na to nie pozwala. Mówię tutaj o sytuacji kiedy szykujemy się na pliki PNG, a tutaj mamy pliki AI, PSD lub EPS. Nie każdy ma możliwość otworzenia tych plików i wtedy z naszych upragnionych grafik nie mamy nic.

No chyba, że ktoś specjalnie wykupi sobie pakiet Adobe, aby pliki AI, PSD czy EPS otworzyć, chociaż EPS można otworzyć i w innych programach np. w najnowszej wersji GIMPa.

Powiem Wam teraz co naprawdę warto pobierać (dla posiadaczy PSa) i z czego warto korzystać (dla posiadaczy innych programów graficznych niż PS). Warto pobierać mockupy. Dzięki nim nasze prace będą się naprawdę super prezentować. Jest to wybawienie dla wszystkich tych, którzy chcą zaprezentować swój projekt dobrze, ale nie mają warunków do zrobienia zdjęć lub zastanawiają się jak najlepiej pokazać swoją stronę internetową. Dla tych osób, które nie posiadają programu ze stajni Adobe - warto korzystać z darmowych stron z mockupami, które oferują edytowanie naszego projektu online. Mimo wszystko zarówno w jednym i drugim przypadku, trzeba bardzo uważnie patrzeć co pobraliśmy/co edytujemy. Nie wszystkie mockupy są dobrze zrobione.

Jeśli chodzi o fonty, grafiki, patterny czy tekstury - warto i nie. Wszystko zależy od tego na co trafimy.

Czy warto pobierać graficzne darmówki?

Na to nie ma jednoznacznej odpowiedzi, jedni będą uważać, że tak inni, że nie. Jak ktoś usłyszy, że jakiś grafik kupił grafikę, to usłyszycie na pewno od wielu osób, że to niestosowane, tak nie powinno być. Z drugiej jednak strony, nie wszystko da się zrobić w programie graficznym. Nie raz trzeba zrobić coś manualnie i dopiero później poprawiać to w programie. Nie każdy też ma możliwość zrobienia czegoś manualnie. Po prostu nie ma odpowiednich narzędzi etc. Ja sama do jednego projektu byłam o krok od kupowania grafiki, bo jedna osoba z mojej rodziny zażyczyła sobie projekt graficzny z elementami linorytu, jednak w ostatniej chwili znalazłam miejsce, gdzie dany linoryt mogłam odbić, wiecie w domu farby drukarskiej, a tym bardziej prasy nie trzymam.

Na pewno darmowe grafiki są pomocne, na pewno są pomocne dla tych osób, które muszą/chcą stworzyć coś samemu, ale nie wiedzą jak dany element zrobić w danym programie graficznym.
Nie ma w tym nic złego. Nie każdy musi znać Photoshopa, Illustratora, GIMPa czy Inkscape.
Ważne tylko, aby uważnie czytać, co autor dodał w uwagach i jakie pliki pobieramy.
Czytaj dalej »

Jak zrobić animowane zdjęcie we wpisie

15.08.2017


W dzisiejszym wpisie pokażę Wam jak w łatwy sposób zrobić animowane zdjęcie we wpisie na Bloggerze. Nie jest to nic skomplikowanego, a wszystko będzie ograniczać się do programu graficznego (można posiadać najprostszy program jak PhotoScape lub GIMP - nie ma to naprawdę żadnego znaczenia na jakim programie będziecie pracować) oraz do edytora wpisu HTML.

1. Przygotuj dwa zdjęcia (mogą być te same i jedno np. z grafiką lub dwa różne)

2. Jeśli zdecydujemy się na to, aby jedno z naszych zdjęć było edytowane, to otwieramy sobie nasze zdjęcie w programie graficznym (ja otworzyłam je w PhotoScape). Edytujemy sobie dowolnie, wszystko zależy od Was.

3. wchodzimy w edycję wpisu i wybieramy HTML.



\4. Wklejamy kod:



5. Musimy uzupełnić podpisane miejsca odpowiednimi linkami - zdjęciami. Aby uzyskać link naszego zdjęcia trzeba je dodać na hosting np. ifotos.

6. Efekt (najedź na zdjęcie by sprawdzić):

Czytaj dalej »

8 zakładek do książki do pobrania za darmo

23.07.2017


Różne rzeczy udostępniałam na blogu do pobrania, jednak nigdy nie było zakładek do książek, a bardzo chciałam je kiedyś tutaj udostępnić. Jak można zauważyć - jak pomyślałam, tak zrobiłam. Stworzyłam 8 wersji zakładek do książek i mam pomysł na kolejne ;) Dajcie znać w komentarzach, które zakładki Wam przypadały najbardziej do gustu :)

Zakładki są przygotowane do druku w formacie pdf. Po przeniesieniu na dysk Google, wyświetlają się w dość kiepskiej jakości - nie ma co się martwić, dzięki temu wczytywanie ich nie trwa wieki. Po wydrukowaniu wszystko będzie w jak najlepszym porządku :)



Zakładka 1 Zakładka 2 Zakładka 3 Zakładka 4


Zakładka 5 Zakładka 6 Zakładka 7 Zakładka 8

Czytaj dalej »

Jak zmienić pager bloga na ikonki font awesome

10.07.2017


Jakiś czas temu na blogu pojawił się wpis jak zrobić pager bloga z ikonkami font awesome. W tym wpisie pokaże Wam jak zamienić pager bloga na ikonki font awesome - bez strona główna, starsze i nowsze wpisy, dzięki czemu uzyskamy minimalistyczny wygląd naszego pagera. Instrukcja jest prosta, ale niestety nie polubią jej osoby, które od "grzebania" w kodzie HTML uciekają. Instrukcja opiera się właśnie na "grzebaniu" w kodzie HTML.

Jak zrobić pager bloga z ikonkami font awesome

UWAGA! PRZED ROZPOCZĘCIEM JAKICHKOLWIEK ZMIAN NALEŻY ZROBIĆ KOPIĘ ZAPASOWĄ SZABLONU!

Jeśli nie macie u siebie na stronie ikonek font awesom to nad <head> musicie wkleić:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Przechodzimy do motyw - edytuj kod HTML
2. Zacznijmy od przycisku strona główna. Klikamy kursorem w pole z kodem i wybieramy na klawiaturze ctrl+f. Pokażę nam się okno wyszukiwania, w które wpisujemy: <data:homeMsg/>
Klikamy enter dwa razy, ponieważ interesuje nas druga sekcja odpowiadająca za pager.
















3. Fragment kodu, który jest zaznaczony na poniższym zdjęciu na czerwono usuwamy, a w jego miejsce wklejamy: <i class="fa fa-home" aria-hidden="true"></i> jeśli chcemy dodać rozmiar naszej ikonki to wklejamy taki kod: <i aria-hidden='true' class='fa fa-home fa-2x'/> - 2 można zmienić na dowolną liczbę.
















4. Zmieniamy starsze posty. Powtarzamy krok 2, ale tym razem wyszukujemy: <data:olderPageTitle/>. Następnie powtarzamy krok 3. Usuwamy <data:olderPageTitle/> a w jego miejsce wklejamy <i class="fa fa-chevron-right" aria-hidden="true"></i> lub <i aria-hidden='true' class='fa fa-chevron-right fa-2x'/>

5. Zmieniamy nowsze posty. Powtarzamy krok 2, wyszukując <data:newerPageTitle/>. Następnie powtarzamy krok 3 czyli w tym wypadku usuwamy <data:newerPageTitle/> a w jego miejsce wklejamy <i class="fa fa-chevron-left" aria-hidden='true'></i> lub <i aria-hidden='true' class='fa fa-chevron-left fa-2x'>


Efekt: 



Czytaj dalej »

Tapety na pulpit do pobrania za darmo

08.07.2017


Przeglądając ostatnio wpisy, które zostały opublikowane, zobaczyłam, że dawno nie było tapet do pobrania, więc stwierdziłam, że czas najwyższy to nadrobić. W dzisiejszym wpisie mam dla Was kolejną porcję tapet na pulpit do pobrania za darmo. Tapety są utrzymane w dość ciemnej kolorystyce z efektem watercolor.

Watercolor


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

Chillout



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


Live in the moment



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

Czytaj dalej »

Jak to było u mnie z tymi studiami

01.07.2017


Na początek powiem jedno - było fajnie, było ciekawie, było drogo - ale nie żałuje, było dużo stresu, było dużo pracy i mogłabym tak wymieniać bez końca. 

Zacznijmy od tego, że chodziłam do prywatnej szkoły artystycznej. Dla wielu osób już jest to ogromnym minusem, nie martwcie się, dla mnie też to był ogromny minus i musiałam przedyskutować tę sprawę z mamą - zależało mi na kierunku dziennym, a nie zaocznym (zaoczny był droższy od dziennego i program nauczania nie był tak obszerny), więc sama nie dałabym rady opłacić swojej edukacji i musiałam prosić o pomoc (nieocenioną pomoc) moją mamę, bo o ile łapałam zlecenia "dorywczo" przez różne portale i miałam na swoje zachcianki, tak na opłacenie swoich studiów już nie. 

Pewnie większość z Was zastanawia się głównie nad tym ile wynosi opłata za jeden semestr - i nie jest to nic dziwnego, każdy kto usłyszy, że uczyłam się prywatnie, pierwsze o co pyta to właśnie o to. Nie jest to również żadna tajemnica, więc mogę Wam zdradzić ile wyniosła mnie moja edukacja. Cena za jeden semestr to 1200 zł - na kierunku dziennym (grafika), zaocznie 1700 zł. Cena za semestr jest zależna od tego na jakim kierunku się uczycie (najtańszym kierunkiem była aranżacja wnętrz, a najdroższym projektowanie ubioru). 

Niestety, materiały potrzebne do pracy trzeba było sobie samemu zakupić, więc dodatkowe koszta w ciągu roku również były. Raz na semestr były rozdawane zestawy farb z podstawowymi kolorami oraz płótna, wiadomo, że później trzeba było już inwestować samemu, bo malarstwo było częściej niż raz w semestrze. 

Program nauczania głównie skupiał się na grafice i wszystkich elementach z nią związanych (jak np. podstawy DTP) oraz animacji. W tym momencie chce wspomnieć o tym, że na grafice nie ma nic o programowaniu czyli nie nauczycie się jak zaprogramować swoją stronę czy aplikację, ale jak zaprojektować stronę czy aplikację już tak. 

Były również tzw. "zapychacze" pod postacią rzeźby, fotografii i multimediów (kręcenie i obróbka filmów). 


Co nam oferowano za tę kwotę jaką płaciliśmy?

Nowy sprzęt w pracowni wyposażony o pełny pakiet Adobe, tablety graficzne, z których mogliśmy korzystać na zajęciach bez ograniczeń, oczywiście inne sprzęty przydatne na innych kierunkach czy przedmiotach oraz darmowe wyjścia na wystawy i warsztaty, profesjonalną kadrę, która jest nie do zastąpienia i która, potrafiła przekazać nam swoją wiedzę jak najlepiej.

Dodatkowym plusem było to, że osoby, które wcześniej nie miały nic wspólnego z grafiką (w naszej grupie było takich osób 2), mogły w szybkim tępię dogonić resztę grupy i nie mieć przy tym braków w wiedzy. Naprawdę nasi wykładowcy mieli dar do przekazywania wiedzy.

Oczywiście nie wszystko było idealnie, było parę zgrzytów, konkretnie między studentami (z naszego kierunku), a informatykami, nie raz miało się wrażenie, że robią nam po prostu na złość i to o co ich prosimy mają po prostu gdzieś. Niestety, były to na tyle istotne sprawy, że nie raz utrudniało nam pracę na zajęciach. W efekcie był taki okres czasu, gdzie korzystaliśmy tylko z jednej pracowni.


Jakie przedmioty wchodziły w skład zajęć?

Oczywiście grafika, ale oprócz tego mieliśmy również podstawy projektowania, animacja, multimedia, malarstwo, rysunek, historia sztuki, rzeźba i fotografia. Najwięcej było oczywiście grafiki. Po skończeniu swojej edukacji i po głębszym przemyśleniu wszystkiego, rzeźba była najbardziej bezsensownym przedmiotem jaki można było nam wrzucić. Nikt na nią nie chodził, nikt się do tego nie przykładał i każdy był zdania, że zamiast rzeźby mogli nam wrzucić więcej godzin grafiki lub animacji. Szczerze mówiąc miałam szczęście w nieszczęściu, bo przez mój stan zdrowia, byłam zwolniona m.in. z rzeźby. W sumie na rzeźbie byłam tylko 3 razy.


Czy trzeba coś już umieć?

Jeśli chodzi o rysowanie czy malowanie to tak. Jeśli chodzi o sferę typowo graficzną to jakieś podstawowe pojęcia (chociażby to jak włączyć komputer i jaki program do czego) również jest mile widziane.


Jak to jest z dyplomem? 

Normalnie broniłam dyplom jak na każdej innej uczelni. Nie pisałam co prawda pracy licencjackiej, ale tworzyłam plansze ze swoim projektem (w moim przypadku identyfikacja wizualna dla stadniny koni), którą później wiadomo - musiałam obronić. Mój dyplom (oraz każdej innej osoby) składał się z dwóch części - historia sztuki i obrona pracy kierunkowej.


Czy coś mi to dało?

Owszem dało, mam silne fundamenty wiedzy, które mogę poszerzać, bo wiecie grafika jak i inne kierunki artystyczne nie są stałe, cały czas się coś zmienia, cały czas wchodzi nowa moda, cały czas trzeba się uczyć wszystkiego, ale żeby wiedzieć jak wykorzystać te nowości to trzeba mieć jakiś fundament.

Jeśli miałabym wybierać jeszcze raz dalszą drogę swojej edukacji - nie wahałabym się ani sekundy, wybrałabym to samo. Nie żałuje wyrzeczeń jakie mi przy tym towarzyszyły, nie żałuje czasu jaki tam spędziłam.

Czytaj dalej »

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

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

Copyright © Szablon wykonany przez Blonparia