Jak zrobić logo w PicMonkey

21.02.2016


Każdy dobrze wie, że logo jest najważniejsze jeśli chcemy kreować swój wizerunek w sieci. Mówi się, że logo + łatwa do zapamiętania nazwa strony to połowa sukcesu. Mamy już nazwę strony, to teraz potrzebne nam jest logo, ale jak je zrobić skoro nie wiemy jak, a programy takie jak Illustrator, GIMP, Photoshop czy inne programy graficzne, gdzie planowaliśmy zrobić logo odpadają z różnych powodów? Z pomocą przychodzą nam darmowe edytory online. Na przykładzie jednego z nich, pokażę Wam jak szybko można zrobić własne logo.

1. Wchodzimy na stronę PicMonkey i wybieramy "Design".

2. Następnie wybieramy narzędzie do tworzenia kształtów


3. Teraz wszystko będzie się odbywać, dzięki narzędziu, które wybraliśmy w punkcie 2. Tworzenie logo, nie będzie polegać na niczym innym jak na łączeniu ze sobą różnych kształtów, które oferuje nam PicMonkey. Musimy jednak pamiętać, że niektóre kategorie mogą posiadać znaczek korony, a to oznacza, że w darmowej wersji nie mamy do nich dostępu.


3a. Kiedy mam przygotowaną podstawę, mogę zacząć dodawać inne elementy, jakie chce mieć na swoim logo i dostosować je pod siebie.


4. Potrzebujemy trochę wyobraźni, aby stworzyć coś bardziej rozbudowanego/kreatywnego. Skoro już wiemy, jakie mamy dostępne kształty i jak możemy je edytować, pokażę wam jak stworzyć bardziej rozbudowane logo jak np. pingwin czy królik.

PINGWIN


Łącząc te wszystkie elementy, które są zaznaczone w ramce na powyższym zdjęciu, dopasowując je odpowiednio za pomocą kontrolek przekształceń i zmieniając im kolor wyjdzie nam logo w kształcie takiego pingwina:


Nie robiłam zrzutów ekranów z każdego mojego kroku, ponieważ byłoby to bez sensu. Korzystając z wiedzy podanej na początku dacie radę to zrobić. Tutaj chodziło mi bardziej o to, aby wam pokazać jakich użyć kształtów i jak skopiować dany element.

Dodatkowo, możemy dodać napis do naszego logo.


KRÓLIK


Do stworzenia królika będą potrzebne nam tylko dwa elementy, co widać na załączonym obrazku oraz jedna zmiana koloru - oko.

APARAT


Jak widzicie znowu będą potrzebne nam tylko 2 elementy. Przy tworzeniu obiektywu, musimy pamiętać o tym, aby nadać kolor obrysu.
Wszystko prezentuje się tak:

Jak zapisać naszą pracę?


Na koniec mam dla Was do pobrania paczkę z logo, które pojawiły się w tym tutorialu


Czytaj dalej »

Jak edytować wygląd komentarzy - Blogger

18.02.2016


Ostatnio zdałam sobie sprawę, że prawie każdy (główny) element bloga został przerobiony, niektóre nawet po kilka razy. Niestety, zabrakło jednego - komentarzy. Tak, komentarze również da się zmienić. Owszem, co raz więcej jest blogów, które mają wprowadzony system komentowania Disqus, ale jak wiadomo są zwolennicy tego systemu oraz przeciwnicy, którzy nadal są wierni systemowi komentowania Blogger i ten wpis jest skierowany do nich.

Tak jakby ktoś zapomniał o tym, jak wyglądają komentarze Bloggera przed modyfikacją:


Skoro już sobie przypomnieliśmy, to w takim razie nadszedł czas na to, aby powiedzieć sobie jakie selektory będą nam potrzebne. Oto one:

.comment-header - nagłówek komentarzy z nazwą komentującego, datą i godziną
.comments h4 - nagłówek komentarzy, nad wszystkimi komentarzami pod wpisem
.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 komentarzami, po najechaniu na nie myszką
.avatar-image-container - avatar komentarzy (możemy ustalić obramowanie)
.comments .avatar-image-container,  .comments .avatar-image-container img - zdjęcie w avatarze

