perjantai 14. maaliskuuta 2014

Kuvanmuokkausohjelmat / kuvaneditointiohjelmat

Päätin tehdä näistä ihan oman postauksen - kyseessä on nimittäin
melko laaja aihe. Kuten otsikosta huomaa, käsittelemme
tässä postauksessa kuvanmuokkauspaikkoja/-editointipaikkoja. Eli siis
netistä ladattavia & netissä käytettäviä ohjelmia, joilla voi muokata
kuvia.

Kaikki postauksessa esitellyt kuvanmuokkausohjelmat ovat
ilmaisia ainakin suurimmaksi osaksi & itse
kokeilemiani. Ainakin tietääkseni. :D

NETISTÄ LADATTAVIA:

 GIMP
- tosi paljon ominaisuuksia
- käyttö vaatii paljon opettelua & kärsivällisyyttä
- ehdottomasti näistä monipuolisin 
- bugii yllättävän paljon
- youtubesta löytyy paljon opetusvideoita
- mahdollisuus suomen kieleen

PAINT.NET
- muistuttaa ominaisuuksiltaan paljon Gimpiä
- mutta Gimpistä helpompi & typistetympi versio
- ominaisuuksia löytyy paljon
- suomenkielinen

PHOTOSCAPE
- paljon ominaisuuksia
- omalla koneellani aika hidas
- aluksi ehkä vaikea käyttää, mutta tähän tottuu nopeasti!
- kivoja ominaisuuksia, kuten helppo & laadukas gif-animaatioiden teko
- suomenkielinen

PICASA
- tosi helppo, nopea & kätevä
- ei paljon ominaisuuksia
- hyvä perusmuokkaukseen
- lifestyleblogini kuvat muokkaan yleensä aina vain tällä
- suomenkielinen

SUOSITTELUT YMS.
GIMP: Vaativalle & kokoneelle käyttäjälle
 PAINT.NET: Ei niin vaativalle ja kokeneelle, mutta laajat
muokkausominaisuudet haluavalle käyttäjälle
PHOTOSCAPE: Toiminnoilla leikittelyyn, soveltuu
kyllä myös hieman haastaviinkin operaatioihin
PICASA: Nopeutta & kätevyyttä haluavalle käyttäjälle,
jossa myös muutamia hauskoja efektejä, pääasiassa kuvien
valotuksen muokkaukseen (erinomainen siinä !!)

huom. suositteluni ovat omakohtaisia kokemuksistani johtuen.
mielipiteet ovat aina mielipiteitä, joten te saatatte olla hyvinkin
erimieltä totutellessanne yllä oleviin muokkausohjelmiin. 


NETISSÄ KÄYTETTÄVIÄ:

FOTOR
- helppo, lataa kuitenkin hitaasti
- mainio kollaaseissa!

IPICCY
- paljon toimintoja (tosin osa vaatii ilmaisen & nopean rekisteröinnin)
- todella kätevä & helppo editointiohjelma
- monet picmonkeyn maksullisiksi muuttuneista toiminnoista ipiccyssä
- jos haluan kuviini jotain extraa, mitä picasa ei tarjoa, teen muokkaukset täällä

PICMONKEY
 - paljon kivoja toimintoja, joista kivoimmat
kuitenkin harmillisesti maksullisia
- hyvin helppokäyttöinen
- suht hyvä kollaasien tekoon

PIXLR
- kolme eritasoista muokkausohjelmaa
- muokkausvaihtoehtoja laidasta laitaan
- voi valita kolmesta mieluisimman ohjelman omia tarpeita
ajatellen; vaativa, keskitaso & helppo 
- editor (haastavin) suomenkielinen

PIZAP
 - helppokäyttöinen ohjelma, jonka ominaisuuksilla
piristää omia kuvia
- toimintoja ei ole erityisen paljon, itse asiassa
niitä on aika vähän
- hauskoja, erilaisia toimintoja

 ***   

