Plany lekcji do pobrania za darmo

grafika grafika do pobrania plany lekcji

Plany lekcji do pobrania za darmo

Wielkimi krokami zbliża się rok szkolny. Dla uczniów jest to czas kupowania książek, zeszytów, mazaków i czego jeszcze dusza zapragnie. Razem ze mną mieszka jeden uczeń - moja siostra, która w tym roku idzie do 4 klasy podstawowej. Wiadomo, że oprócz takich oczywistych rzeczy jak książki potrzebny jest również plan lekcji. Każdego roku, pod koniec wakacji robię kilka projektów planów lekcji dla mojej siostry, dlatego postanowiłam, że również i Wam udostępnię te grafiki całkowicie za darmo. Plany lekcji są gotowe do druku i możecie je pobierać o każdej porze dnia i nocy.

Czytaj dalej

Retusz twarzy w Photoscape

grafika PhotoScape

Retusz twarzy w Photoscape

Jest sporo osób, które zastanawiają się jak zrobić retusz twarzy bez użycia Photoshopa czy GIMPa. Szukają prostych i szybkich rozwiązań. Takim rozwiązaniem jest niepozorny PhotoScape - darmowy, bardzo prosty w obsłudze program.

Większość z nas myśli, że w takim prostym programie do obróbki zdjęć retusz jest niemożliwy, ale nic bardziej mylnego! Jest możliwy, może nie uzyskamy efektu wow jak przy użyciu Photoshopa czy GIMPa, ale efekt jest zadowalający, jeśli chodzi o prosty retusz jak np. wygładzenie skóry, pozbycie się niedoskonałości.

1. Usuwanie niedoskonałości. Otwieramy Photoscape - wybieramy edytor - wybieramy zdjęcie do retuszu - przechodzimy do Tools i w tej zakładce wybieramy opcje Clone Stamp. Pod Tools mamy możliwe do wyboru wielkości naszego stempla.

2. Po najechaniu na zdjęcie widzimy plusik w kółeczku. Klikamy nim obok "czystej" skóry koło naszej niedoskonałości i klikamy na naszą skazę, którą chcemy usunąć.

Możemy sobie pomóc używając lupek pod zdjęciem + - przybliża - - oddala. Przesuwając kwadracik w prawym dolnym rogu, możemy ustawić odpowiedni fragment zdjęcia do edycji.

3. Wybieramy teraz opcje pieprzyk i rozjaśniamy wszystkie widoczne pieprzyki.

4. Wybieramy teraz effect brush, a następnie inteligentne rozmycie (wygładzanie skóry). Wybieramy rozmiar naszego pędzla i "malujemy" po naszej twarzy.

5. Znowu wybieramy effect brush, a następnie przyciemnij. Wybieramy rozmiar naszego pędzla i przyciemniamy nasze rzęsy, brwi czy co tam chcemy.

6. Wybieramy effect brush, a następnie pogłęb, wybieramy rozmiar naszego pędzla i poprawiamy kolor naszych ust.

7. Zapisujemy nasze zdjęcie. Tak jak wspomniałam - efekt może nie będzie powalający, ponieważ PhotoScape nadaję się tylko do skromnej obórki zdjęć, ale zawsze to jakaś alternatywa :) Efekt końcowy:

Czytaj dalej

Wysuwane ikonki społecznościowe

CSS Tutorial

Wysuwane ikonki społecznościowe

Kolejna instrukcja z cyklu "najczęściej szukane instrukcje na bloga". W ostatnim czasie dostaje dużo pytań na temat tego jak wykonać dany element na bloga. Pierwsze miejsce (zresztą do tej pory) zajmują maile z pytaniem jak zrobić wielokolorowe menu jak na blogu My Pink Plum, a co zajmuje drugie miejsce? Maile z pytaniem jak zrobić wysuwane ikonki społecznościowe jak na blogu My pastel garden. Nie jest to nic trudnego, więc podjęłam się wykonania tej instrukcji i mam nadzieje, że sobie z tym poradzicie.

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

2. W gadżecie HTML/JavaScript wklejamy kod, który musimy uzupełnić według własnych potrzeb i klikamy zapisz.

<div class='widget HTML' id='IKONKI'>
<h2 class='title'></h2>
<div class='widget-content'>
<center><a href="#/"><img alt="TEKST ALTERNATYWNY" class="centered" src="LINK DO PIERWSZEGO OBRAZKA"/></a><br />
<a href="LINK"><img alt="TEKST ALTERNATYWNY" class="centered" src="LINK DO IKONKI" / /></a><br/>
<a href="LINK"><img alt="TEKST ALTERNATYWNY" class="centered" src="LINK DO IKONKI" / /></a><br />
<a href="LINK"><img alt="TEKST ALTERNATYWNY" class="centered" src="LINK DO IKONKI" / /></a><br />
<a href="LINK"><img alt="TEKST ALTERNATYWNY" class="centered" src="LINK DO IKONKI" / /></a><center></center></center>
</div></div>