Wszystkie te selektory znajdziecie również TUTAJ

Skoro poznaliśmy selektory, jakie będą nam potrzebne do zmienienia wyglądu naszych komentarzy, to teraz możemy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS. Już wiemy jak dopisywać dany styl do selektora, więc zaczynamy naszą zabawę.

Zaczniemy od zmiany nagłówka z nazwą komentującego, datą i godziną, ja rozpisałam to sobie tak:
.comment-header {
font-family: Arial;
letter-spacing: 2px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;}
.comment-header a:link {color: #c27ba0;}
.comment-header a:visited {color: #c27ba0;}
Jak widzicie dodatkowo dodałam kolor dla linków i dla linków odwiedzonych. Musimy pamiętać, że jeśli chcemy zmienić kolor nazwy użytkownika, daty i godziny to musimy dopisać .comment-header a:link i .comment-header a:visited

Efekt:

Kolejna rzecz to nagłówek komentarzy, nad wszystkimi komentarzami, czyli w moim przypadku "2 komentarze".  Kod rozpisałam sobie tak:
.comments h4 {background: #c27ba0;
text-align: center;
padding: 10px;
color: #fff;
text-transform: uppercase
font-size: 20px;
letter-sapcing: 2px;
font-family: Arial;
font-weight: 700;}
Efekt:

Teraz zajmiemy się selektorem .comment p, który odpowiada za wszystkie komentarze, ja rozpisałam go sobie tak:
.comment p {
color: #e06666;
font-size: 15px;
font-family: Arial;
}
Efekt:

Nadszedł czas na zmienienie wyglądu przycisków odpowiedz i usuń. Kody rozpisałam tak:
.comments .comment .comment-actions a, .comments .thread-toggle a {
background: #c27ba0;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover {
background: #e06666;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;
border-radius: 10px;}

Efekt:

Przyszedł czas na avatary. Kod rozpisałam tak:
.avatar-image-container {margin-top: 20px;
margin-left: -20px;
border: 3px solid #e06666 !important;
shadow: 5px 5px 2px #FFFFFF;
}
.comments .avatar-image-container{
width: 55px;
max-height: 55px;
}
.comments .avatar-image-container img{
max-width: 55px;
height: 55px;
}


Jak widzicie, nie potrzeba nie wiadomo jak dużej znajomości CSSa, żeby uzyskać swój własny wygląd dla komentarzy. Mam nadzieję, że komuś ten wpis pomoże przy tworzeniu własnego szablonu :)
Czytaj dalej »

Poznajemy Photoshopa część 1

14.02.2016


Jakiś czas temu na facebooku pytałam się Was, czy chcecie wpisy na temat Photoshopa i Illustratora, napisaliście, że chcecie, więc dziś pierwszy post z serii "poznajemy Photoshopa". Dlaczego postanowiłam zrobić wpisy o Photoshopie  w taki sposób, a nie tak jak to robię w przypadku GIMPa (same instrukcje na dany efekt)? Ponieważ, z GIMPem większość z nas miała styczność w podstawówce/gimnazjum/liceum i jakieś podstawy posiada. Photoshopa zazwyczaj musimy uczyć się sami i niektórzy się zniechęcają do niego przez to, że nie mają podstaw. Oczywiście zadbam o to, żeby były instrukcje na zrobienie różnych efektów w Photoshopie, ale to wszystko w swoim czasie - zaczynamy!

Tworzenie nowego pliku
Najprostsza rzecz na świecie, czyli tworzenie nowego pliku. Możemy zrobić to na dwa sposoby: wybierając plik - nowy lub używając skrótu klawiszowego ctrl + n (PC) lub cmd + n (Mac)


Obracanie obrazu 
Co zrobić jak chcemy mieć obraz w poziomie a mamy go w pionie? Kolejna prosta rzecz - musimy wybrać obraz - obracanie obrazu.


Okno narzędzi 
Musimy pamiętać o tym, że jeśli chcemy wysunąć więcej opcji, które ryją się pod danym narzędziem, musimy przytrzymać lewy przycisk myszy na narzędziu.



Okno warstw
Okno warstw jest nam wszystkim znane z GIMPa. To w Photoshopie, za wiele się od niego nie różni na pierwszy rzut oka.


Otwieranie innych okien 
Żeby otworzyć więcej okien, które mogą nam się przydać np. typografia lub historia należy wybrać okno.


Usuwanie naszych postępów 
Do tego możemy użyć skrótu klawiszowego alt+ctrl+z lub wybrać edycja - krok do tyłu.



Na początek chciałam Wam przedstawić najprostsze rzeczy. Nie chciałam dawać wszystkich informacji na raz, ponieważ mogłoby to Was zniechęcić. Jeśli jednak chcecie aby w następnej części pojawiło się więcej informacji, to dawajcie znać w komentarzu, piszcie co Was najbardziej interesuje, a ja się do Was dostosuje :)
Czytaj dalej »

