Uutta Web-suunnittelijoille Illustrator CC: ssä
6. toukokuuta Adobe ilmoitti uusimmista päivityksistä luovaa ohjelmistoaan. Jotkin näistä päivityksistä vaikuttavat suuresti siihen, miten käyttäjät käyttävät työkalujaan. Tässä artikkelissa haluaisin tarkistaa, mitä Adobe on muuttanut Illustratorissa ja erityisesti miten se vaikuttaa web-suunnittelijoihin.
Tietenkin on olemassa useita uusia ominaisuuksia, kuten AutoCAD-kirjastoja, valkokantamuoto, täyttö ja aivohalvaus proxy swap -tekstiä varten, automaattinen nurkkaus, osoitustuki, pakettitiedostot, yhdistyneet kuvat, usean tiedoston paikka, kosketustyyppiset työkalut, ilmaiset muunnostyökalut ja kuvia harjoissa. Jos olet Illustrator-ammattihenkilö, nämä ovat kaikki hyödyllisiä ominaisuuksia, mutta mitä haluan keskittyä nimenomaan ovat keskeiset parannukset, jotka auttavat jokaista luomaan taidetta näytön toimitukselle.
HiDPI-tuki
Kun korkean resoluution näytöt (kuten Macbook Pro ja Retina-näyttö) ovat syntyneet, Illustrator CS6 ja aikaisemmin näyttävät epäselviä. Taideteos ja kuvakkeet näyttävät pikseleinä ja teksti näyttäisi vastaisilta. Illustratorin luonne antaa raikkaita rikas taideteoksia, joten tämä kokemus oli vähemmän kuin toivottavaa. Onneksi Adobe on parantanut Illustrator CC: tä hyödyntämään näitä korkean resoluution näyttöjä. Taideteos näyttää paremmalta, teksti näyttää terävinä, UI-elementit (kuvakkeet, kursorit jne.) Näyttävät pehmeältä. He tekivät myös parannuksia renderointiprosessiin. Nyt se hyödyntää usean ytimen koneet ja käyttää kierteitettyä renderointia tehdä taideteoksia. Sinun pitäisi nähdä joitakin parannuksia tehtäviin kuten zoomaukseen, panorointiin, kopiointiin, vedä ja pudota jne.
Oppaiden parannukset
Oppaita käytetään laajasti sivujen suunnittelussa ja laatimisessa. Mallien luominen Illustratorissa oppaiden avulla mahdollistaa sisällön sijoittamisen tarkasti. Illustrator CC: ssä on neljä parannusta oppaisiin:
- Kaksoisnapsauttaminen hallitsija luo oppaan kyseisessä tiettyyn paikkaan hallitsijassa.
- Kun pidät Shift-näppäintä ja kaksoisnapsautat tiettyä sijaintia viivainta varten, pisteessä luotu opas napsahtaa automaattisesti viivainta lähimpään merkkiin (jako).
- Jos piilotat oppaat (Ctrl / Cmd +;) ja valitset niiden näyttämisen, oppaat eivät automaattisesti lukita kuten aiemmissa versioissa.
- Luo horisontaalisia ja pystysuuntaisia oppaita yhdessä toiminnassa. Näin voit: Illustrator-ikkunan vasemmassa yläkulmassa napsauttamalla Viivaimet risteykseen ja painamalla Ctrl (tai Cmd Macissa) ja vetämällä hiiren osoittimen Illustrator-ikkunan sijaintiin. hiiren osoitin muuttuu ristikkäisiksi hiuksiksi osoittamaan, missä horisontaalinen ja pystysuuntainen opas voidaan luoda; vapauta hiiren osoitin luomaan oppaat.
Fonttihaun parannukset
Tyypillinen etukäteen etsittävä haku etsii vain fontin nimen ensimmäistä sanaa, joka yleensä ei tuota parhaita tuloksia välittömästi. Myös useiden fonttien etsiminen ja selailu voi olla vaikeaa. Ohjaus- ja merkkipaneeleihin on lisätty uusi hakutoiminto-vaihtoehto "Hae koko fontin nimi". Lisäksi TypeKit-integraatio työpöydän fonteille ilmoitettiin äskettäin MAX: ssä. Tämä tarkoittaa sitä, että voit helposti suunnitella mock-upia samojen fonttien avulla, jotka aiot käyttää Webissä.
Värikuvan parannukset
Tietyn värin löytäminen lukuisista väreistä voi olla aikaa vievää ja turhauttavaa. Illustrator CC: ssä on tehty muutoksia, joiden tarkoituksena on etsiä ja löytää väri helpommin. Värinvalitsin-valintaikkuna (kaksoisnapsauta työkalupalkin Täytä välityspalvelinta) on nyt vakoiluikkunan Color Swatches -ikkunassa. Kun valitset Väri värimalleja, hakupalkki tulee esiin ennalta määritetyn väriluettelon alapuolella. Kirjoita värin tai RGB-arvon nimi (tai CMYK tulostettavaksi). Jos kirjoitat "sinistä", näytetään kaikki värimallit, joiden sana sininen on heidän nimensä. Kirjoittamalla R = 77 näytetään kaikki värimallit, joiden puna- väri on 77, RGB-asteikolla. Hakulaite on oletusarvoisesti käytössä.
Vektori-paneelin hakuvaihtoehtoa on myös parannettu. Kenttä ei aseta automaattista täydennystä. Kirjoittamasi merkit eivät enää ole automaattisesti korvattavissa lähimpänä löytyvän värinsä. Voit kirjoittaa värin nimen tai kirjoittaa RGB-väri (tai CMYK for print) -arvot etsimään, onko tällainen väriyhdistelmä olemassa. Etsi-kenttä ei ole oletusarvoisesti käytössä, ja se on otettava käyttöön ensimmäistä kertaa paneelin alivalikosta.
On myös syytä huomata, että Kuler on paistettu Illustrator-tuotteeksi. Joten jos käytät tätä Adobe-palvelua luodaksesi väriteemoja ja -ryhmiä, voit helposti käyttää tätä sisältöä suoraan Illustrator CC: n sisällä.
CSS-ominaisuuspaneeli
Tietenkin suurin web-ominaisuus ovat parannukset CSS- ja SVG-työnkulkuihin. Nyt, jos olet hardcore Illustrator-käyttäjä, olet ehkä käyttänyt jotain CS5: ssä nimeltä HTML5-pakkaus, joka oli saatavilla AdobeLabsilta. Jokaisesta syystä se ei koskaan ilmestynyt CS6: ssa, mutta monet näistä ominaisuuksista ovat palanneet tällä CC-päivityksellä. Nämä ominaisuudet muistuttavat sitä, mitä Photoshop CS6: lle on jo annettu Creative Cloud -päivitysten ja Fireworks CS6: n sisältämien ominaisuuksien avulla.
CSS-ominaisuuspaneeli on, miten otat CSS Illustrator-asiakirjasta, ja siinä on useita tapoja tehdä se. Keskeinen askel tämän kaiken tehtävän tekemisessä on kuitenkin nimetä kerrokset kerrospaneelissa. Varmasti Illustrator voi tuottaa CSS: ää ilman objektia, jolla on nimi kerrospaneelissa, mutta avaat itsesi epäjärjestykseen ja mahdollisesti levottomaan tapa generoida koodia. Tämä on olennaista, miten Illustrator nimeää sinulle luodut luokat. Luodulla CSS: llä voi olla Webkitin, Firefoxin, Oopperan ja Internet Explorerin etuliitteitä. Se voi kaapata CSS: n tuettuja esiintymiä, kuten kaltevuuksia ja pyöristettyjä kulmia.
Voit hallita CSS: n syntymistä siirtymällä CSS Export Options -valintaikkunaan. Voit käyttää valintaikkunaa napsauttamalla CSS Export Options-painiketta, joka on ensimmäinen neljästä painikkeesta paneelin oikeaan alakulmaan. Paneeli tarjoaa useita toimintoja CSS-työnkululle:
- Tarkastele valitun objektin CSS-arvoa
- Kopioi CSS-koodi valitulle objektille
- Vie valittu kohde CSS-tiedostoon ja CSS-tiedostoihin
- Vie CSS-koodi kaikille asiakirjan objekteille CSS-tiedostoksi
Lisäksi voit viedä kaikki asiakirjan sisältämät objektit CSS-koodiin siirtymällä Tiedosto-valikkoon ja valitsemalla Vie. Se avaa valintaikkunan, ja sieltä voit valita CSS: n muotoiluvalikosta.
Jos sinulla on jokin objekti, valitse se ja varmista, että se on nimetty oikein Tasot-paneelissa. Kun valitset sen, näet CSS: n, jota tarvitaan luomaan kuvamateriaali CSS-ominaisuuspaneelin selaimessa.
SVG-koodi
Illustratorin aikaisemmissa versioissa sinun pitäisi tallentaa asiakirja SVG: ksi. Tässä CC-päivityksessä sinulla on mahdollisuus kopioida jotain asiakirjassa, sitten mennä suosikki-HTML-editoriin ja yksinkertaisesti suorittaa liimaa; kaikki SVG-koodi sijoitetaan asiakirjan sisälle. Se on yllättävän mukava työnkulku. Jos tämä ei tee sitä, perinteinen tapa tallentaa asiakirja SVG: ksi on edelleen käytettävissä.
Lisäksi Adobe on lisännyt käyttämättömien tyylejen vientiä. Suunnittelussa usein syntyy useita graafisia tyylejä luovat taideteoksia. Et voi käyttää kaikkia käytettävissä olevia tyylejä. Kun viet kuvitusta SVG-muodossa, käyttämättömiä tyylejä ei viedä. Vietyyn CSS-koodiin graafisissa tyyleissä ei myöskään ole nimeä niihin, ja oikean graafisen tyylin tunnistaminen voi olla vaikeaa.
Illustrator CC tarjoaa kaksi ominaisuutta, jotka on lisätty parantamaan SVG-tyylien tyylejä, jotka käsittelevät näitä asioita:
- Graafisen tyylin nimi. Kun päätät viedä graafisia tyylejä, kunkin tyylin nimi viedään tyylin määritelmän avulla CSS-nimikkeistöön.
- Vie käyttämättömiä tyylejä. Kun viet kuvitusta SVG-muodossa, voit nyt valita käyttämättömät tyylit. Tämä sallii toisen suunnittelijan tai kehittäjän, joka tuo tyylit käyttämään käyttämättömiä grafiikkityylejä muissa kuvamateriaaleissa.
Kuinka käytät sitä
Tämä ei todellakaan ole työkalu koko verkkosivujen koodaamiseen. Näen, että Illustrator käyttää luomaan mallineita, käsittele sitten HTML-rakenne ja CSS: n ulkoasun koodi. Kun tarvitaan varjo, kaltevuus, kuvio tai jopa logo, käyttämällä näitä uusia CSS-uuttoja ja SVG-vaihtoehdot tulevat erittäin käteväksi ja ovat suuria säästöjä.
Jos haluat lisätietoja Illustrator CC: n uusista ominaisuuksista, käy Illustrator-tuotesivulla.
Oletko Illustrator harrastaja? Mitä Illustrator CC: n ominaisuuksia olette eniten innoissaan? Kerro meille kommentit.