Tuote-grafiikka 6 Tekniikat kuvien lisäämiseksi

Web-suunnittelijat ovat kehittyneet hyvin moitteettomiksi markkinointitekniikoilla. Sivun sisällön houkutteleminen on aina hyvä, mutta kävijöiden tarttumalla huomiota suosivat kuvat ovat suosituin median muoto. He eivät vaadi äänikuvia, kuten demovideoita, ja ne voivat nopeasti välittää tärkeitä tietoja muutamassa sekunnissa. Se voi tuntua helpolta, mutta on joitakin merkittäviä tekniikoita informatiivisten kuvien rakentamiseen verkkosivuilla.

Näitä ovat esimerkiksi tunnusmerkit, lähikuvat, hintavertailut ja muut minuuttitiedot. Web-suunnittelijat voivat käyttää tietokonegrafiikkaa uusien sovellusten, ohjelmistojen, videopelien tai monien muiden tuotteiden mallinnukseen! Vaikka useimmiten näette näitä tekniikoita, joita käytetään eri tekniikan aloilla.

Tutustu alla oleviin ideoihin, joissa tarjoamme paitsi vinkkejä mutta todellisia esimerkkejä kauniista tuotteen grafiikoista, jotka on täynnä hyvää tietoa.

1. Laajenna sisältöä

Informatiivisia kuvia ei pitäisi käyttää hyvän web-sisällön sijasta. Sen sijaan käytä kuvia laajentaaksesi avainkohtia ja havainnollistaa niitä selvästi vierailijoillesi. Yksi parhaista tavoista tehdä tämä on pienen demon rakentaminen tärkeiden alueiden korostamiseksi opetusohjelmasta. Muutaman informatiivisen grafiikan ja kuvakaappausten avulla on helpompi pitää lukijan mielenkiinto läpi jokaisen vaiheen.

Kun yrität näyttää ohjelmiston opetusohjelman (kuten Photoshop-opetusohjelman), se voi olla vaikeaa välittää viestin kirjoitettuun tekstiin. Vierailijat laskeutuvat artikkeliin ja alkavat välittömästi alitajuisesti arvioida materiaalia toisen sekunnin murto-osassa. Web-suunnittelijan seinällä on upea opetusohjelma CSS3: n pyöristettyjen kuvien rakentamiseen. Tähän sisältyy joitakin tarroja ja lähikuvia laukaisusta.

Alkuperäisessä artikkelisivulla tämä kuva lisää paljon selkeämmän kuvan pääsi kohti sitä, mitä luot. Kirjoittaja on lisännyt pienen demo-linkin, mutta miksi ei myöskään sisälly demo-kuvia? Olet paljon todennäköisempää kiinnittää huomion asianmukaisesti merkittyyn demotilaan.

Yrittää Vältä kuvien lisäämistä vain mediasisällön vuoksi postitse. Jos voit selittää menetelmiäsi tai perustelujasi ilman kuvaa, aloita tästä ensin. Vain sen jälkeen, kun katsot takaisin web-kopioitasi, kannattaa harkita uudelleen joitakin kohtia yksityiskohtaisessa kuvakuvassa. Erityisesti saatat löytää a opetusohjelma vaatii enemmän visuaalisia vihjeitä, koska monimutkaisuus kasvaa. Kaksi esimerkkiä voivat olla verkkosivuston tietokannan tai taulukon tietokannan rakentaminen.

2. Korosta merkittäviä ominaisuuksia

Koska jokaisella ohjelmistolla / teknologialla on niin paljon ominaisuuksia, on lähes mahdotonta selittää jokaista bittiä. Ei vain tämä, mutta on erittäin epätodennäköistä, että kävijät kiinnostavat lukemaan 20 + etikettejä tietokuvassa. Pidä mielenkiintoisimpia ominaisuuksia ja käytä tarroja selittämään hieman perusteellisempaa.

