Toote graafika 6 Piltide informatiivsemaks muutmise meetodid
Veebidisainerid on turundusmeetoditega muutunud väga salakavalaks. Lehekülje sisu on alati hea, kuid külastajate haardeseadmine on kõige populaarsem meedia vorm. Nad ei nõua heli nagu demo videod ja nad saavad kiiresti edastada olulist teavet mõne sekundi jooksul. See võib tunduda lihtne, kuid on mõned märkimisväärsed meetodid informatiivsete piltide loomiseks veebisaitidel.
Nende hulka kuuluvad funktsioonimärgised, lähivõtete ekraanipildid, hinnavõrdlused ja muud minutiandmed. Veebidisainerid saavad kasutada infosisu graafikat uute rakenduste, tarkvara, videomängude või paljude teiste toodete modelleerimiseks! Kuigi kõige sagedamini näete neid tehnikaid erinevates tehnoloogiavaldkondades.
Tutvuge allpool toodud ideedega, kus pakume mitte ainult näpunäiteid, vaid ka näiteid ilusast toote graafikast, mis on suurepärase infoga suletud.
1. Laiendage oma sisu
Informatiivseid pilte ei tohiks kasutada hea veebilehe sisu asemel. Selle asemel kasutage oma põhipunktide laiendamiseks pilte ja illustreerivad neid selgelt külastajatele. Üks parimaid viise seda teha on väikese demo loomine tähtsate valdkondade esiletõstmiseks õpetusest. Mõne informatiivse graafika ja ekraanikuvaga on lihtsam hoida oma lugeja huvi liikuda iga sammu läbi.
Kui proovite näidata tarkvaraõpetust (näiteks Photoshopi juhendaja), võib see olla keeruline edastab sõnumi kirjalikuks tekstiks. Külastajad maanduvad teie artiklile ja hakkavad kohe materjali alateadlikult mõistma mõne sekundi jooksul. Web Designer Wallil on fantastiline juhendaja CSS3 ümarate piltide ehitamiseks, millele on lisatud mugav graafika. See hõlmab mõningaid sildid ja efekti lähitulevikku.
Esialgse artikli lehel lisab see pilt teie selgusele palju selgema pildi selle kohta, mida loote. Autor on lisanud väikese demo-linki, kuid miks ei sisalda ka demo pilte? Teil on palju tõenäolisem, et juhtida tähelepanu nõuetekohaselt märgistatud demotüübiga.
Proovi vältige piltide lisamist ainult meediasisu huvides oma postituses. Kui saate oma meetodeid või põhjendusi ilma pildita selgitada, alustage siit kõigepealt. Ainult pärast seda, kui vaatate üle oma veebikoopia, peaksite mõningaid punkte uuesti üksikasjalikus pildigraafikas uuesti kasutama. Täpsemalt võite leida a õpetus nõuab rohkem visuaalseid näpunäiteid, kuna keerukus suureneb. Kaks näidet võiksid hõlmata veebisaidi andmebaasi või tabeli andmekogumit.
2. Tõstke esile märkimisväärsed funktsioonid
Kuna igal tarkvaralahendusel / tehnoloogial on nii palju funktsioone, on iga bitit peaaegu võimatu selgitada. Mitte ainult seda, kuid see on väga ebatõenäoline, et teie külastajad huvitaksid teie infomaterjalis 20 + märgist. Püsi kõige huvitavamate omadustega ja kasutage etikette, et selgitada veidi põhjalikumalt.
Sildi sisu jaoks veebikoopia kirjutamisel vältige igav keel võimaluse korral. Kui külastajad vaatavad teie rakenduse viimast versiooni, ei pruugi nad värvide skeemi muutmisest palju hoolida. Kuidas see mõjutab nende igapäevast töövoogu? Selle asemel võib-olla rõhutada, mis neile kasulik on, nagu uus liidese paneel või mitme kasutaja ühenduvus. Need peaksid üldiselt olema abstraktsed omadused mida sa lihtsalt ei näe “otsin” toote juures.
Sellise märgise seletamine, et selgitada neid funktsioone, annab kõige suurema vastuse. Külastajad tunnevad, et neid koheldakse intelligentsete ja küpsena ostjatena, kes on võimelised oma otsuseid vastu võtma. Kui nad tõesti armastavad teie funktsioone, annab see suurema tõuke tarkvara või toote ostmiseks.
Allpool on näide Mozilla Firefoxi värskenduste lehelt.
Näete, et disainerid on kasutanud punktiiriga kõveraid jooni, et märkida sildid ja uued funktsioonid. Need on tegelikult taustapildid, mis on paigutatud absoluutselt konteineri sisemusse div. Üllatavalt on kogu sildi tekst kirjutatud ka HTML-märgendite sees (mitte ainult üks suur pilt).
Ma arvan, et see meetod ei ole lihtsalt Google'i roomikobotide jaoks mugav, vaid ka mobiilikasutajatele, kes ei saanud tavaliselt kogu veebilehte kogeda.
Pange tähele ka seda, kuidas Panorama funktsioon on vasakule pakub väikest “Lisateave” link. See on ilmselt parim tava, mida saab infot graafika ehitamisel! Kui teil on samas lehel alternatiivseid lehekülgi või ankure, võivad külastajad klõpsata nendel linkidel, et saada rohkem teavet keeruliste funktsioonide kohta.
Pidage meeles, et informatiivset graafikat kasutatakse selleks, et hõlpsasti kuvada külastajaid ja toote omadusi. Nii et kuigi te olete piiratud graafika ümbruses, saate seda teha alati pakkuda võimalust õppida rohkem välisel lehel.
3. Lihtne, märkamatu märgis
Sildid on tõesti kõige olulisem aspekt informatiivse tootegraafika loomisel. Külastajatel on tõenäoliselt vaja mõista teie toote, tarkvara, veebisaitide, mobiilirakenduste jms erinevaid valdkondi. Kui teil on tõesti vaja toote omadusi selgitada, on oluline välja valida levialad märgistamiseks.
Apple Computers on ilmselt parim näide lihtsustatud siltide üksikasjadest. Tablettide, sülearvutite või kurikuulsa iPhone'i pealt vaadates võite neid täpseid tehnikaid märgata. Nende omadused ja tehnilised näitajad on üldjuhul samad nagu teised suurtootjate arvutitootjad. Ometi on nende graafilised mudelid nii põlised, et tooted ise müüvad.
Pange tähele, et kui see protsess lõhkub, on see palju lihtsam kui arvate! Toote graafika on vaid üldine veebilehe kujunduse osa. Isegi kui te müüte väetisi või voodipesu või kauplemiskaarte, võite tõenäoliselt neid märgistamismeetodeid hästi kasutada. Ja kuigi Apple'il on tõesti lihtsustatud informatiivne graafika, ei ole nad ainus ettevõte, kes seda teeb. Proovige Googlingi ümber oma niši ettevõtete jaoks näha, kas nad spordivad oma veebisaidil mis tahes väljamõeldud infolehti või teaser-ekraane.
4. Dünaamilise sisuga kujutised
Mõnede veebiarendajate jaoks ei pruugi see olla piisav, et lihtsalt luua teie tarkvarale märgistatud graafika. Võib olla palju unikaalseid funktsioone, mida soovite üle minna, kuid sisaldavad väikese osa oma veebilehte. On võimalik ehitada sissejuhatavad sammud viib teid külastajatesse kogu väikese toote demo.
Newsberry illustreerib selle eeskuju. Oma koduleheküljel avastate ploki ala väikese mini-navigatsiooniga. Nende hulka kuuluvad 5 sammu protsessi käigus, kus on erinevad ekraanipildid ja mõned kaasnevad kirjeldavad tekstid. Isegi kui teil pole aimugi, mida Newsberryi kasutatakse, on nende sissejuhatav sisu selgitab asju väga selgelt. Sul on isegi mõned demo lingid kogu slaidide seerias.
Kui liigute oma sisu üle, tuleb märkida, et paljud slaidid sisaldavad väikese brauseriakna sisemisi ekraanikuvasid. See efekt on tegelikult väga lihtne jäljendada! Sa pead lihtsalt leidke pilt, mida kasutaksite oma taustapildina, ja suurustage ekraanikuvasid, et need sobituksid. Antud mõju ei toimi iga toote puhul, kuid see on kena viis, kuidas ekraanid veebirakendusest raamida.
5. Tühjendage Screenshots ja Product Photos
Võimalik on lisada kõik oma toodete parimad sildid ja funktsioonid, kuid müügi puhul siiski puuduvad. The graafikale valitud pildid ja fotod on lõppkokkuvõttes sama tähtsad kui kõik peenemad detailid. Windowsis ja Mac OS X-is on võimalusi, kuidas kogu töölaua ekraanipilte klaviatuuri otseteedega võtta. Kasutades seda meetodit kombineerituna mõnda aega Photoshopis, saate koguda väga huvitavaid funktsioone.
Kui teie toode on väga keeruline, peaksite proovima kokku panna mõned erinevad pildid. Ülaltoodud näide Tweetbot'i veebisaidilt kasutab sinises ringis rakenduse rakenduse puudutamiseks. Ühe ekraanipildi asemel, kus on palju märgiseid, kaaluge väikese jQuery pildigalerii kasutamist, et ühendada 3-5 erinevat graafikat. See annab teile rohkem võimalusi keskenduda toote erinevatele vaatenurkadele külastajatele pakutakse palju rikkamat kogemust.
Kui klõpsate arvutist või nutitelefonist pildi, salvestatakse pilt alati 100% suurendusega. Pildiredaktorid nagu Photoshop on võimelised neid uuesti mõõtma, kuid nad kaotavad sageli üksikasjad. Niisiis, kuidas saate sellisele graafikale oma väikese veebisaidi külge kinnitada? Üks parimaid tehnikaid on suurendus milles te rakendust vähendate ja loote kõige tähtsamate osade suurendatud osad. Seda tehnikat vaadeldakse sagedamini tarkvaras kui füüsilisi tooteid - allpool on üksikasjalikult kirjeldatud projekteerimisprotsessi.
6. "Suumobjektiivi" efekti loomine
Ma ehitan samme, et ehitada Adobe Photoshopis suurendusklaasi efekt. Kui kasutate mõnda muud graafika redaktorit, saate kõige tõenäolisemalt samu ülesandeid täita, kuid menüüd ja käsud erinevad.
Üks parimaid näiteid selle tehnika kohta on asjad asjades Maci rakenduse kodulehele. Graafil on rakendus väike, nii et see sobib ideaalselt leheküljele koos väikese vari. Kuid mõningate oluliste valdkondade üle märkate ringi, mille sisemine sisu on palju suurem. Nad on isegi lisanud valget sisemist hõõgumist, mis ilmub hajutatud valguna, mis särab läbi läätse!
Boonus: "Zoom Lens" Efekt Photoshop Tutorial
Et käivitada pilt, mida soovite oma graafikale kasutada. Olen võtnud kiire ekraani Hongkiat koduleheküljelt. Ma pean kärpima just brauseri akna ja muutma umbes 700 pikslit. Peaksite laiuse suurust oma veebisaidi sisupiirkonda sobituma. Nüüd tehke sellele taustale uus kiht ja tehke ringi valik, hoides samal ajal nihet, et hoida seda proportsionaalsena. Täitke soovitud värv.
Samm 1
Valides ringi, muutke kihtide paneeli täitekogus 0% -le. Kihi all lisab FX 1xx-2x musta löögi ja valge sisemise sära. Saate vähendada läbipaistmatust vähemvalgete valgustuste puhul.
2. etapp
Jätkates valitud ringi, liikuge oma taustakihile ja vajuta ctrl (Maci kasutaja jaoks on see käsk või cmd klahv.) + c kopeerimiseks. Seejärel tehke taustale uus kiht, kuid suurendusketi all ja kleepige. Teil on võimalik lihtsalt klõpsata ctrl + j, et dubleerida uus kiht ainult valiku abil.
Teisendustööriista avamiseks vajuta ctrl + t. Nüüd skaneerige uus dubleeriv kiht hoides nihe hoida kõik proportsionaalne ja alt keskuse paigal hoidmiseks.
3. etapp
Vajuta ctrl ja klõpsa suurendusklaasi kihi ikoonil, et valik uuesti valida. Pange tähele, et kihtide paneelil (see on otseselt meie suurendusklaasi all) dubleeritud taustkiht peaks olema esile tõstetud, mis tähendab, et see on heleda sinise taustaga.
Vajutage Ctrl + Shift + i praeguse valiku ümberpööramiseks. Nüüd vajuta kustutada, et eemaldada ekstra prügikast meie uuesti skaleeritud ekraanilt. Vähe lisandunud efekti jaoks tõmmake kiht FX menüü juurde, et lisada väike vari. Samuti saate joonistada õhukese 1px vertikaalse joone ja kasutada vedelikufiltrit (Filter> Liquify) luua väike käepide!
Järeldus
Fantastilise tootegraafika kujundamiseks peate meeles pidama põhitõdesid. Külastajad lihtsalt tahavad aru saada, mida sa üritad neid müüa! Lihtsaim viis selle teabe saamiseks on läbi ekraanipiltide või ühe detailgraafika. Etiketid on lihtsalt selle puzzle üks teine osa, kus saate kirjeldada kõige olulisemaid omadusi.
Kui paned kõik need tehnikad kokku, hakkate suuremat pilti märkama. Allalaadimised ja ostud tõusevad kiiresti - eriti kui asetate oma graafika esikülje ja keskuse oma kodulehele. Need tehnikad on ideaalsed graafiliste ja veebidisainerite jaoks, et alustada toote disaini valdkonnas. Meil on üksikasjalikud mõned abstraktsed ideed, kuid me tahaksime kuulda teie mõtteid allpool olevas arutelualas!
