Meillä on merkinnät Treehouse-mainokselle sivun yläosassa, mutta meillä on joitain muotoilutöitä. Aloitamme itse puupiirroksesta.
Ajattelemme, että vektorin ja tulostuksen käyttäminen SVG: nä voi olla hienoa, koska se näyttää terävältä ja tiedostokoko on pieni. Katsokaa, kuinka yritän saada Illustratorissa mukavan puhtaan version kaikesta vektorista ja epäonnistuu lopulta. Toistaiseksi päätämme unohtaa sen ja tehdä siitä vain kuvan.
Osoittautuu, Treehouse ei enää käytä tuotemerkkiä enää, joten minun on päivitettävä se joka tapauksessa pian, ja käytän ehdottomasti aikaa tehdä siitä SVG, vaikka minun pitäisi piirtää se uudelleen.
Toistaiseksi teemme PNG: n ja pudotamme sen CSS-taustalla olevaan suunnitteluun. Me pienennämme sen alaspäin taustakoon kanssa (vaikka sekoitin itseni jälleen kerran käyttämällä prosenttiosuuksia - muista, että kun käytät prosenttiosuutta, se on osittaisen elementin prosenttiosuus eikä prosenttiosuus itse kuvan koosta).
Saamme väritys, mitoitus ja sijoitus valmiiksi. Viimeinen vaihe on saada se toimimaan reagoivassa suunnittelussa.