Photoshop 101: en introduktion til webudviklere

Introduktion

Når vi arbejder som webudvikler, er vi ofte nødt til at integrere skabeloner. De kan være fra Photoshop eller anden software. I denne artikel vil vi se på det grundlæggende i Photoshop for webudviklere.

Dette indhold blev oprindeligt skrevet til en workshop for DAMDigital London.

Adobe Photoshop er et raster-grafikredigeringssoftware, hvilket betyder, at det er et program, der giver brugerne mulighed for at oprette og redigere billeder.

Den blev udgivet i 1988 og er vokset til at være industristandarden for grafiksoftware.

Du kan downloade en gratis prøveversion af Photoshop på Adobes websted.

Arbejdsområde

Photoshops arbejdsområde er modulært, så du kan tilpasse det afhængigt af det arbejde, du laver. Nogle standardarbejdsområder er allerede konfigureret i Photoshop. I denne artikel bruger jeg den Graphic and Web. Gå ind på for at skifte til dette arbejdsområde Window/workspace/Graphic and Web.

Lad os se på vores arbejdsområde:

  • A - Menulinje : Her finder du de fleste muligheder for Photoshop.
  • B - Indstillingslinje : Denne bjælke giver dig alle muligheder for det aktuelt valgte værktøj.
  • C - Værktøjskasse : Dette panel indeholder alle de tilgængelige værktøjer fra Photoshop. Relaterede værktøjer er grupperet sammen, og du kan længe klikke på et af dem for at se alle værktøjerne.
  • D - Paneler : Det er det område, hvor du har dine grundlæggende paneler åbne, såsom Layers, History, og så videre. For at åbne et panel skal du bare gå indWindow/(Panel that you want to open)

Opret en ny fil

Når du opretter en ny fil i Photoshop, skal du først vide for hvilket medium designet skal bruges - hvilket betyder, skal det bruges til en skærm (web, film eller video) eller til udskrivning?

Afhængigt af svaret på dette spørgsmål skal du ændre PPI-værdien (Pixels per Inch).

Pixies per inch (PPI) er en måling, der bruges til at definere opløsningen på en computerskærm. Denne måling evaluerer den billed- / billedkvalitet, som en bestemt computer- eller outputvisningsenhed kan vise. Pixels per inch er også kendt som pixeltæthed. Techopedia

Til udskrivning har du normalt brug for 300PPI, men det afhænger faktisk af printeren og størrelsen på det udskrevne dokument. Du skal også ændre din farve til CMYK, men igen afhænger det af, hvordan du udskriver dit dokument. Hvis du vil lære mere om RGB- og CMYK-farver, skal du tjekke denne artikel.

For skærme og web? Har du brug for 72PPI og RGB-farve. Derefter skal du angive din skærmstørrelse. Jeg vil anbefale at designe først til mobil, derefter tablet og desktop.

Som webudvikler behøver du muligvis ikke at oprette en ny fil. Chancerne er, at du bliver nødt til at arbejde med et design leveret af webdesignere.

Vi skal nu se på en eksisterende .psdskabelon og arbejde med den for at kigge rundt i Photoshop.

Du kan downloade og åbne denne PSD-skabelon fra Luis Costa.

Lag

Et af kernefunktionerne i Photoshop er lag . Lag er som en stak ark, og du kan se gennem gennemsigtige områder eller områder med lav opacitet (delvist gennemsigtig).

Du kan åbne lagpanelet i Window/Layers.

Det øverste lag i dette panel placeres over alle de andre lag nedenunder. Lag kan også organiseres i mapper. Det er vigtigt at navngive lag og mapper korrekt. Det vil hjælpe under integrationen.

Ved siden af ​​hver mappe og lag har du et øjeikon. Dette giver dig mulighed for at skifte deres synlighed.

Din PSD kan have mange lag og dokumenter. En måde til hurtigt at finde et lag er at vælge move tool (v). Højreklik på lærredet, hvor du vil finde dit lag. Du får alle lagene i det område, hvor du har højreklikket. Ved at klikke på en vælger den dette lag i dit lagpanel.