Siinä nyt pienet esittelyt editointiohjelmista, joita olen
käyttänyt (okei, olen käyttänyt monia muitakin, mutta
suurimman osan nimet ovat jääneet aivojeni syvimpään
lokeroihin/käyttöni oli hyvin pientä).

Toivottavasti tästä oli apua!

xoxo, iltsu

maanantai 10. maaliskuuta 2014

Lukijaksi liittyminen EI-BLOGGER -blogeihin

Netissä on paljon blogeja, eivätkä ne kaikki ole tehty Googlen Bloggeriin. On Indiedays-blogeja ja vaikka mitä muitakin blogeja, joihin ei voi liittyä perinteisesti Google-käyttäjäraadin lukijapalkin kautta. Se saattaa harmittaa, sillä jos oma blogi on bloggerissa ja suurin osa seuraamista blogeista päivittyy hallintapaneliin, voi olla turhauttavaa seurata blogia ilman, että uusista postauksista saa tiedon.


Onneksi Bloggerilla on tähänkin ratkaisu! Tämä toimii myös niissä tilanteissa, joissa lukijapalkit eivät suostu toimimaan.


1. Mene hallintapaneeliin.
2. Klikkaa lisää-kohtaa.
3. Lukemisto-ikkuna avautuu. Liitä punaisella ympäröityyn
kohtaan blogin linkki, jota haluat lukea.
4. Klikkaa kohtaa Lue. Nyt blogin uudet postaukset näkyvät
hallintapaneelissa!

  xoxo, iltsu

sunnuntai 9. maaliskuuta 2014

Toivepostaus: Blogikoodailun alkeet

Yritän kertoa käsiteltävät asiat mahdollisimman helposti ja lyhyesti, joten päätin jättää johdannon (jonka vain murto-osa tuppaa lukemaan) kokonaan väliin. Mennään siis suoraan asiaan.

Bloggerin blogeissa ulkoasua voi muokata kolmessa paikassa:
- Ulkoasussa
- Mallin suunnittelutyökalussa
- HTML-koodissa

Näistä suosittelen käyttämään Ulkoasua ja Mallin suunnittelutyökalua. Ulkoasussa kannattaa muokata gadgetien paikka, blogin nimi, faviconin liittäminen yms. perusjutut, mutta lähes kaikki koodit suosittelen lisäämään Mallin suunnittelutyökaluun.  

Tietysti on olemassa runsas joukko koodeja, joita Mallin suunnittelutyökaluunkaan ei voi lisätä, mutta peruskoodit se lukee sujuvasti. Niihin tapauksiin on tarkoitettu käyttää HTML-koodia. Alla onkin lista, miksen suosittele käyttämään sitä.

Miksi koodeja ei kannata lisätä blogin HTML-koodiin?
- Mallin suunnittelutyökalua käyttämällä pystytään minimoimaan mahdolliset riskit, joita HTML-koodiin sekaantuminen voi aiheuttaa. Pienikin väärä kirjain/numero väärässä kohdassa voi aiheuttaa suuren katastrofin, pahimmassa tapauksessa blogiisi ei enää pääse, vaan sivu näyttää kaikille varmasti tuttua tekstiä Error.
Kokemuksella voin sanoa, ettei HTML-koodiin kannata kajota ellei ole 101% varma, mitä on tekemässä. Kokeneena koodajaana HTML-koodausta voi tietysti kokeilla. Lisäksi Mallin suunnittelutyökalussa muokkaukset näkee hetkessä, toisin kuin HTML-koodissa. Ja vielä vika juttu: HTML-koodia käyttämällä koodit eivät todennäköisesti toimi enää, jos lisäät ne Mallin suunnittelutyökalun CSS-osioon. Kuten aiemmin mainitsinkin, on olemassa paljon koodeja, jotka eivät kuitenkaan käy CSS-osioon Mallin suunnittelutyökalussa. Ne käyvät vain HTML-koodiin. Jos olet vasta aloittelija, suosittelen jättämään HTML-koodauksen tulevaisuuteen.

KOODIEN LIITTÄMINEN BLOGIIN