Kun kirjoitat Web-kopion tarran sisällöstä välttää tylsää kieltä aina kun mahdollista. Jos kävijät katsovat sovelluksen uusinta versiota, he eivät ehkä välitä paljon värimallin muutoksista. Miten tämä vaikuttaa heidän päivittäiseen työnkulkuunsa? Sen sijaan ehkä korostaa, mikä on heille hyödyllistä, kuten uusi käyttöliittymäpaneeli tai monikäyttöinen yhteys. Näiden pitäisi yleensä olla abstrakteja ominaisuuksia jota et näe juuri “näköinen” tuotteessa.

Tällaisen merkinnän selittäminen näiden ominaisuuksien selittämiseksi tarjoaa eniten vastausta. Vierailijat tuntevat, että heitä kohdellaan älykkäinä, kypsinä ostajina, jotka pystyvät tekemään omia päätöksiä. Jos he todella pitävät ominaisuuksistasi, se antaa suuremman painostuksen ohjelmiston tai tuotteen ostamiseen.

Alla on esimerkki Mozilla Firefoxin päivityssivulta.

Voit nähdä, että suunnittelijat ovat käyttäneet katkoviivaisia ​​viivoja viittaamaan tarroihin ja uusiin ominaisuuksiin. Nämä ovat itse asiassa taustakuvia, jotka on sijoitettu täysin säiliön sisään div. Yllättäen kaikki tarrateksti on kirjoitettu myös HTML-tunnisteiden sisällä (ei vain yksi iso kuva).

Mielestäni tämä menetelmä ei ole vain kätevä Googlen indeksoijarobotit, vaan myös mobiilikäyttäjät, jotka eivät yleensä pysty kokea koko verkkosivua.

Huomaa myös, miten Panoraman ominaisuus on vasemmalla tarjoaa pienen “Lisätietoja” linkki. Tämä on ehkä paras käytäntö, johon voit päästä, kun rakennetaan tietokonegrafiikkaa! Jos samassa sivulla on vaihtoehtoisia sivuja tai ankkureja, kävijät voivat napsauttaa näitä linkkejä saadakseen lisätietoja monimutkaisista ominaisuuksista.

Muista, että informatiivisia grafiikoita käytetään näyttelijöiden ja tuotteen ominaisuuksien näyttämiseen kävijöillesi. Joten vaikka olet rajoitettu tilan ympärille graafinen voit aina tarjoavat mahdollisuuden oppia lisää ulkoisesta sivusta.

3. Yksinkertaiset, huomaamattomat tarrat

tarrat ovat todella tärkeimpiä osa-alueita informatiivisten tuotteiden grafiikan luomisessa. Vierailijoiden on todennäköisesti ymmärrettävä tuotteen, ohjelmiston, verkkosivustojen, mobiilisovelluksen jne. Eri alueita. Valitettavasti taulukoiden ja luettelomerkkien käyttö voi mennä vain niin pitkälle. Kun sinun on todella selitettävä tuotteen ominaisuudet, on tärkeää valita kuormittajat merkinnöistä.

Apple Computers on ehkä paras esimerkki yksinkertaisista tarratiedoista. Voit tarkkailla näitä tarkkoja tekniikoita grafiikassaan, kun katsotaan tablettia, kannettavia tietokoneita tai surullista iPhonea. Niiden ominaisuudet ja tekniset tiedot ovat yleensä samat kuin muut suuret tuotemerkin valmistajat. Silti niiden graafiset mallit ovat niin turmeltumattomia, että tuotteet myyvät itse.

Huomaa, että kun hajotat prosessin, se on paljon yksinkertaisempi kuin luulet! Tuote-grafiikka on vain tavallinen osa koko sivuston suunnittelua. Vaikka olet myymässä lannoitteita tai lakanat tai kaupankäyntikortteja, voit todennäköisesti asettaa nämä merkintätekniikat hyvään käyttöön. Ja vaikka Applella on joitakin hyvin yksinkertaisia ​​informatiivisia grafiikoita, ne eivät ole ainoa yritys. Yrittää Googling noin yrityksille oman kapealla nähdä, jos he urheilevat mitä tahansa fancy info tarroja tai teaser näytöt niiden verkkosivuilla.

