sunnuntai 21. syyskuuta 2014

maanantai 15. syyskuuta 2014

Kansi harjoitus


Mainos harjoitus

Olen huomioinut minkä resoluutioisija kuvien piti olla. Ja vaihtanut kuvat cmyk väreiksi. Olen ottanut huomioon brändin myös. Lähin tekemään mainosta hakemalla tuotteen kuvan tekijän sivuilta ja tuotteen tekijän logon myös. muutin resot ja värit cmykiksi. Sijoitin kuvat sopivasti ja kirjoitin tekstit. Laittaisin tämän pelaaja lehteen koska sieltä tämän mediakortti on otettu.

sunnuntai 14. syyskuuta 2014

tutoriaali bandan pää



 Nyt opetan kuinka teet hienon sarja kuva bandan pään adobe illustratorilla.

Ensimmäinen asia mitä tehdään on, että otamme ellipse työkalun ja teemme ympyrän.(ellipsen pika näppäin on L)
Sitten muotoillaan se pään muotoiseksi direct selektionilla(A) klikkaamalla kaksi kertaa ympyrän ala pisteestä.

Sitten valitse ympyrä selektion toolilla(V) ja kopioi(Ctrl ja C). Sitten painat Ctrl ja V.
Tästä tulee korva. Tee kaksi kopiota korvan sisä puoli ja ulkopuoli. käänä kopioita hieman slektion toolilla ottamalla korvien neliön kulmasta kiini silloinkun tulee nuolet molempiin suuntiin kaarevasti.(voit tehdä toisen kopion valmiksi käänetystä kopiosta) SIttenkun olet saanut tehtyä korvan niin oikea klikkaa isompaa ja arrange send to back. pienemmälle send to backward.
OK nyt ollaan tehty toinen niin väritetään se. Oikealla on sellainen työkalu kuin gradiant.
Selection toolilla napauta isompaa korvaa ja gradianttia sitten paina.Alla on isomman ja pienemmän gradiant asetukset.
                                                           ISOMMAN
                                                                 Pienemmän



Nyt painat shiftiä pohjassa ja selctionilla eka jompaa kumpaa korvan palloa ja sit toista. Sitkun molemmat ovat valittuna kopioi ctrl ja c. Kopio ctrl ja v. Sittenkun on kaksi saman näköistä korvaa siinä paperilla niin mene object sieltä transform,reflekt. Reflektistä vertical ja laitat korvan kuvan tavalla oikeaan paikkaan sit send to back.

Valitse pää pallo ja gradiant asetukset on taas alla :)

Sit on silmien vuoro. piirä ympyrä ellips työkalulla ja venytä sitä kuvan tavalla ja väritys on taas gradiant asetukset taas alla




Sit teet sen pallon sisälle toisen samalla värillä millä eka mutta vaihdat angel asetuksen 90.

Sitten piirät äskösen pallon sisälle melkein saman kokoisen pallon ja värjäät sen  valkoiseksi

Selectionilla painat valkoista palloa ja ctrl ja c. Sit ctrl ja F koska haluamme kopioida valkoisen pallon päälle toisen jotta saamme pienennetty helposti shiftiä pohjassa pitämällä silmän jonka värin saa päättää itse.
Tee ellipsillä pienipallo silmän sisälle jonka väri on itse määritettävissä



Lisää silmän siniseen värilliseen osaan valkoisja pienijä palloja

Sit shifti pohjassa kaikki pallot valintaan ja ctrl C ja ctrl V.  Kopioidulle silmälle sam kuin korvaa kääntäessä.PS. kannattaa ennen kopiointia kun kaikki silmän pallot on valittu niin groupata ne object ja group.


Sit nenä. Tee pieni ympyrä ja ja venytä kuvan nenän  muotoiseksi direct selection toolilla. väritys taas gradiant.



Sit nenän päälle tummenus. Tee kuvan mukainen pallo ellipsillä ja muotoile direct toolilla(A) alempi osa nenän kanssa yhteisen muotoiseksi. tummennus saa olla nenän päällä koska oikea klikkaa nenää kun se on valittuna  ja bring to front.sama silmillä. Väri mikä nenälle tulee gradiant.


Suun vuoro. Suu tehään laittamalla kaksi vähän soikeaa palloa päällekkäin ja pathfinder. laita pathfinderissä minus front.

Aseta suu nenän alle kuvan tavalla.

Posket. Tee ympyrän muotoiset pallot ja gradiant. Siirä poski suun alle ja  suulle bring to front.


