Annons

Som webbdesigner, vilken programvara måste du absolut ha på din dator? Chansen är stor att det är Photoshop och Illustrator. Och även om det är det väsentliga i ditt designarbetsflöde finns det mindre verktyg som du förmodligen inte vet att du behöver.

Det bästa är att du inte ens behöver ladda ner dem - bara installera dessa Chrome-tillägg och försvinna. Från att identifiera teckensnitt på sidor till att mäta avstånd mellan webbelement kommer dessa Chrome-tillägg för webbdesign att göra ditt liv enklare.

1. Dropbox för Gmail

Dropbox för Gmail, ett Chrome-tillägg för att förhandsgranska Dropbox-länkar

Dropbox började som filhostingstjänst, men det upptäckte snart att dess stora publik är designers som använder tjänsten för att dela sitt arbete med kollegor. Eftersom designfiler ofta är för stora för e-postbilagor, är det lättare att skicka en Dropbox-länk till filen.

Dropbox för Gmail gör processen ännu mer bekväm. När du länkar till din fil med hjälp av en Dropbox-knapp längst ner i det nya e-postfönstret får mottagaren en sniktur av vad du skickar. Länkar till bildfiler kommer att ladda upp bilderna direkt till e-postmeddelandet, och länkar till andra typer av filer genererar en praktisk förhandsvisning.

instagram viewer

Installera:Dropbox för Gmail

2. FontFace Ninja

FontFace Ninja, ett Chrome-tillägg som fångar typsnitt på en webbsida

Med tusentals tillgängliga teckensnitt är dina typografimöjligheter oändliga. Speciellt om du kan identifiera ett vackert teckensnitt du ser någonstans och låna det till ditt eget projekt.

FontFace Ninja är en Chrome-förlängning som hjälper dig att göra just det. Mycket som verktyg som hittar teckensnitt från bilder WhatTheFont och 4 alternativ för att hitta teckensnitt från bilderVill du hitta teckensnitt från bilder? Det finns onlineverktyg som kan göra det åt dig, inklusive WhatTheFont och olika alternativ. Läs mer det hjälper dig att identifiera de teckensnitt du ser online. Den enda skillnaden är att FontFace Ninja läser de typsnitt som är kodade i sidans CSS, som typsnitt av rubriker och texttext.

När du startar FontFace Ninja kommer den att visa informationen om det teckensnitt du riktar det till - och inte bara typsnittet, utan också vikt, storlek, höjd, bredd och färg. För att bokmärka det stilsorten behöver du ett konto på systertjänsten, FontFace Dojo.

Installera:FontFace Ninja

3. ColorPick pipett

ColorPick Eyedropper, en Chrome-förlängning för att fånga färger

Oavsett hur bra öga för färg du har, är det svårt att återskapa en viss nyans som du såg online såvida du inte känner till RGB- eller HTML-värden. Lyckligtvis behöver du inte gissa om du har ColorPick pipett.

Tycka om de bästa apperna för färgväljare för Mac De fem bästa apperna för färgväljare för MacBehöver du hitta den perfekta färgen på din Mac? Prova dessa macOS-färgväljare-appar för att enkelt identifiera, spara, formatera och kopiera färger. Läs mer , ColorPick Eyedropper visar värdena för alla färger du pekar på. Skillnaden är att den alltid finns där i din webbläsare och att du inte behöver ladda upp någonting - klicka bara på ikonen och flytta målet till rätt plats.

Tillägget läser färger från text, bilder och i stort sett allt du kan se på en webbsida (även annonserna). När du fångar in en färg visar den HTML-, RGB- och HSL-värdena för den.

Installera:ColorPick pipett

4. Mått

Dimensions, ett Chrome-tillägg för att mäta objekt på en webbsida

Denna öppen källkodsförlängning är en sökning för webbdesigners, särskilt om du gör engångs spelningar för små företag. När en klient ger dig en webbplats utan tidigare filer eller dokumentation och ber dig utforma "en sida som denna, men med annan text och bilder", är det svårt att räkna ut layouten.

Dimensions gör att du enkelt kan mäta höjden och bredden på alla element på sidan, samt marginalerna mellan dem. Det gör det enkelt att återskapa befintliga sidor och dubbelkontrollera dina egna mönster efter att de har tagits i produktion.

