7 måste ha Chrome-tillägg för webbdesigners

• Kreativ

Annons

Som webbdesigner, vad är den programvara du absolut måste 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.

Lås upp fusket "Google Chrome Keyboard Shortcuts Shortcut" nu!

Detta kommer att registrera dig för vårt nyhetsbrev

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 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 smyga 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.

Installera: Dropbox för Gmail

2. FontFace Ninja

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

FontFace Ninja är en Chrome-förlängning som hjälper dig att göra just det. Mycket som verktygen som hittar teckensnitt från bilder WhatTheFont och 4 alternativ för att hitta teckensnitt från bilder WhatTheFont och 4 alternativ för att hitta teckensnitt från bilder Vill 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 teckensnitt 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 typsnittet behöver du ett konto på systertjänsten, FontFace Dojo.

Installera: FontFace Ninja

3. ColorPick-pipett

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

Gilla de bästa färgväljaren-apparna för Mac De 5 bästa färgväljaren-apparna för Mac De 5 bästa färgväljaren-apparna för Mac Behö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ågot - bara klicka 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 en färg visar den HTML-, RGB- och HSL-värdena för den.

Installera: ColorPick Eyedropper

4. Mått

Denna öppen källkodsförlängning är ett fynd 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 ä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.

På fliken Inspektera kan du välja valfritt element på sidan för att få fullständig information om det, från dimensioner till filnamnet. Underflikarna Färger och typografi låter dig se färgpaletten och alla teckensnitt på en gång, medan tillgångar samlar alla bilder på sidan på ett ställe.

Fliken Samarbeta är 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å något 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: Visual Inspector

6. Enkel skärmdumpning

En skärmdumpförlängning kan verka överflödig, eftersom du tar en skärmdump på Mac Hur man tar skärmbilder på Mac: Tips, verktyg och knep för att veta hur man tar skärmbilder på Mac: Tips, verktyg och knep att veta Behö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 vind, och att fånga din skärm på Windows Hur du tar den perfekta skärmbilden i Windows Hur du tar den perfekta skärmdumpen i Windows Det 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 det område 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: Easy Screen Capture

7. Muzli 2

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. Det 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 designmjukvara, men de täcker alla små saker som följer med att vara designer - vare sig det är typografi eller samarbetar med dina 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 man hanterar dina Chrome-tillägg utan någon ansträngning Hur man hanterar dina Chrome-tillägg utan någon boter Att 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.

Utforska mer om: Browser Extensions, Google Chrome, Web Design.