Stefan Bremerin näyttely

Olimme 9.8.2019 Stefan Bremerin näyttelyssä Veturitallilla. Näyttely sisälsi paljon upeita kuvia ja saimmekin tehtäväksi valita niistä kolme, ja kertoa valinnoista.

Valkoinen viiva. Intian Valtameri.
Sarjasta Horisontti 2016



Ensimmäisenä meidän piti valita teos joka kuvastaa jollain tapaa itseään. Mielestäni omalla kohdallani se oli ylläoleva teos. Olen tyyliltäni synkkä ja luonteeltani rauhallinen, viihdyn rauhassa ja olen usein hiljainen. Samoja ajatuksia ylläoleva teos herätti, siksi se on tässä edustettuna.


Kirkko ja risti. Beninin maaseutu.
Sarjasta Afrikka 2002



Toisen teoksen valintaan saimme ohjeen että sen tulee olla puhutteleva, sellainen jonka haluaisi esitellä jollekkin toiselle. Itselläni se on ehdottomasti ylläoleva teos. Teoksessa puoleensa vetävin ja puhuttelevin ominaisuus on ehdottomasti sen värit ja suuri risti elementti. Kaikista huoneen teoksista meinin ensimmäisenä juuri tämän luokse sen erottuvuuden takia, läheltä näki vielä paremmin upeat yksityiskohdat.


Kyyneleet junan ikkunassa, Puola
Sarjasta Holokausti, Auschwitch 2018



Kolmanneksi ja samalla viimeiseksi teokseksi tuli valita sellainen, joka yllätti jollain tapaa. Itselläni syy tämän teoksen valintaan on melko henkilökohtainen mutta haluan sen kuitenkin tuoda esiin. Yllätyin siitä miten näinkin yksinkertainen kuva voi saada niin voimakkaita tunteita esiin. Jäin tätä teosta pitemmäksi aikaa katsomaan ja aloin melkein itkemään. Jostain syystä se tuo mielee ajat jolloin minua syrjittiin, kiusattiin.


10 adjektiivia kuvaamaan teoksen tunnelmaa ja siitä heränneitä tunteita:
- Surullinen
- Pimeä
- Synkkä
- Tyhjä
- Kylmä
- Lämmin
- Terävä
- Yksinkertainen
- Vahva
- Haikea

Videoprojekti

Ensimmäiseen videoprojektiin asiakkaamme suunnitteli teräsrakennetöiden videota, jonka minä ja työparini kuvaisimme ja toteuttaisimme.

Toinen asiakastyömme liittyy työturvallisuus sovellukseen. Olemme työparini kanssa toteuttamassa kuutta pienempää videota, jotka ovat tulossa sovellukseen. Jaoimme videot niin, että kuvaamme ne kaikki yhdessä ja editoimme kumpikin kolme niistä.

Alta löytyy dokumentoitu materiaali molempiin projekteihin liittyen, koska kuvasimme usein yhtäaikaa molempiin projekteihin materiaalia ja projektit kulkivat aika käsi kädessä.


Kamerat joilla kuvaamme videoprojektin

Kävimme juttelemassa asiakkaamme kanssa ja kirjoitimme muistiin otsikot ja erinnäisiä huomioita koskien videoprojektia

Kirjoitimme ylös kysymyksiä ja lauseita videon jokaisen otsikon alle

Käytämme videoprojektin editoimiseen Adobe Premiere Pro:ta, josta olen kirjoittanut tähän projektiin liittyen ohjeita muita varten
Katso myös: Adobe Premiere Pro -ohjeita

Kävimme aamulla asiakkaamme luona neuvottelemassa videoprojektista ja hän kirjoitti huomioita jokaisen otsikon alle, mitä videoissa tulisi olla.



Aina kun olimme käyneet kuvaamassa, siirsimme sen jälkeen kaikki tiedostot koneelle. Järjestimme uudet klipit aina kansioittain, jotta ne olisi helppo liittää jatkossa erinnäisiin videoihin.