Værktøjskasse

Photoshop leveres med en masse værktøjer. Jeg vil vise dig et par nyttige, der kan hjælpe dig?.

For det første, hvis du bare installerer Photoshop CC 2018, skal du gendanne alle værktøjer. Så gå til Edit > Toolbar og klik på knappen Gendan standardindstillinger.

Vi vil se nogle af de mest nyttige værktøjer, du vil bruge til at integrere en skabelon:

A - Udvælgelsesværktøjer

  • Flyt : Tillader brugeren at flytte et lag rundt på lærredet. Som vi så tidligere, kan det også bruges til at finde et lag, hvis du højreklikker på dit lærred.
  • Rectangular Marquee : Dette værktøj bruges til at vælge et område på lærredet, der skal kopieres og indsættes, udfyldes osv. Det kan også bruges til at måle. Når dit valg er udført, kan du finde størrelsen på det valgte område i Window/Info. Du skal muligvis ændre standardenheden i Photoshop og Edit/preferences/general/Unit & Rulersderefter indstille dine enheder til pixels.

B - Afgrøde- og skiveværktøjer

  • Beskæring : Dette værktøj kan ... beskære et billede?. I værktøjsindstillingerne (Indstillingslinje) kan du indstille et billedformat, du vil beholde.

C - Måleværktøj

  • Eyedropper : Eyedropper giver dig mulighed for hurtigt at få en farvehenvisning i dit design. Klik bare hvor du vil have farven. Derefter skifter forgrundsfarven nederst i din værktøjskasse til den valgte farve. Hvis du klikker på forgrundsfarven, åbner den color picker window. Derfra kan du få værdien af ​​din farve.
  • Farveprøve : Når du integrerer dit design, skal du muligvis vælge flere farver. Vi skal bruge infovinduet igen Window/Info. Dette værktøj giver os mulighed for at oprette en farvesampler. Klik bare på det område af det billede, du vil have farverne fra. Du får hver farve i infopanelet. Du kan ændre farvetypen til web ved at klikke på pipette-ikonet under nummeret.
  • Lineal : hjælper dig med at måle din skabelon. Alle oplysninger vises i dit infovindue. Vedligehold Shiftved måling, så din lineal forbliver lige. Du kan også få vinkler.

G - Navigationsværktøj

  • Hånd : Dette værktøj hjælper dig med at komme rundt på lærredet. Du kan få adgang til dette værktøj når som helst ved at holde mellemrumstasten og trække det med musen.
  • Zoom : Giver dig mulighed for at zoome ind og ud (du kan du Ctrl+ +, eller Ctrl+ -også).

Vejledninger

Som du måske har bemærket, når du åbner vores PSD-fil, har vi nogle grønne linjer på vores skabelon. De er guider. De er dybest set hjælpere, der hjælper dig med at opbygge eller måle ting omkring dit lærred.

Du kan flytte eksisterende guider ved hjælp af move tool(v).

For at oprette nye guider skal du åbne din lineal: View/Rulereller Ctrl+ R. Linealen vises i dit arbejdsområde. Derefter fra linealen kan du trække en ny guide ind på dit lærred.

For at fjerne en guide skal du bruge move tool(v) og sætte guiden tilbage i linealen.

For at skjule og vise alle dine guider kan du bare bruge Ctrl+ Heller gå til View/Extras.

Smarte genstande

Hvad er smarte objekter?

Smarte objekter er lag, der indeholder billeddata fra raster- eller vektorbilleder, såsom Photoshop- eller Illustrator-filer. Smart Objects bevarer et billedes kildeindhold med alle dets originale egenskaber, så du kan udføre ikke-destruktiv redigering af laget. Adobe

Smarte objekter kan genkendes i dine lag, når de har følgende ikon i deres miniaturer:

Smarte objekter er virkelig nyttige, hvis du arbejder med vektortypebilleder (SVG, EPS, AI), men er også nyttige med andre komplekse rasterfiler.