Szablon na Bloggera - Ms. mint brown do pobrania za darmo

09.02.2016


Wiem, że długo żadnego szablonu nie było, ale w końcu zebrałam się w sobie i zrobiłam :)

Szablon Ms. mint brown 

  • Kolorystyka: biel, mięta i brąz
  • Baza: Simple (prosty)
  • Układ: prawo/jedno kolumnowy - szablon na stronie głównej jest prawo-kolumnowy, po przejściu do wpisu, jest jedno-kolumnowy.
  • Na stronie głównej ukryta została data wpisu oraz stopka - pojawiają się dopiero po przejściu do wpisu. 
  • Najlepszy rozmiar nagłówka na tego bloga to: 400x136px 
Dodana jest instrukcja do tego szablonu, proszę ją przeczytać przed instalacją, aby uniknąć problemów. 



Czytaj dalej »

Jak zrobić graficzny pager bloga czyli zastępujemy strona główna/nowsze, starsze wpisy grafiką

08.02.2016


Wszyscy dobrze wiemy jak wygląda pager bloggera przed modyfikacją. Jest on bardzo tradycyjny i niczym nie zachwyca. Jednak można go zmienić i dodać mu tego czegoś na parę sposobów np. za pomocą font awesome lub możemy pobawić się trochę dłużej i zmienić w pager numeryczny (kiedyś o tym wspomnę). Dzisiaj chce Wam przedstawić jeden z tych sposobów, które pozwolą nam w prosty sposób odmienić nasz pager bloga. Będziemy zamieniać tradycyjny pager na graficzny.

1. Zrób kopię zapasową szablonu, ponieważ będziemy pracowali na kodzie HTML i istnieje ryzyko, że coś nam nie wyjdzie. Kopia pozwoli nam na wgranie ponownie nieuszkodzonego szablonu. Szablon - utwórz/przywróć kopię zapasową - pobierz pełny szablon.

2. Wybieramy szablon - edytuj kod HTML 
3. Klikamy kursorem obojętnie w jakie miejsce w kodzie i wybieramy ctrl + f lub cmd + f (Mac). Powinno pojawić nam się takie okienko:

4. Wyszukujemy <div class='blog-pager' id='blog-pager'> . W kodzie są dwa takie elementy, interesuje nas drugi, czyli musimy enter kliknąć dwa razy. Pod wyszukanym fragmentem pojawi nam się taka część kodu:


5. Teraz, musimy przygotować sobie grafiki, które będą widniały na naszym pagerze bloga i przesłać je na Tinypic lub Photobucket, aby uzyskać link do grafiki.
6. Teraz będziemy podmieniać kod, na link z ikonkami.

Przykład: 

<data:newerPageTitle/> - nowsze posty. Usuwamy tą część kodu, a zamiast niej wstawiamy: <img src="LINK OBRAZKA" />


Wszystko ma wyglądać tak:



Zapisujemy szablon. Efekt końcowy:



Na koniec mam dla Was 4 zestawy przycisków do pagera, które są do pobrania za darmo.



