{"id":74820,"date":"2022-09-20T22:00:46","date_gmt":"2022-09-21T03:00:46","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/7-maste-ha-chrome-tillagg-for-webbdesigners\/"},"modified":"2022-09-20T22:00:46","modified_gmt":"2022-09-21T03:00:46","slug":"7-maste-ha-chrome-tillagg-for-webbdesigners","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/7-maste-ha-chrome-tillagg-for-webbdesigners\/","title":{"rendered":"7 m\u00e5ste ha Chrome-till\u00e4gg f\u00f6r webbdesigners"},"content":{"rendered":"
\n

Som webbdesigner, vilken programvara m\u00e5ste du absolut ha p\u00e5 din dator? Chansen \u00e4r stor att det \u00e4r Photoshop och Illustrator. Och \u00e4ven om det \u00e4r det v\u00e4sentliga i ditt designarbetsfl\u00f6de, finns det mindre verktyg som du f\u00f6rmodligen inte vet att du beh\u00f6ver.<\/p>\n

Det b\u00e4sta \u00e4r att du inte ens beh\u00f6ver ladda ner dem \u2014 bara installera dessa Chrome-till\u00e4gg s\u00e5 \u00e4r du iv\u00e4g. Fr\u00e5n att identifiera teckensnitt p\u00e5 sidor till att m\u00e4ta avst\u00e5nd mellan webbelement, dessa webbdesignade Chrome-till\u00e4gg kommer att g\u00f6ra ditt liv enklare.<\/p>\n

<\/span> 1. Dropbox f\u00f6r Gmail<\/span><\/h2>\n
\n<\/figure>\n

Dropbox b\u00f6rjade som en filv\u00e4rdtj\u00e4nst, men uppt\u00e4ckte snart att dess st\u00f6rsta publik \u00e4r designers, som anv\u00e4nder tj\u00e4nsten f\u00f6r att dela sitt arbete med kollegor. Eftersom designfiler ofta \u00e4r f\u00f6r stora f\u00f6r e-postbilagor \u00e4r det l\u00e4ttare att skicka en Dropbox-l\u00e4nk till filen.<\/p>\n

Dropbox f\u00f6r Gmail g\u00f6r processen \u00e4nnu bekv\u00e4mare. N\u00e4r du l\u00e4nkar till din fil med en Dropbox-knapp l\u00e4ngst ner i det nya e-postf\u00f6nstret f\u00e5r mottagaren en tjuvtitt p\u00e5 vad du skickar. L\u00e4nkar till bildfiler laddar upp bilderna direkt till e-postmeddelandet, och l\u00e4nkar till andra typer av filer kommer att generera en praktisk f\u00f6rhandsvisning.<\/p>\n

Installera:<\/strong> Dropbox f\u00f6r Gmail<\/p>\n

<\/span> 2. FontFace Ninja<\/span><\/h2>\n
\n<\/figure>\n

Med tusentals tillg\u00e4ngliga teckensnitt \u00e4r dina typografim\u00f6jligheter o\u00e4ndliga. Speciellt om du kan identifiera ett vackert typsnitt du ser n\u00e5gonstans och l\u00e5na det till ditt eget projekt.<\/p>\n

FontFace Ninja \u00e4r ett Chrome-till\u00e4gg som hj\u00e4lper dig att g\u00f6ra just det. Ungef\u00e4r som verktygen som hittar typsnitt fr\u00e5n bilder, hj\u00e4lper det dig att identifiera typsnitten du ser online. Den enda skillnaden \u00e4r att FontFace Ninja l\u00e4ser typsnitten som \u00e4r kodade i sidans CSS, som typsnittet f\u00f6r rubriker och br\u00f6dtext.<\/p>\n

N\u00e4r du startar FontFace Ninja kommer den att visa dig informationen om typsnittet du riktar det till \u2014 och inte bara typsnittet utan ocks\u00e5 vikt, storlek, h\u00f6jd, bredd och f\u00e4rg. F\u00f6r att bokm\u00e4rka det typsnittet beh\u00f6ver du ett konto hos systertj\u00e4nsten FontFace Dojo.<\/p>\n

Installera:<\/strong> FontFace Ninja<\/p>\n

<\/span> 3. ColorPick pipett<\/span><\/h2>\n
\n<\/figure>\n

Oavsett hur bra ett \u00f6ga f\u00f6r f\u00e4rg du har, \u00e4r det sv\u00e5rt att \u00e5terskapa en viss nyans du s\u00e5g online om du inte k\u00e4nner till dess RGB- eller HTML-v\u00e4rden. Som tur \u00e4r beh\u00f6ver du inte gissa om du har ColorPick Eyedropper.<\/p>\n

Precis som de b\u00e4sta f\u00e4rgv\u00e4ljarapparna f\u00f6r Mac kommer ColorPick Eyedropper att visa dig v\u00e4rdena f\u00f6r vilken f\u00e4rg du pekar p\u00e5. Skillnaden \u00e4r att den alltid finns d\u00e4r i din webbl\u00e4sare och du beh\u00f6ver inte ladda upp n\u00e5gonting \u2014 klicka bara p\u00e5 ikonen och flytta m\u00e5let till r\u00e4tt plats.<\/p>\n

Till\u00e4gget l\u00e4ser f\u00e4rger fr\u00e5n text, bilder och i stort sett allt du kan se p\u00e5 en webbsida (\u00e4ven annonserna). N\u00e4r du v\u00e4l har tagit en f\u00e4rg visar den HTML-, RGB- och HSL-v\u00e4rdena f\u00f6r den.<\/p>\n

Installera:<\/strong> ColorPick pipett<\/p>\n

<\/span> 4. M\u00e5tt<\/span><\/h2>\n
\n<\/figure>\n

Detta till\u00e4gg med \u00f6ppen k\u00e4llkod \u00e4r ett fynd f\u00f6r webbdesigners, s\u00e4rskilt om du g\u00f6r eng\u00e5ngsspelningar f\u00f6r sm\u00e5 f\u00f6retag. N\u00e4r en kund ger dig en webbplats utan n\u00e5gra tidigare filer eller dokumentation och ber dig designa \u201cen sida som denna, men med annan text och bilder\u201d, \u00e4r det sv\u00e5rt att ta reda p\u00e5 layouten.<\/p>\n

Dimensioner l\u00e5ter dig enkelt m\u00e4ta h\u00f6jden och bredden p\u00e5 alla element p\u00e5 sidan, s\u00e5v\u00e4l som marginalerna mellan dem. Det g\u00f6r det enkelt att \u00e5terskapa befintliga sidor och dubbelkolla din egen design efter att de har satts i produktion.<\/p>\n

Installera:<\/strong> M\u00e5tt<\/p>\n

<\/span> 5. Visuell inspekt\u00f6r<\/span><\/h2>\n
\n<\/figure>\n

Visual Inspector \u00e4r ett kraftfullt feedback- och samarbetsverktyg f\u00f6r designteam, som kombinerar funktionerna i de tre tidigare till\u00e4ggen och l\u00e4gger till \u00e4nnu mer.<\/p>\n

I den Inspektera<\/strong> fliken kan du v\u00e4lja vilket element som helst p\u00e5 sidan f\u00f6r att f\u00e5 fullst\u00e4ndig information om det, fr\u00e5n dimensioner till filnamnet. De F\u00e4rger<\/strong> och Typografi<\/strong> underflikar l\u00e5ter dig se f\u00e4rgpaletten och alla teckensnitt med en blick, medan Tillg\u00e5ngar<\/strong> samlar alla bilder p\u00e5 sidan p\u00e5 ett st\u00e4lle.<\/p>\n

De Samarbeta<\/strong> fliken \u00e4r d\u00e4r du kan ge feedback och ha diskussioner med ditt team, och det \u00e4r l\u00e4tt att l\u00e4mna en kommentar genom att klicka p\u00e5 valfritt element p\u00e5 sidan.<\/p>\n

Liksom de flesta avancerade verktyg kommer Visual Inspector med en prislapp: du m\u00e5ste betala fr\u00e5n $9\/anv\u00e4ndare\/m\u00e5nad f\u00f6r att l\u00e4gga till kommentarer och synkronisera \u00e4ndringar. Dess grundl\u00e4ggande funktioner som att inspektera f\u00e4rger, teckensnitt och bilder \u00e4r dock free att anv\u00e4nda.<\/p>\n

Installera:<\/strong> Visuell inspekt\u00f6r<\/p>\n

<\/span> 6. Enkel sk\u00e4rmdump<\/span><\/h2>\n
\n<\/figure>\n

En sk\u00e4rmdumpstill\u00e4gg kan tyckas \u00f6verfl\u00f6dig, eftersom det \u00e4r enkelt att ta en sk\u00e4rmdump p\u00e5 Mac, och att f\u00e5nga din sk\u00e4rm p\u00e5 Windows \u00e4r bara lite mer kr\u00e5ngel. Men Easy Screen Capture har en hel del f\u00f6rs\u00e4ljningsargument.<\/p>\n

Viktigast av allt, det l\u00e5ter dig f\u00e5nga hela webbsidan, inte bara omr\u00e5det du ser p\u00e5 sk\u00e4rmen. Det \u00e4r ov\u00e4rderligt n\u00e4r du beh\u00f6ver rapportera flera problem p\u00e5 en l\u00e5ng sida, och att f\u00e5nga dem alla skulle ta tre till fyra sk\u00e4rmdumpar.<\/p>\n

Ett annat snyggt knep \u00e4r att kunna kopiera sk\u00e4rmdumpen till urklipp och klistra in den direkt i en chatt eller ett e-postmeddelande, ist\u00e4llet f\u00f6r att lagra v\u00e4rdel\u00f6sa bildfiler p\u00e5 din dator.<\/p>\n

Installera:<\/strong> Enkel sk\u00e4rmdump<\/p>\n

<\/span> 7. Muzli 2<\/span><\/h2>\n
\n<\/figure>\n

Slutligen finns det en avg\u00f6rande uppgift du m\u00e5ste ta itu med varje morgon: att skaka av dig resterna av s\u00f6mn och komma in i sp\u00e5ret. Muzli 2 av InVision kommer att fungera som din morgontidning med kurerade artiklar om konst, design, UX och teknik.<\/p>\n

Muzli ers\u00e4tter din standardflik f\u00f6r Chrome och l\u00e5ter dig anpassa vad du ser d\u00e4r. Beroende p\u00e5 dina intressen kommer Muzli att v\u00e4lja fl\u00f6den \u00e5t dig, med webbplatser som str\u00e4cker sig fr\u00e5n Dribble och Behance till 99designs och Creative Bloq. Massor av inspiration att bl\u00e4ddra igenom medan du dricker ditt f\u00f6rsta kaffe!<\/p>\n

Om du tycker att en hel webbl\u00e4sarflik fylld med designinneh\u00e5ll \u00e4r f\u00f6r intensiv, har Muzli ocks\u00e5 en Lite-version. Det kommer inte att \u00e5sidos\u00e4tta din standardflik, och du kommer att kunna komma \u00e5t fl\u00f6det n\u00e4r du vill bara genom att klicka p\u00e5 till\u00e4ggsikonen.<\/p>\n

Installera:<\/strong> Muzli 2<\/p>\n

<\/span> Skaffa Chrome-till\u00e4gg f\u00f6r alla dina designuppgifter<\/span><\/h2>\n

Chrome-till\u00e4ggen p\u00e5 den h\u00e4r listan matchar inte din designprogramvara, men de t\u00e4cker alla sm\u00e5 saker som kommer med att vara designer \u2014 vare sig det \u00e4r typografisk information eller att samarbeta med dina kollegor.<\/p>\n

N\u00e4r du v\u00e4l inser att Chrome Web Store \u00e4r full av verktyg kan det vara sv\u00e5rt att sluta l\u00e4gga till nya. S\u00e5 l\u00e4r dig hur du hanterar dina Chrome-till\u00e4gg innan de g\u00e5r \u00f6ver styr.<\/p>\n

Om f\u00f6rfattaren<\/strong><\/p>\n

Alice Kotlyarenko (28 artiklar publicerade)
<\/strong><\/p>\n

Alice \u00e4r en teknikskribent med en svag punkt f\u00f6r Apple-teknik. Hon har skrivit om Mac och iPhone ett tag och \u00e4r fascinerad av hur tekniken omformar kreativitet, kultur och resor.<\/p>\n

Mer fr\u00e5n Alice Kotlyarenko<\/p>\n

<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n

G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n

Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n