Kuvan kulmien pyöristys

[kuutamolla]

Kuva on mitoiltaan pikselintarkka (zzz x yyy) ja sen tulee säilyä sellaisena. Kuvan alareunan kulmat tulisi pyöristää (yläkulmat jäävät teräviksi). Voisinko saada joltakin ystävälliseltä taiturilta selvän reseptin moisen tekemiseen? Kuva tulee nettikäyttöön ja talletetaan lopuksi png-formaattiin. Olen jo käyttänyt runsaasti aikaa työstämisen täysin onnistumatta. Käytössä on Photoshop CS5. Kiitos!

[Mikael K.]

Minähän en ole moista tehnyt mutta onnistuisiko se layerien avulla? Eli valkoinen layer, jossa alakulmat on pyöristetty. Toinen mieleen tuleva vaihtoehto on, että sudit kulmat pyöreiksi jollakin sopivalla työkalulla. Jos et muuta keksi niin kokeile ainakin näitä.

[theinonen]

Kaikessa yksinkertaisuudessaan näin...

[Fixx]

Siitä riippumatta, tekeekö sen viime vaiheen maskilla vaiko pyyhekumilla, tuon pyöristyksen muodon joutuupi varmaan ellipsi-valintatyökalulla tekemään alussa. Siihen valintaan sitten lisätään muut tarvittava pinta-ala. Valmista "pyöristä kulmat" työkalua ei fotarissa ole.

[MacFinn]

Niin ja Freeway Pro tekee tuon ihan softassa mihin kuvaan tahansa. Annat haluamasi kulmat ja montako pistettä on pyöristys. Valitset julkaisumuodoksi sen png. Ei tarvii ronkkia sitä kuvatiedostoa.

[Esa66]

iPhone app, nimeltään PhotoGollage hoitelee tuon asian todella kivuttomasti
Edit, olikin alareunoista kyse, pahoitteluni

[kuutamolla]

Kiitos kaikille vastauksista --- mutta ei ihan auennut. Työkaluna on siis PS CS5 ja reseptiä (jota voisi seurata) kysytään.

[theinonen]

Joku muu joutuu neuvomaan miten alpha kanava toimii Photoshopissa, koska en ole itse tuota käyttänyt.

Yleisesti ottaen kuitenkin alpha kanavalla oleva musta-valkoinen kuva toimii maskina kuvalle, jossa valkoinen alue on näkyvä osa ja musta läpinäkyvä. Valkoisen ja mustan välissä oleva harmaa alue toimii osittaisena läpinäkyvyytenä.

[symbol]

http://lmgtfy.com/?q=photoshop+cs5+round+corners

[ZZ]

Jos kuvia on useita tai ne vaihtuvat aina kun pomo käskee kuvan vaihtamaan tai yht'äkkiä pitääkin pyöristää lisää kulmia, tekisin tuon ihan kiltisti CSS-tyyleillä. Joko jollain www-editorilla tai ihan vaan käsin kirjoittamalla. Pistä tyylitiedostoon seuraava koodi

Koodi: Valitse kaikki

img.rounded{
  -khtml-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;

  -khtml-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

ja anna pyöristettäville kuville luokka "rounded".

Koodi: Valitse kaikki

<img class="rounded" src="kuva.jpg" />

Bottom-leftin ja -rightin tilalle voi tietty laittaa top-right/left ja pyöristyksen määrää säätää numeroarvoa muuttamalla. Tämä on ns. kiva – ja oikea – tapa tehdä ulkoasuun liittyviä juttuja, kun ennen pitkää joku valopää sanoo, että "saiskos tota kulmaa vielä vähän enempi pyöreeks..."

Tuossa vielä parit linkit:
http://perishablepress.com/perfect-roun ... -with-css/
http://www.swedishfika.com/2010/03/19/r ... th-css3-2/

[Anghorn]

Miten musta tuntuu, että nyt ollaan jo aika kaukana alkuperäisen kysyjän ongelmasta.

[MacFinn]

Miten musta tuntuu, että nyt ollaan jo aika kaukana alkuperäisen kysyjän ongelmasta.

No ei minusta. Tässä on esitetty käytännössä kaksi tapaa pyöristää ne kulmat. Joko itse kuvaa muokkaamalla tai nettisivuja muokkaamalla. Minusta koodaamalla (tai siis www-editorilla kuten minä teen) saa paremman lopputuloksen, sillä kuvista ei tarvita montaa kopiota ja kuvan voi aina vaihtaa.

[barcoder]

Ihan hyvä käydä läpi erilaisia näkökulmia asiaan, ongelma tuon koodiratkaisun kanssa taitaa olla enemmänkin siinä että suurin osa webbi-sivuista pyörii nykyään jonkinlaisen julkaisujärjestelmän päällä. Noiden julkkareiden sisältöeditoreissa ei yleensä tavallinen kuolevainen pysty vaikuttamaan esim. CSS-koodiin lainkaan (ja useimmiten ihan hyvä ettei pystykään). Yleensä voi lisätä vain tekstiä ja viedä kuvia.

[theinonen]

Miten musta tuntuu, että nyt ollaan jo aika kaukana alkuperäisen kysyjän ongelmasta.

No ei minusta. Tässä on esitetty käytännössä kaksi tapaa pyöristää ne kulmat. Joko itse kuvaa muokkaamalla tai nettisivuja muokkaamalla. Minusta koodaamalla (tai siis www-editorilla kuten minä teen) saa paremman lopputuloksen, sillä kuvista ei tarvita montaa kopiota ja kuvan voi aina vaihtaa.

Tuo CSS homma vaikutti kyllä ihan näppärältä, mutta myös maskin voi aina käyttää uudestaan.

Esimerkiksi voin tehdä vektoripiirto-ohjelmalla sen maskin, vaikka käyttäen tietyn kokoista kuvaa apuna viitekuvana ja sitten käyttää sen aina myöhemmin uudestaan. Voin ladata uuden kuvan ja sitten vain yksinkertaisesti pudottaa sen vektoripiiroksen siihen maskiksi ja vaikka kuvakoko muuttuisi voin automaattisesti skaalata sen maskin peittämään koko kuva-alan.

Koko homman voi myös automatisoida pienellä skriptillä ja hoitaa vaikka koko kansiollinen kuvia kerralla ja tallentaa nuo muokatut kuvat omaan kansioonsa.