Seuraavaksi kuvia kuvausympäristöstä












Pistimme kalenteriin ylös päiviä, jolloin olimme kuvaamassa ja milloin editoimme videoita


Jaoimme pienemmät videot kahteen osaan, joita editoimme (Minä editoin kolme videota, työparini editoi loput kolme. Teräsrakennetöiden videon editoimme yhdessä)

Minä editoin:
✩ Siltanosturi -video
✩ Kaasupullot (Asetyleeni -ja happipullot) -video
✩ Yleinen siisteys -video

Katsottuani editoimani videot läpi, kirjoitin muistiin asioita joita tulisi korjata tai poistaa

Lopuksi jaoimme asiakkaallemme editoimamme videot ja hän jakoi ne siitä sitten eteenpäin

Miten tehdä blogikuvista samanlevyisiä?

Ärsyttääkö, kun blogikuvat eivät ole keskenään yhtä leveitä? Tässä helpot ohjeet siihen, miten saisit niistä yhtä leveät. :)



1. Mene blogisi hallintasivulle ja valitse vasemmalta kohta "Teema"




2. Valitse seuraavaksi kohta "Muokkaa"


3. Valitse vasemmalta kohta "Lisäasetukset"


4. Tämän jälkeen kelaa avautuva luettelo ihan alas, ja valitse kohta "Lisää CSS"


5. Eteesi avautuu CSS laatikko, johon kopioi seuraava koodinpätkä:

.post-body img { width:680px; height:auto;}

Huom! Blogikuviesi tulee olla asetuksessa "Alkuperäinen koko" jotta koodi toimii!

Huom! Voit muuttaa arvoa "width:680px" siihen leveyteen jonka itse tahdot (Esim width:500px)
Älä unohda kommentoida koodiasi! Katso myös: Miten kommentoida koodia blogissa?

Miten laittaa banneri blogiin?

Banneri eli kansikuva on kiva luova lisä blogiin! Tässä helpot ohjeet bannerin asettamiseen



1. Tee kuva jollain ohjelmalla (Esimerkiksi photoshop, illustrator...) tehden kuvasta yhtä leveä kuin kuin blogisi on.

Pääset katsomaan blogisi leveyden seuraavasti:

✩ Mene hallintasivultasi kohtaan "Teema"



✩ Jatka painamalla "Muokkaa"


✩ Etsi tämän jälkeen vasemmasta sivusarakkeesta leveyteen viittaava kohta (Vaihtelee blogeittain)

Esimerkki 1

Esimerkki 2

✩ Seuraavaksi näet blogisi leveyden (Ympyröity arvo on se joka meitä kiinnostaa)


2. Kun kuva on valmis ja exportattu, mene blogisi hallintasivulle ja valitse kohta "Ulkoasu"


3. Etsi kohta "Otsikko" ja jatka painamalla kynää "Otsikko" -kohdan oikeasta reunasta


4. Seuraavaksi eteesi avautuu luukku johon banneri laitetaan. Valitse kuva (Choose file) koneeltasi ja varmista että "mainospaikkana" on 'Otsikon ja kuvauksen tilalla'!


5. Kun banneri on valittuna ja "mainospaikka" on oikea, jatka painamalla "Tallenna" (Muista myös painaa "Tallenna asettelu"!)


6. Nyt sinulla pitäisi olla toimiva banneri blogissasi :)

Miten tehdä blogitekstien kuville mouseover?

Mouseover kuville siis tarkoittaa efektiä kuvien päälle, kuten oman blogini mustavalkoiseksi muuttuvat kuvat.


1. Mene hallintasivusi kautta "Teema" -osioon


2. Tämän jälkeen valitse kohta "Muokkaa"


3. Valitse vasemmasta sarakkeesta kohta "Lisäasetukset"


4. Tämän jälkeen kelaa lista alas ja valitse kohta "Lisää CSS"