Suurin osa tämän apublogin koodeista laitetaan Mallin suunnittelutyökaluun. Alla on kuvasarjaohje, mihin ja miten koodit liitetään sekä varmuuden vuoksi vielä sanallinen selitys.


Hallintapaneeli -> Blogin nimi -> Malli -> Mukauta -> Lisäasetukset -> CSS
Koodit liitetään kenttään, joka on ympyröity punaisella.   

Koodin jälkeen on hyvä painaa entteriä. Itse painan sitä aina kahdesti koodin jälkeen, jotta erilliset koodit erottuvat hyvin.


KOODIEN RAKENTEESTA

Koodeja on erilaisia, ja osaa niistä käytetään CSS:ään. Käydäänpä yleisten CSS-koodien rakenne läpi ja se, millaiset rakenteet kuuluvat HTML-koodin ja millaiset CSS:ään.


Yllä oleva kaappaus on HTML-koodista.  HTML-koodissa suurin osa koodeista on < > -merkkien väliin laitettuja tekstikoodeja. Nämä koodit eivät toimi CSS:ään laitettuna. Jotkut < > -merkkien väliin laitetut koodit toimivat, jos ne laitetaan JavaScriptinä Ulkoasun kautta. Muistakaa siis, että < > -rakenteiset koodit kuuluvat lähinnä vain HTML:ään. Itse en ole perehtynyt HTML-koodeihin, joten niiden rakenteesta en osaakaan muuta kertoa kuin vain sen, että ne alkavat <-merkillä ja päättyvät >-merkkiin.

CSS-koodien rakenne on yksinkertaisempi. Ainoa hankaluus on, että halutuille määreille tarvitaan koodikielelliset määreet. Se saattaa olla välillä pidempikin projekti. Itse tuskailin monta kuukautta yhden määreen kanssa, koska en tiennyt, mikä määre vastaa kyseistä määrettä koodikielellä. Koodailu onkin kuin uuden kielen opettelua.

Alla oleva koodi on navigaatiopalkin värin muuttamiseen kehitelty.

#navbar-iframe {  
background:#ffffff;
}

CSS-koodeissa on kolme tärkeää kohtaa:
1. Valitsin
2. Ominaisuus
3. Arvo

Näiden lisäksi tärkeässä osassa ovat myös aaltosulkeet { ja }.

Valitsin kertoo asian blogista, jota halutaan muuttaa / johon halutaan lisätä jotain. Valitsimen jälkeen tulee {-sulku. Navigaatiopalkin koodissa valitsin on navigaatiopalkki.
Valitsin voi olla myös muodossa .date-header eli valitsimessa on kiinni piste. Yhdyssanat erotetaan usein viivalla.
Ominaisuus kertoo kyseisestä blogin osasta asian, joka halutaan lisätä / jota halutaan muuttaa. Navigaatiopalkin koodissa Ominaisuus on background eli navigaatiopalkin väri. CSS-koodien koodikielellisiä vastineita juurikin Ominaisuus-osassa voi päätellä englanninkielisistä sanoista. Ominaisuuksia voi olla koodissa paljon! Ominaisuuden jälkeen tulee kaksoispiste :
Arvo voi kertoa värin, Ominaisuuden koon jne. Se siis kertoo jotain Ominaisuudesta. Arvon jälkeen tulee puolipiste ;
Kun koodi on valmis, painetaan kerran enteriä ja loppuun lisätään }-sulku.


JOS KOODI EI TOIMI... [ENSIAPUA]

1. Tarkista, että olet kopioinut koodin alusta loppuun. 
2. Kokeile muuttaa koodissa olleita arvoja. Jos arvo on esimerkiksi 10px, kokeile muuttaa arvo esimerkiksi -50px:iin ja katso, huomaatko muutosta.
3. Ethän ole poistanut esim. arvoa muuttaessasi kaksoispistettä jne.?
4. Kokeile, toimiiko blogissasi mikään koodi. Bloggerin bugit voivat aiheuttaa häiriöitä Mallin suunnittelutyökalussa. Lisäksi jos olet kajoontunut blogisi HTML-koodiin, Mallin suunnittelutyökaluun lisätyt koodit eivät enää välttämättä toimi.
5. Tarkista, sopiiko koodi blogisi mallille. Tämän blogin koodit ovat Simplelle, joten en takaa niiden toimivuutta muissa malleissa. Yleensä tämä ei kuitenkaan ole syypää, miksei koodi toimi. 
6. Lisäämäsi koodi voi olla myös ristiriidassa toisen koodin kanssa = toinen koodi kumoaa toisen toimivuuden. 

