Kotisivu » grafiikka » 10 ilmaista luonnosta Web-kehittäjille

    10 ilmaista luonnosta Web-kehittäjille

    Piirustus saa paljon vetoa web-suunnittelijoiden ja kehittäjien keskuudessa. Tämä johtuu todennäköisesti siitä, että se on intuitiivinen, helppo oppia ja siinä on monia ominaisuuksia, jotka helpottavat verkkosivuston prototyypin luomista. Se voi myös johtua siitä, että tämä sovellus on laajennettavissa, eli voit lisätä sovellukseen uusia ominaisuuksia laajennusten avulla.

    Tässä on 10 laajennusta, joiden avulla voit parantaa tuottavuuttasi Sketch-ohjelmaa käytettäessä. On olemassa monipuolisia, vaihtelevat sisällöntuottajista, värivalikoimanvalitsimesta, ja ne voivat auttaa näyttämään kerroksen mittauksia tai lisäämään automaattisesti kerroksen kerrokseen.

    1. CSS Buddy

    CSS Buddy voit lisätä CSS: n kerroksellesi Sketch-työtilassa. Periaatteessa voit käyttää leveyttä, korkeutta, opasiteettia, laatikon varjoa, reunaa ja taustaa CSS: n avulla.

    Kun tämä laajennus on asennettu, valitse vain kerros ja valitse sitten Käytä valittua valikosta. Valintaikkuna kehottaa sinua syöttämään tyylitaulukon. Lisää CSS-sisältö ilman CSS-luokkaa ja katso, että kerros on muodostunut.

    2. Materiaalisuunnittelun väripaletti

    Jos noudatat materiaalisuunnittelun trendiä, näkyvästi havaittavissa on erilaisten värien käyttö. Materiaalisuunnittelussa on mahtava väripaletti. Nyt voit tuoda sen työtilaan Materiaalien suunnittelu Väripaletti Plugin.

    Tämä plugin luo väripaletteja muutamassa sekunnissa ilman, että sinun tarvitsee sulkea työtilaa. Valitse Hue, Value tai Swatch, jos haluat luoda projektiin sopivan väripaletin.

    3. Luo muistikirja

    Joskus meidän on näytettävä, mitä teemme kommentissa tai dokumentoinnissa. Jos työskentelet projektien kanssa muiden suunnittelijoiden kanssa tai asiakkaan osallistuminen, tämä on myös välttämätöntä, jotta voit varmistaa, että lopputulos on, mitä kaikki pyrkivät.

    Piirrä muistikirja on plugin, jolla voit dokumentoida suunnittelusi Sketchissa helposti. Se lisää työtilaan lisäsivupalkin, joka sisältää kommentteja, jotka lisätään mihin tahansa elementtiin. Voit järjestää kommentin, uudelleenohjauksen, poistamisen ja kommenttien näkyvyyden vaihtamisen uudelleen.

    4. Päiväpelaaja

    Ennen kuin käytät todellisia kuvia suunnittelussa, käytämme usein paikkamerkkikuvia nopeuttamaan suunnitteluprosessia. Voit käyttää Sketch-ohjelmaa Päiväpelaaja Voit lisätä räätälöityjä paikkamerkkejä mihin tahansa Sketch-työtilan tasoon 6 paikkamerkkipalvelusta, mukaan lukien Placehold.it, LoremPixel ja Unsplash. Kun olet aktivoinut, voit määrittää kuvan leveyden, korkeuden ja muut tiedot.

    5. Sisältögeneraattori

    Meillä on jo plugin, jolla voit lisätä paikkamerkkikuvia, miten noin yksi yleistä sisältöä varten? Content Generator auttaa sinua lisäämään tietoja, kuten avatareja, nimiä, sijaintitietoja ja paljon muuta. Toimii erinomaisesti mockup-malleihin ja vähentää päänsärkyä yrittäessään selvittää, miten tietoja voidaan luoda paikan päällä.

    Jos haluat lisätä nuken tiedot, valitse vain kerros ja valitse sitten Plugin> Generaattori, ja valitse geo, persoona tai Kuvat.

    6. Piirrä toimenpide

    Sketch Measure on Sketchin mittaustyökalu. Se mittaa suunnittelussa olevan kerroksen (tai kerrosten) pituutta tai kokoa. Saat myös kerroksen pehmusteen ja marginaalin sekä kahden kerroksen välisen etäisyyden. Sketch Measure voi myös tulostaa kerrosominaisuudet, kuten värin, reunan ja opasiteetin. Kaikki mittaukset voidaan tuoda esiin pikanäppäimillä.

    7. Dynaaminen painike

    Dynaaminen painike auttaa sinua luomaan painikkeen, jossa on kiinteät pehmusteet. Se säätää automaattisesti pehmusteen antamasi arvon perusteella riippumatta tekstin pituudesta. Kun plugin on asennettu, teksti voidaan muuntaa rakenteeksi, jossa on pikavalinta Command + J. Tarvittavan pehmusteen määrä voidaan sitten työntää tekstikerrokseen (0: 0: 0: 0) (flex-painike -ryhmässä).

    8. Typografinen skaala

    Typografinen skaala on plugin, jonka avulla valittu tekstikerros voidaan tulostaa typografiseen mittakaavaan. Jos haluat käyttää tätä laajennusta, valitse vain tekstikerros (yksi tai useampi) tai sekakerros, joka sisältää vähintään yhden tekstikerroksen, ja valitse sitten Plugin> Typografinen skaala ja säädä valintaikkunan arvoa. Tuloksena on joukko skaalattua tekstiä, joka noudattaa typografisen asteikon sääntöjä.

    9. Modulaattori

    Kanssa Modulizer voit ohjata painikkeen, moduulin tai alueiden suunnittelua näppäimistön pikanäppäimellä Shift + Command + M. Voit yhdistää kaikki kerroksesi, ryhmitellä sen ja käyttää pikakuvaketta automaattisesti säätämällä pehmustusta tarpeen mukaan . Katso videoesitys nähdäksesi tämän toiminnassa.

    10. Terä

    Oletko koskaan ajatellut suunnitelmasi muuttamista luonnoksesta HTML-muotoon? Jos näin on, sinun pitäisi saada Terä, Sketch-laajennus, joka luo automaattisesti HTML-tiedostoja suunnittelusta. Se muuntaa ryhmän div, tekstiä p ja niin edelleen.

    Kun käytät Bladea, voit kertoa pluginille, mitä DOM-elementti tuottaa, lisäämällä kerrokseen erityinen nimi, kuten [btn] tai syöttö [teksti], jotta Blade tietää, mitä sen pitäisi tehdä. Katso video-esittely sisäisestä ulkoasusta.

    Lue nyt: 12 Hyödyllisiä laajennuksia WordPress-kehittäjille