Lad os prøve at importere et smart objekt til vores PSD. Download en SVG-fil fra flaticon. For at importere vores SVG i vores lærred skal du bare trække filen ind i lærredet. Vi kan nu redigere vores SVG i illustrator eller enhver anden vektorsoftware ved at dobbeltklikke på miniaturen eller vores smarte objekt. Ændringer vises i vores PSD.

Smarte objekter kan dog gøre mere end det. Hvis du vil lære mere om dem, skal du tjekke 10 ting, du har brug for at vide om smarte objekter i Photoshop.

Eksport aktiver

For det første bare en påmindelse om, at Photoshop er en rastersoftware , ikke en vektorsoftware . Dette betyder, at vi “ikke” kan eksportere SVG-filer fra Photoshop. For at gøre dette skal du f.eks. Eksportere disse typer filer fra Illustrator eller Inkscape.

På nettet ønsker vi at have lyse billedfiler. Til fotografering bruger vi en komprimeret .jpgfil. Hvis du har brug for gennemsigtighed (alfakanal), bruger vi .pngfilen. Til et animeret billede bruger vi en .gif. Hvis du har brug for et vektorbillede (for eksempel ikoner), er det bedste at eksportere din fil som .svg. Hvis du vil have mere information om alle de tilgængelige filer i Photoshop, kan du tjekke "filformater" på Adobes hjemmeside.

Eksporter vores lærred

Følg disse trin for at eksportere lærredet:

  1. Gå til File/Export/Save for Web
  2. Vælg filformat
  3. Vælg billedstørrelse
  4. Vælg kvalitet
  5. Gemme

Eksporter kun et aktiv fra lærredet

Du bliver sandsynligvis nødt til at eksportere nogle aktiver i din skabelon.

Lad os eksportere venstre pil i produktkarrusellen:

Ved hjælp af flytteværktøjet skal vi finde vores lag. Højreklik på pilen og vælg laget Arrow Left. Højreklik nu bare på dette lag i lagpanelet. Vælg export asog vælg den type fil, du har brug for.

Vi kan også eksportere mapper.

Handlinger

Hvad er en handling i Photoshop?

En handling er en række opgaver, som du afspiller på en enkelt fil eller et parti af filer - menukommandoer, panelindstillinger, værktøjshandlinger osv. For eksempel kan du oprette en handling, der ændrer størrelsen på et billede, anvender en effekt på billedet og derefter gemmer filen i det ønskede format. Adobe

Denne funktion er virkelig praktisk, hvis du vil ændre størrelsen på et antal billeder til internettet!

Lad os oprette en ny handling for at beskære et billede og eksportere dette:

  1. Download en masse billeder fra //unsplash.com/
  2. Åbn et af disse billeder
  3. Åbn Actionspanelet Window/Actions,
  4. Opret en ny handling ved at klikke på ikonet Opret en ny handling (Den til venstre for bin-ikonet). Lad os navngive denne handling Eksport til web - klientnavn.
  5. Vi optager nu vores handling. Optageknappen er rød, og du kan stoppe optagelsen ved at klikke på stopikonet (firkantet ikon til venstre) /
  6. Vælg beskæringsikonet, og indstil forholdet til 1x1, og beskær billedet /
  7. Nu vil vi eksportere vores image File/Export/Save for Web, vælg JPG, kvalitet 50% og bredde 500px.
  8. Klik på Gem, og vælg din destinationsmappe.
  9. Luk dit billede uden at gemme det.
  10. For at stoppe optagelsen skal du klikke på stopikonet (firkantet ikon til venstre).

Vi har nu vores handling, så vi kan åbne et billede og bare "spille" vores handling ved at klikke på afspilningsknappen.

Hvis vi vil anvende vores handling på en række billeder, skal du bare følge disse trin:

  1. Gå til File/Automate/Batch
  2. Vælg Sourcemappen.
  3. Vælg vores handling
  4. Klik på Ok

Og voilà! Alle dine billeder er i eksportmappen.

Jeg håber, du har nydt denne lille introduktion til Photoshop 101 til webudviklere. Hvis du vil have en 102-version, så lad mig det vide, hvad du gerne vil vide eller læse mere om?.

  • @vince_umo
  • vincent-humeau.com