Ikävä kyllä kaikki koodit eivät toimi kaikissa blogeissa. Blogitkin ovat yksilöitä.


MUUTA MAHDOLLISESTI TÄRKEÄÄ

Jos haluttua määrettä ei osaa muuttaa koodikieleksi, kannattaa hyödyntää muita koodeja. Esimerkiksi tässä blogissa on iso liuta koodeja, joissa on paljon erilaisia Valitsimia ja Ominaisuuksia. Koodikieltä oppii vain harjoittelemalla, kuten vaikkapa englantia tai mandariinikiinaa. Kukaan ei ole seppä syntyessään, ja Harjoittelu tekee mestarin -sanontaan on oikeasti uskominen. Googlettaminen on suotavaa, jos apua kaipaa. Nykyään googlessa on lähes kaikki. Google Kääntäjäkin voi olla avain hakusessa olleeseen määreeseen, nimimerkillä kokemusta on :-D

Toivottavasti tämä postaus avasi edes vähän koodikielestä!

Jos jokin jäi askarruttamaan, kysykää ihmeessä.

xoxo, iltsu

sunnuntai 16. helmikuuta 2014

Toivepostaus: Kivat varjostukset kuville

Se olisi ensimmäisen toivepostauksen vuoro! Toivepostauksia voi kommentoida aina tähän postaukseen. Mutta siis asiaan! Tässä postauksessa käsitellään kuvien varjostuksia. Jos mitään ei blogissa muuteta, kuvissa on usein valmiina varjostukset. Ne eivät ole kuitenkaan erityisen kauniit. Onneksi on olemassa erilaisia vaihtoehtoja saada blogiin näyttävät ja siistit varjot.

Postauksessa olevalla koodilla saa aikaan tällaiset varjostukset (siis jos koodin lukuja ei muuta):

 (kuva ei ole oma otokseni, linkki siihen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO66SCfjP9CY7ELSNymvYfC9l7sxhYnnbN4UH9GD0t9d0MUXpKyphItu6nCBLmDh7V_gY5ng6M6LWyYQXbsDMHLGXsZ3UKaiKTf9ziANIRBI6v8gk-I7j8TgNUrGfL3Wn2sv0MYw-xg/s1600/image554.jpg)

Jos haluat yllä olevan kuvan kaltaiset varjostukset, mene Malli -> Mukauta -> Lisäasetukset -> Lisää CSS ja liitä alla oleva koodi sinne:

.post-body img, .post-body .tr-caption-container {
padding: 0px;
border: none;
background: transparent;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .8);
}

Kuten aina, koodista värjättyjä lukuja voit muuttaa mieleisesi mukaan. 
Siniseksi värjättyä lukua muuttamalla voit muuttaa varjon suuruutta. Kokeile siihen vaikka lukua 100 :D
Punaiseksi värjättyä lukua muuttamalla voit muuttaa varjon tummuutta. Siihen vaikuttavat vain luvut 1-9. Mieluinen tummuus selviää vain kokeilemalla.

***

 Teitä on tullut jostain kummasta ihan kamalasta lisää, kiitos siitä! Ja kiitos myös palautteestanne - sitä on aina niin mukava saada ja lukea! Mutta tosiaan, toivepostauksia saa laitella postauksen alussa linkittämääni postaukseen. Olisi nimittäin huippua toteutella sitä, mitä te toivotte! Kohta menee 30 lukijan raja rikki - mahtavuutta!

 xoxo iltsu

lauantai 1. helmikuuta 2014