4. Kuvat, joissa on dynaaminen sisältö

Joillakin web-kehittäjillä se ei välttämättä riitä yksinkertaisesti luomaan ohjelmistosi merkityn grafiikan. Saattaa olla paljon ainutlaatuisia ominaisuuksia, jotka haluat mennä yli, mutta jotka sisältävät pienen osan Web-sivusta. On mahdollista rakentamaan sarjan johdantovaiheita johtava kävijöitä koko pienen tuotemallin yhteydessä.

Newsberry kuvaa tyylikkäästi esimerkkiä tästä. Kotisivullaan on näkyvissä lohko, jossa on pieni mini-navigointi. Niihin kuuluu 5 vaihetta prosessia pitkin eri kuvakaappausten ja joidenkin oheisten kuvaavien tekstien kanssa. Vaikka sinulla ei ole aavistustakaan siitä, mitä Newsberryä käytetään, heidän johdanto-osa selittää asiat hyvin selvästi. Sinulle tarjotaan jopa muutamia demo-linkkejä koko diaesityksen sarjassa.

Kun siirrät sisältöä läpi, sinun tulee huomata, että monet diat sisältävät kuvakaappauksia pienen selainikkunan sisällä. Tämä vaikutus on todella helppo jäljitellä! Sinun tarvitsee vain etsi kuva, jota haluat käyttää taustakuvina ja koota kuvakaappauksia uudelleen, jotta ne sopivat sisälle. Tämä vaikutus ei toimi kaikissa tuotteissa, mutta se on mukava tapa rajata näytöt web-sovelluksesta.

5. Tyhjennä Screenshots ja Product Photos

On mahdollista sisällyttää kaikki tuotteesi parhaat etiketit ja ominaisuudet, mutta myynnistä puuttuu silti. kuvakaappaukset ja kuvat, jotka valitset grafiikkaan, ovat viime kädessä yhtä tärkeitä kuin kaikki hienommat yksityiskohdat. Windowsissa ja Mac OS X: ssä on tapoja ottaa kuvakaappauksia koko työpöydältäsi pikanäppäimillä. Käyttämällä tätä menetelmää yhdistettynä jonkin aikaa Photoshopiin voit kerätä erittäin mielenkiintoisia ominaisuuksia.

Jos tuote on hyvin mutkikas, sinun pitäisi yrittää koota muutama kuva. Yllä oleva esimerkki Tweetbotin verkkosivustosta käyttää sinisiä ympyröitä osoittamaan sovelluksen napauttamistoimenpiteitä. Yhden kuvakaappauksen sijaan, jossa on monia tarroja, kannattaa käyttää pientä jQuery-kuvagalleriaa yhdistämään 3-5 erilaista grafiikkaa. Tämä antaa sinulle enemmän mahdollisuuksia keskittyä tuotteen eri näkökulmiin kävijöille tarjotaan paljon rikkaampaa kokemusta.

Kun napsautat kuvaa tietokoneesta tai älypuhelimesta, kuva tallennetaan aina 100% zoomauksella. Kuvankäsittelyohjelmilla, kuten Photoshopilla, on kyky muuttaa niitä uudelleen, mutta ne menettävät usein tietoja. Joten miten voit sovittaa tällaisen grafiikan pieneen sivustoosi? Yksi parhaista tekniikoista on suurennos jossa skaalaat sovelluksen alas ja luodat suurennettuja osia tärkeimmistä kappaleista. Tätä tekniikkaa nähdään yleisemmin ohjelmistoissa kuin fyysisiä tuotteita - olen yksityiskohtaisesti suunnitteluprosessin alla.

6. Zoom-objektiivin vaikutuksen luominen

Rakennan askeleet suurennuslasin vaikutuksen rakentamiseen Adobe Photoshopiin. Jos käytät toista grafiikkaeditoria, voit todennäköisesti suorittaa samat tehtävät, mutta valikot ja komennot vaihtelevat.