Tekst alternatywny - tutaj możemy wpisać nazwę dla danej ikonki, w razie jakby nam obrazek zniknął, pojawi się tekst, który wpisaliśmy.
Link do pierwszego obrazka - to co ma się pojawiać jako pierwsze np. Zaobserwuj mnie, tutaj mnie znajdziesz etc.
Link - link do strony, na którą ma nas odsyłać po kliknięciu.
Link do ikonki - tutaj wklejamy link do naszej ikonki. Żeby uzyskać taki link musimy wrzucić nasz obrazek na serwis hostingujący np. tinypic.

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy kod CSS podany poniżej.

#IKONKI .widget-content {
height: 35px;
overflow: hidden;
transition: height .8s ease;
-webkit-transition: height .7s ease;
-moz-transition: height .7s ease;
-o-transition: height .7s ease;
-ms-transition: height .7s ease;
}
#IKONKI:hover .widget-content {
height: 180px;
}
#IKONKI { padding: 1px 4px 3px 2px ;}

Schowanie ikonek
Długość pola ikonek po rozwinięciu 

4. Efekt końcowy:

Ps. Jak możecie zauważyć, na moim blogu zawitał system komentarzy Disqus. Jest on pod wieloma względami lepszy od bloggerowego systemu komentarzy, ale o tym kiedy indziej. Teraz zajmiemy się czymś innym, a mianowicie jak komentować w Disqusie jeśli nie mamy konta. Disqus jest bardzo popularny, ale nadal potrafi stwarzać problem, dlatego mała instrukcja dla osób, które nie wiedzą jak skomentować w Disqusie i nie mają konta.

Czytaj dalej

Jak wstawić loader w bloggerze

HTML Tutorial

Jak wstawić loader w bloggerze

Szykowałam dla Was całkiem inną instrukcje, ale mam tak dużo maili i wiadomości na facebooku w sprawie tego serduszka, które pokazuje się przy ładowaniu strony, że postanowiłam zrobić instrukcje dotyczącą tej animacji. Nie jest to nic trudnego, ale będziemy pracować w HTMLu. Wiem, że dużo osób nie lubi grzebania w kodzie, ale postaram się to wszystko tak wytłumaczyć, aby nie stanowiło problemów.

ZRÓB KOPIĘ ZAPASOWĄ SZABLONU! 

1. Przechodzimy szablon - edytuj kod HTML

2. Klikamy kursorem w dowolne miejsce w kodzie i wybieramy ctrl + f (Mac - cmd + f)

3. W okienku wyszukiwania wpisujemy </body> i klikamy enter.

4. Tuż NAD </body> wklejamy kod:

<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

5. Tuż POD </body> wklej kod: 

<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>

6. Wyszukujemy teraz </head>  i POD nim wklejamy kod: 

<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>

7. Teraz wyszukujemy ]]></b:skin> i NAD wklej jeden z loaderów podanych poniżej: 

LOADER 1

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/481_zpsqlciwygn.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 2

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/30_zpsroojtwzl.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 3

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/133_zpsvhrtutyx.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 4

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/134_zpseesb4zcf.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 5

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/143_zpssgto7uft.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 6

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/369_zps6u1ufg54.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 7

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/477_zpsqsh9ukjn.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

LOADER 8

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99999;
}
#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(http://i1291.photobucket.com/albums/b555/parma9/728_zpswnuib1wg.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

Czytaj dalej

Dodawanie własnej grafiki do zasobu programu Photoscape

grafika PhotoScape

Dodawanie własnej grafiki do zasobu programu Photoscape

Zaniedbałam instrukcje dotyczące Photoscapea, ale postaram się to nadrobić, bo odkopałam maile ze starej skrzynki e-mailowej, na której mam pełno wiadomości z instrukcjami jakie wysyłałam kiedyś dziewczynom, więc czemu ich nie odświeżyć i pokazać na blogu? Te osoby, które korzystają z Photoscape, wiedzą, że program ma foldery ze swoimi grafikami, które możemy dodać do zdjęć za pomocą dwóch kliknięć, ale (zresztą tak jak w większości tego typu programów) może do zasobów Photoscapea dodać własne grafiki. W jakim celu? Ułatwi nam to znacznie pracę, nie będziemy musieli przeszukiwać komputera, aby znaleźć plik jaki chcemy dodać do zdjęcia, bo wszystko będzie w folderze, w którym umieściliśmy nasze grafiki.

1. Przygotuj grafiki, które chcesz dodać do zasobów programu

2. Przejdź do mój komputer - dysk C 

3. Wybieramy pliki programów lub program files - na Windows 8 folder Photoscape mam w plikach programów, ale w Windows 7 już w program files. Musicie sprawdzić gdzie u Was znajduje się folder Photoscape.

4. Klikamy na folder Photoscape, a następnie na icon.

5. Wybieramy folder, w którym chcemy umieścić naszą grafikę i wklejamy nasze skopiowane grafiki. W moim przypadku jest to folder logo i w nim będę umieszczać moje własne loga.

6. Otwieramy Photoscape - edytuj - obiekt - ikonka z serduszkiem - szukamy folderu, do którego wklejaliśmy nasze grafiki i...ta dam! Mamy swoje własne grafiki w Photoscape.

Czytaj dalej