Installera:Mått

5. Visuell inspektör

Visual Inspector, ett Chrome-tillägg för att inspektera webbsidor och ge feedback

Visual Inspector är ett kraftfullt återkopplings- och samarbetsverktyg för designteam som kombinerar funktionerna i de tre föregående tilläggarna och lägger till ännu mer.

I Inspektera kan du välja valfritt element på sidan för att få fullständig information om det, från dimensioner till filnamnet. De Färger och Typografi med underflikar kan du se färgpaletten och alla teckensnitt på en gång Tillgångar samlar alla bilder på sidan på ett ställe.

De Samarbeta där du kan ge feedback och diskutera med ditt team, och det är lätt att lämna en kommentar genom att klicka på valfritt element på sidan.

Som de flesta avancerade verktyg har Visual Inspector en prislapp: du måste betala från $ 9 / användare / månad för att lägga till kommentarer och synkronisera ändringar. Emellertid är dess grundläggande funktioner som inspektion av färger, teckensnitt och bilder gratis att använda.

Installera:Visuell inspektör

6. Enkel skärmdumpning

Easy Screen Capture, en Chrome-förlängning för att ta skärmdumpar

En skärmdumpförlängning kan verka överflödig eftersom ta en skärmdump på Mac Hur man tar skärmbilder på Mac: tips, verktyg och trick att vetaBehöver du ta en skärmdump på din Mac? Här är de bästa genvägar, tips och appar för macOS-skärmdumpar. Läs mer är en bris, och fånga din skärm på Windows Hur man tar den perfekta skärmbilden i WindowsDet bästa sättet att ta en skärmdump beror på vilken version av Windows du använder. Vi visar dig de subtila skillnaderna, ger felsökningstips och avslöjar de bästa kortkommandona och verktygen. Läs mer är bara lite mer krångel. Men Easy Screen Capture har en hel del försäljningspoäng.

Det viktigaste är att det låter dig fånga hela webbsidan, inte bara området du ser på skärmen. Det är ovärderligt när du behöver rapportera flera problem på en lång sida och att ta dem alla skulle ta tre till fyra skärmdumpar.

Ett annat snyggt trick är att kunna kopiera skärmdumpen till urklipp och klistra in det direkt i en chatt eller e-post, snarare än att förvara värdelösa bildfiler på din dator.

Installera:Enkel skärmdumpning

7. Muzli 2

Muzli 2, en Chrome-förlängning för designinspiration

Slutligen finns det en avgörande uppgift du måste hantera varje morgon: skaka av resterna av sömn och komma in i spåret. Muzli 2 av InVision kommer att fungera som din morgontidning med kuraterade artiklar om konst, design, UX och teknik.

Muzli ersätter din standardflik för Chrome och låter dig anpassa det du ser där. Beroende på dina intressen väljer Muzli flöden åt dig, med webbplatser som sträcker sig från Dribble and Behance till 99 design och Creative Bloq. Massor av inspiration att bläddra igenom medan du smuttar på ditt första kaffe!

Om du tycker att en hel webbläsarflik fullpackad med designinnehåll är för intensiv har Muzli också en Lite-version. Den kommer inte att åsidosätta din standardflik och du kan komma åt flödet när du vill bara genom att klicka på tilläggsikonen.

Installera:Muzli 2

Få Chrome-tillägg för alla dina designuppgifter

Chrome-tilläggarna på den här listan matchar inte din designprogramvara, men de täcker alla små saker som följer med att vara designer - vare sig det är typografi intel eller samarbetar med din kollegor.

När du inser att Chrome Web Store är full av verktyg kan det vara svårt att sluta lägga till nya. Så lär dig hur du hanterar dina Chrome-tillägg Hur du hanterar dina Chrome-tillägg utan något problemAtt korrekt hantera Chrome-tillägg kan göra din webbläsare ännu kraftigare. Här är några viktiga tips och trick du bör känna till. Läs mer innan de går ur handen.

Alice är en teknikförfattare med en mjuk plats för Apple tech. Hon har skrivit om Mac och iPhone ett tag och är fascinerad av hur tekniken omformar kreativitet, kultur och resor.