Yksi parhaista esimerkkeistä tästä tekniikasta on Asiat for Mac -sovelluksen kotisivulle. Grafiikalla on sovellus pienennetty pieneksi, joten se sopii täydellisesti sivulle ja pieni varjo. Kuitenkin joillakin tärkeillä alueilla huomaat ympyrän, jonka sisäinen sisältö on paljon suurempi. He ovat jopa lisänneet valkoisen sisäisen hehkun, joka näkyy linssin läpi heijastuneena valona!

Bonus: "Zoom Lens" Effect Photoshop Tutorial

Voit käynnistää kuvakaappauksen, jota haluat käyttää grafiikkaasi varten. Olen ottanut nopeasti näytön Hongkiatin kotisivulta. Aion rajata vain selainikkunan ja muuttaa sen kokoa noin 700px. Sinun pitäisi muuttaa leveyden kokoa, jotta ne sopivat oman verkkosivustosi sisältöalueeseen. Tee nyt uusi kerros tämän taustan päälle ja tee pyöreä valinta samalla, kun pidät siirtoa pitääkseen sen oikeassa suhteessa. Täytä haluamasi väri.

Vaihe 1

Pidä ympyrä valittuna, muuta kerrosten paneelin täyttö% -arvoksi 0%. Kerroksen alla FX lisää 1px-2px mustan iskun ja valkoisen sisäisen hehkun. Voit vähentää vähemmän valkoisen valaistuksen opasiteettia.

Vaihe 2

Silti pitää ympyrä valittuna siirtyneenä taustakerroksesi ja paina ctrl (Mac-käyttäjälle se on komento- tai cmd-avain.) + c kopioida. Tee sitten uusi kerros taustan yläpuolelle, mutta suurennuspiirin alapuolelle ja liitä. Vaihtoehtoisesti voit vain painaa ctrl + j, jos haluat kopioida uuden kerroksen, jossa on vain valinta.

Avaa muuntotyökalu napsauttamalla ctrl + t. Nyt skaalaa uusi kaksoiskerros samalla kun pidät siirtää pitää kaikki suhteellisena ja alt pitää keskus paikallaan.

Vaihe 3

Paina ctrl ja napsauta suurennuslasikerroksen kuvaketta, kun haluat tehdä valinnan uudelleen. Huomaa, että kerrospaneelissa (joka on suoraan suurennuslasin alla) on korostettava päällekkäistä taustakerrosta..

Käännä nykyinen valinta painamalla Ctrl + Shift + i. Nyt voit poistaa poistaaksesi ylimääräisen roskat uudelleen skaalattavasta kuvakaappauksestamme. Jos haluat lisätä hieman lisävaikutusta, lisää kerros FX-valikko lisätäksesi pienen varjon. Voit myös piirtää ohuen 1px pystysuoran viivan ja käyttää Liquify-suodatinta (Suodatin> Nestemäinen) luo pieni kahva!

johtopäätös

Jotta voit suunnitella upeita tuotekuvia, sinun on muistettava perusasiat. Vierailijat haluavat vain ymmärtää, mitä yrität myydä! Helpoin tapa saada nämä tiedot ovat useiden kuvakaappausten tai yksittäisten yksityiskohtien grafiikan avulla. Etiketit ovat pelkästään toinen palapeli, jossa voit hahmotella tärkeimmät ominaisuudet.

Kun laitat kaikki nämä tekniikat yhdessä, alkaa todennäköisesti huomata suurempi kuva. Lataukset ja ostokset nousevat nopeasti - varsinkin jos asetat grafiikan etu- ja keskipisteen kotisivullesi. Nämä tekniikat sopivat erinomaisesti graafisten ja web-suunnittelijoiden käyttöön tuotesuunnittelun alalla. Meillä on yksityiskohtaisia ​​muutamia abstrakteja ajatuksia, mutta haluaisimme kuulla ajatuksesi alla olevasta keskustelualueesta!