5. Eteesi avautuu CSS laatikko, johon valitset jonkun alla olevista koodeista (Vain yksi!)

Huom. Efekti tulee ainoastaan blogipostaustesi kuviin! 

mustavalkoinen liukuvärjäys (Omassa blogissani on tämä + tässä kuvaesimerkki, vie hiiri päälle)

.post-body img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Vaalea liukuvärjäys

.post-body img:hover {
opacity:0.2;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
opacity:1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;

Blurraus efekti

.post-body img:hover {
filter: blur(5px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: blur(0px);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Seepia efekti

.post-body img:hover {
filter: sepia(1);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: sepia(0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Värikylläisyyden korostaminen

.post-body img:hover {
filter: saturate(200%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

.post-body img{
filter: saturate(100%);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}

6. Kun olet liittänyt jonkun ylläolevista koodeista CSS laatikkoosi, paina "Käytä blogissa" -painiketta ja tämän jälkeen blogipostaustesi kuvissa tulisi olla efekti :) Älä unohda kommentoida CSS Koodia! Katso myös: Miten kommentoida koodia blogissa?

Miten tehdä dropbar -menu blogiin?

Ohjeet dropbar -menun tekemiseen alapuolella :) Dropbar -menulla tarkoitetaan siis avautuvaa valikkoa, josta päästään muille sivuille linkkien avulla.

HUOM! Koodia täytyy itse osata käsitellä enkä suosittele tätä ihan aloittelijoille! Oman blogin säädöt on tunnettava hyvin jotta koodin saa toimimaan!



1. Mene blogisi hallintasivulle ja valitse vasemmalta kohta "Ulkoasu"

 

2. Valitse otsikon alapuolella olevasta sarakkeesta "Lisää gadget" (Vaihtelee teemoittain)


3. Valitse listasta "Html/JavaScript"


4. Eteesi aukeaa tyhjä Html/JavaScrpt laatikko


Liitä siihen alla oleva koodi (Huom. Olen itse customoinut koodin tehden siitä mahdollisimman yksinkertaisen, koodiin täytyy kuitenkin itse kirjoittaa linkkejä ja otsikoita. Olen capslockannut kaikki itse kirjoitettavat kohdat. Olen myös kappalejaoittanut dropbarin osat joten jos haluat enemmän kohtia, kopioit vain edellisen kappaleen viimeiseksi)

<ul id='cssnav'>
<li class="active"><a href='TÄHÄN TULEE BLOGISI ETUSIVUN OSOITE'>
Etusivu</a></li>
<li class="sub"><a href='TÄHÄN TULEE ENSIMMÄISEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 1</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>

<li><a href='TÄHÄN TULEE TOISEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 2</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>

<li><a href='TÄHÄN TULEE KOLMANNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 3</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>

<li><a href='TÄHÄN TULEE NELJÄNNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 4</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>

<li><a href='TÄHÄN TULEE VIIDENNEN DROPBARIN MAHDOLLINEN LINKKI'>DROPBAR OTSIKKO 5</a>
<ul>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
<li><a href='LINKKI'>OTSIKKO</a></li>
</ul></li>

5. Kun olet lisännyt ylläolevan koodin javascript laatikkoon, ja tehnyt siitä mieleisesi, tulee sinun tallentaa se ja siirtyä "Teema" -sivulle hallintasivulta


6. Tämän jälkeen valitse kohta "Muokkaa"


7. Valitse vasemmasta sarakkeesta kohta "Lisäasetukset"


8. Tämän jälkeen kelaa avautuva lista ihan alas ja valitse kohta "Lisää CSS"


9. Eteesi avautuu CSS laatikko, lisää siihen alla oleva koodinpätkä.
Huom. Älä unohda kommentoida! Lue myös: Miten kommentoida koodia blogissa?

#cssnav {
margin: 0px 0 0 -10px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

10. Nyt sinulla pitäisi olla toimiva dropbar -menu :)