Näyttää vähän vahvalta jep. Mennään työkaluun transparency.
 Sielä vaihda normal multiply ja opacity 50%. Kopiot  posken ja pistät toisen suun osan alle.

Ääriviivojen poisto. Ota selection tooli ja vedä vasen nappi pohjassa koko työn ylemmästä vasemmasta nurkasta oikean alempaan. Koko pää pitäisi olla valittuna niin ylhäällä on kaksi valintaa ota oikean puoleinen


Taustan värjäys. Ota Rectangle tool(M) ja vasemmasta ylä nurkasta oikeaan ala nurkkaan. Tässä gradian asetukset joita itse käytän ja paina sit bring to back.




Lähde: https://www.youtube.com/watch?v=_6UbccGKfKk                         https://www.youtube.com/watchv=COX_gL2P2Pg&src_vid=_6UbccGKfKk&feature=iv&annotation_id=annotation_1563005389
















perjantai 12. syyskuuta 2014

css top 20 parametrit

1.background-color
Vaihtaa taustan väriä sen mukaan minkä väri koodin pistät.
background-color:#ff0000

2.font size
Vaihtaa tekstin fontti kokoa
<p style="font-size:20px;">This text is using a font size of 20 pixels.</p>

3.relative positioning
Voit päättää minne esim jokin teksti menee. Esim meneekö reunaan muista vai keskelle
<p>moro</p>
<div style="position:relative;left:50px;background-color:yellow;width:90px;">
Tämä on keskellä.
</div>

<p>moro</p>

4.layers
Voit laittaa asioita päällekkäin
<div style="background-color:red;width:80px;height:100px;position:relative;top:10px;left:80px;z-index:2;">
</div>
<div style="background-color:yellow;width:80px;height:100px;position:relative;top:-60px;left:35px;z-index:1;">

</div>

5.font-family
Laitat fontteja siltä varalta jos joku selain ei tunnista jotain fonttia
<p style="font-family:georgia,garamond,serif;">

6.Text-shadow
määrittää tekstille varjon
h1{
  text-shadow: 4px 4px 6px red    
  }


6.Empty-cells
Määrittää näytettäänkö tyhjät lokerot
table {
   empty-cells: hide, show, inherit; 
   }

7.volume
Jos sivulla on musiikkia tämä määrittää kuinka kovalla se on
h1{
  volume: 50;}


8.outline
Määrittää reunukset
p { 
  outline: thick solid red   
  }


9.margin
siirtää koko teksti laattikkoa
p {
      padding-top: 50px;       (ylä 50px)
       padding-bottom: 50px;       (ala 50px)
       padding-right: 50px;       (oikea 50px)
  padding-left: 50px;       (vasen 50px)
  }


10.boarder
Voi tehä laattikon tekstin ympärille
div.styled {
     border:2px dotted #ff0000;
     }
   <div class="styled">


11.white-space
määritettään rivin vaihto
p {
      white-space: nowrap, normal, pre, inherit;
  }


12.float
määrittää onko teksti oikealla vai vasemalla
h1{
  float: left  
  }


13.padding
Siirtää tekstiä laatikon sisällä
p {
      padding-top: 50px;       
       padding-bottom: 50px;       
       padding-right: 50px;    
  padding-left: 50px;       
  }


14.color
määrittää taustan tai fontin tekstin
h1{
  color: red;
  color: #ff0000;

      }

15.font variant
pystyt pistään tekstiin esim joka sanan ekan kirjaimen isoksi.
<p style="font-variant:small-caps;">This Text Is Using Small Caps.</p>

16.wildth
Määrittää jonkin objektin tai tekstin leveyden
 width: 20%;

17.height
Määrittäää jonkin objektin tai tekstiin korkeuden

18.position
Määrittää objektin tai tekstin asettamis tavan. esim kuva voidaan laittaa liikkumaan mukana vaikka rullaat sivua.
- position: stati, absolute, fixed,relative;

19word-spacink
Määrittää valkoisen alueen kirjainten väliin
- word-spacing: normal | length;

20.word-wrap
Sallii pitkien tekstien pakollisen rivin vaihdon
 word-wrap: normal | break-word;









maanantai 8. syyskuuta 2014

sunnuntai 7. syyskuuta 2014

Mitä opin?

Kaikki asiat mitä tuli tunnilla olivat suunnilleen uutta. Opin esim juurikin html koodaamisesta hieman enemmän ja kuinka tarkkaa se on. Eli tuntien alussa en tienyt html koodaamisesta oikeastaan mitään ja nyt osaan vähäsen.