Kuvat blogiin Flickrin kautta ilman ärsyttävää Shadow Gallery Boxia

Hui, tänä vuonna ei ole tullut vielä yhtään apupostausta, joten taitaakin olla jo korkea aika laittaa lyyti kirjoittamaan... Tällä kertaa neuvon, miten kuvat saa Flickrin kautta blogiin ilman ärsyttävää "mustaaboxia", "kehystä" tai "shadow gallery boxia" (kaikki nimitykset ovat siis alla olevalle kuvannäyttötavalle):

muis

Flickrin uudistusten myötä kuvan vieminen Flickrin kautta blogiin näyttää blogissa tuolta. Uusi näyttötapa siis näyttää lukijan halutessa kaikki bloggaajan flickr-gallerian kuvat suoraan blogissa sekä Flickrin logon ynnä muut pienet jutut kuvan alareunassa hiiren vietäessä kuvan päälle. Jos et halua kuvista tuollaisia, noudata postauksessa olevia ohjeita. Ensin kerron kuitenkin, miksi kuvat kannattaa ladata Flickrin kautta:

1. Flickriin pääsee Googlen tilitiedoilla - sinun ei siis tarvitse luoda Yahoo-tunnuksia Flickriä käyttäessäsi.
2. Kuvien lataaminen on helppoa ja nopeaa. 
3. Tilaa on paljon.
4. Kuvien laatu ei kärsi.
5. Kuvien väleistä tulee automaattisesti pienemmät.
+ monta muuta asiaa! :-)


JA SE OHJE ILMAN ÄRSYTTÄVÄÄ SHADOW GALLERY BOXIA 
 (samalla neuvo Flickrin kautta kuvan lataamiseen)


1. Mene Flickriin. Klikkaa kohtaa "Upload"


2. Klikkaa kohtaa "Choose photos and videos". Sitten vain valitset kuvat koneeltasi.

  
3. Pääset alla olevan näköiseen paikkaan. Jos haluat kuvasi yksityiseksi, valitse yläpalkista All ja klikkaa vasemmassa palkissa olevaa "Owner settings" -kohtaa. Valitse sieltä "Visible to everyone" ja sen alta "Only you". Sitten vain klikkaat "Upload Photos" -kohtaa.


4. Kun kuvasi on latautunut, klikkaa sitä. Klikkaa sen jälkeen puhekuplan vieressä olevaa nuolta, josta aukeaa valkoinen kuvassa näkyvä laatikko. Nyt tulee tärkeä osa tätä ohjetta! Sinun täytyy valita kuvassa punaisella ympäröity kohta eli HTML. Sinisellä ympäröidystä kohdasta suosittelen valitsemaan Originalin, eli kuvan alkuperäiskoon (muuta koko haluamaksesi vaikka Paintissa). Vihreällä ympäröity kohta on kuvan HTML-koodi, joka sinun tulee liittää postauksesi HTML-koodiin.


5. Sitten vain menet tekemään uutta postausta, ja klikkaat "Luo"-kohdan (minulla Compose, koska käytän bloggerin englanninkielistä versiota) vieressä olevaa kohtaa "HTML". Liitä sinne kopioimasi kuvan HTML-koodi (kuvassa sinisellä ympäröity). Jos haluat kirjoittaa kuvan alle, suosittelen painamaan koodin jälkeen enteriä ja lisäämään ainakin kaksi <br /> -tunnistetta, jotka ovat siis enter-lyöntejä blogitekstissä. Ilman niitä et välttämättä voi kirjoittaa postaukseesi.



 6. Sitten vain lisäät kaikki haluamasi kuvat postauksen HTML-koodiin ja tadaa, kuvat ovat blogissasi huippulaatuisina ja ilman Shadow Gallery Boxia! 

********************************

Jos teillä on jotain toivepostauksia / kysyttävää koodailusta yms., kommentoikaa
postaustoiveenne ihmeessä tähän postaukseen! Alan toteuttelemaan piakoin
postaustoiveita, joita on tullut vasta muutama.

xoxo iltsu