Grafiki są mojego autorstwa, więc proszę o pobieranie ich na użytek własny i o nieudostępnianie im osobom 3. Jeśli chcecie podać dalej dane grafiki, to proszę o odsyłanie osób 3 do tego wpisu.
Czytaj dalej »

Jak zrobić datę w kółku za pomocą CSS

04.02.2016


Jak zapewne wiecie, wygląd oraz położenie daty możemy modyfikować dowolnie za pomocą kodów CSS oraz HTML lub za pomocą samego CSS. Jakiś czas temu robiłam wpis o tym, jak zrobić datę wpisu w chorągiewce, więc teraz nadszedł czas na wpis, w którym dowiecie się jak zrobić datę wpisu w kółku za pomocą CSS i nie tylko w szablonie Awesome inc. (rewelacja), ale również w szablonie Simple (prostym) (Kody z jakimi miałam styczność na zrobienie daty w kółku, działały tylko na szablonie Rewelacja, w szablonie Prostym był z danym kodem problem i dużo osób zgłaszało błąd).

1. Wybieramy: Szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy poniższy kod: (dla szablonu Simple (prosty))
.date-header span {
background-color: #ddd;
text-transform: uppercase;
text-align:center;
color: #ffffff;height:47px;
width:47px;
padding-top: 10px;padding-bottom: 2px;padding-right: 5px;padding-left: 5px;margin-right: 10px;margin-top: 10px;font-weight: 700;
float:left;
font-family: Arial;
font-size:17px;
letter-spacing: 1px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

2a. Wklejamy poniższy kod: (dla szablonu Awesome inc. (rewelacja))
.date-header span {
background-color: #000;
text-transform: uppercase;
text-align:center;
color: #ffffff;
height:47px;
width:47px;
margin: -30px 10px 10px -60px;font-weight: 700;
float:left;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;}

Czcionkę i wielkość daty w szablonie Awesome inc. ustawiamy w zakładce "Nagłówek z datą" 

Wszystkie wartości pogrubione i zaznaczone na kolorowo są zmienne. Analiza kodów:

Kolor tła daty
Kolor czcionki 
Wysokość 
Szerokość 
Górny margines wewnętrzny 
Dolny margines wewnętrzny 
Prawy margines wewnętrzny 
Lewy margines wewnętrzny 
Margines prawy
Margines górny
Marginesy 
Rodzaj czcionki 
Wielkość czcionki
Odstęp między literami/cyframi 

Czytaj dalej »

MałgoLINKI - podsumowanie stycznia

02.02.2016


Pierwsza połowa stycznia strasznie mi się dłużyła, druga zleciała bardzo szybko i bardzo się z tego powodu cieszę, bo to był ciężki miesiąc. Moje życie w styczniu kręciło się wokół zaliczeń (pierwszy tydzień lutego również taki będzie) - wiadomo semestr się kończy, więc trzeba ostro brać się do pracy. Jedynce co mogę powiedzieć, to to, że najbardziej jestem zadowolona z projektu okładek książek, z rysunku oraz projektu kalendarza - te trzy rzeczy najlepiej zaliczyłam w styczniu i bardzo mnie to cieszy, a najbardziej cieszy mnie rysunek, z którym męczyłam się 4 godziny i już nie miałam siły się na to patrzeć.

Powyżej są wspomniane prace, które były robione na zaliczenie, a teraz to na co wszyscy czekamy czyli styczniowe LINKI! 

  1. Kreator scen online - czyli tworzenie obrazków (takich jak na początku wpisu) za pomocą paru kliknięć. 
  2. Bardzo fajny edytor zdjęć online 
  3. Raumrot - darmowy bank zdjęć 
  4. 5 pokój to inspirujący blog, na którym znajdziemy oryginalne pomysły DIY dla domu oraz bardzo ciekawe pomysły na wnętrza. 
  5. Font, który mnie zauroczył
  6. Amerykańskie parki narodowe oczami Stephena Wilkesa
Ostatnio na blogu:
Opublikowanych wpisów: 8
Statystyka: 






Czytaj dalej »