Opslaan voor web en apparaten in Adobe Photoshop CS5. Beeldvoorbereiding en beeldgrootte voor web

module Opslaan voor internet en apparaten(Bespaar voor web en apparaten), wat uw werk veel gemakkelijker maakt, biedt meer flexibiliteit en betere kwaliteit voor het exporteren van afbeeldingen naar GIF-, JPEG- en PNG-indelingen. Het hoofdvenster van de module wordt getoond in Fig. 15.10. Het wordt geopend door het commando met dezelfde naam uit het menu Bestand(Bestand). Voer deze opdracht uit voor het bestand BAS-RELIEF1_NA_DOM_SINGER.jpg.

Rijst. 15.10. Dialoogvenster Opslaan voor internet en apparaten(tabblad 4-Up)

Het grootste deel van het venster wordt ingenomen door het voorbeeldgebied. Het moet in een van de vier modi met tabbladen staan:

± Origineel(Origineel). Het beeld is in zijn oorspronkelijke vorm.

± Geoptimaliseerd(Geoptimaliseerd). Beeldweergave na optimalisatie. Zo ziet het eruit in de browser.

± 2-Up(Twee). Gelijktijdige weergave van het origineel en het geoptimaliseerde beeld. Beide vensters in de viewport kunnen echter een geoptimaliseerde afbeelding weergeven, maar met verschillende optimalisatie-opties.

± 4-Up(Vier). In deze modus is het weergavegebied verdeeld in vier vensters, waarin u een demonstratie van het origineel en het geoptimaliseerde beeld met verschillende optimalisatieparameters kunt bestellen. Deze modus is handig om te gebruiken om de beste parameters te selecteren. Hiermee kunt u het effect van compressie of gammareductie op de beeldkwaliteit en -grootte visueel evalueren.

De besturing van de weergaveschaal in het weergavegebied is op dezelfde manier georganiseerd als in Photoshop zelf: met behulp van de lijst met schalen in de linkerbenedenhoek van het venster en hulpmiddelen Zoom(schaal) en Hand(Hand).

Onder elk venster van het weergavegebied worden het bestandsformaat van de afbeelding (GIF, JPEG of PNG), optimalisatieparameters, bestandsgrootte en de tijd dat deze met een bepaalde modemsnelheid in de browser wordt geladen, aangegeven. Selecteer het in het weergavemenu dat wordt geopend door op de ronde driehoekige pijlknop te drukken. Daar vindt u ook opties voor het weergeven van kleuren:

± Browser-dithering(Vlotte overgang van kleuren in de browser). Als de afbeelding meer kleuren bevat dan de monitor kan weergeven, worden deze bij benadering in de browser weergegeven als u het selectievakje inschakelt.

± Automatisch segment verbergen(Verberg de verdeling in fragmenten). Het wordt gebruikt voor afbeeldingen die in fragmenten worden "geknipt".

± Niet-gecompenseerde kleur(Geen aanpassing). Kleuren worden weergegeven in het voorbeeldgebied "zoals ze zijn", zonder correcties.

± Standaard Windows-kleur(Windows standaard kleuren). Op deze manier worden kleuren weerspiegeld op de monitoren van computers met Windows.

± Standaard Macintosh-kleur(Macintosh standaardkleuren). Afbeeldingen lijken iets lichter op Macintosh-computers omdat Mac OS een andere gamma-instelling (1.8) gebruikt dan Windows (2.2). Door deze optie te kiezen, kunt u inschatten hoe de afbeelding eruit zal zien voor Macintosh-gebruikers.

± Documentkleurprofiel gebruiken(Gebruik documentprofiel). De weergave wordt aangepast volgens de instellingen voor kleurbeheer die in Photoshop zijn gemaakt.

In hetzelfde weergavegebied kunt u de parameters van de gebruikte modem specificeren.

Laten we dit commando eens in actie proberen op de afbeelding van het bas-reliëf uit het bestand BAS-RELIEF2_NA_HOME_SINGER.jpg.

1. Open het bestand BASELIEF2_NA_DOM_ZINGER.jpg.

2. Selecteer de opdracht Opslaan voor internet en apparaten(Opslaan voor web en apparaten) in het menu Bestand(Bestand).

3. Selecteer de modus 2-Up(Twee) door naar het betreffende tabblad te gaan (fig. 15.11).

Rijst. 15.11. Dialoogvenster Opslaan voor internet en apparaten(tabblad 2-Up)

4. Rechts in het venster vindt u bedieningselementen voor exportparameters. In de lijst Vooraf ingesteld(Voorgestelde instellingen) selecteer het opslagformaat JPEG-medium(afb.15.12).

5. Lijst Vooraf ingesteld(Voorgestelde instellingen) biedt enige typische kennis van beeldkwaliteit: JPEG Hoog(Hoog), JPEG Laag(Laag), JPEG-medium(Het gemiddelde). Meer fijnafstelling wordt uitgevoerd met een schuifregelaar Kwaliteit(Kwaliteit) aan de rechterkant. Stel het eerst in op de maximale kwaliteit, 100%. Bij deze hoge waarde zal het beeld aan de rechterkant van de viewport (geoptimaliseerd) nauwelijks verschillen van het origineel aan de linkerkant. Verlaag de beeldkwaliteit met

schuifregelaar Kwaliteit(Kwaliteit) tot 15-18%. Bekijk de informatievelden in de betreffende delen van de viewport. Het origineel, ongecomprimeerd, is 3,21 MB en het gecomprimeerde is 109 KB. Zelfs met zo'n lage compressieverhouding is de bestandsgrootte bijna vier keer zo groot.

6. Kijk naar de geschatte laadtijd voor een gecomprimeerde afbeelding. Het zal 40 seconden zijn bij een modemsnelheid van 28,8 KB / s. Stel jezelf nu voor als lezer van een webpagina die vijf van deze afbeeldingen bevat. Wacht je tot de hele pagina is geladen? Hoogstwaarschijnlijk nee. Om de lezer in gedachten te houden, moeten afbeeldingen zo compact mogelijk worden gemaakt. In het geval van het JPEG-formaat hoeft u alleen maar de kwaliteit te verlagen door de compressieverhouding te verhogen. Stel de schuifregelaar in Kwaliteit(Kwaliteit) dichter bij links. Het is duidelijk dat de kwaliteit is verslechterd, er is een karakteristiek "vuil" verschenen. Maar is het echt zo erg?

7. Laten we nu nog een paar seconden spelen voor de lezer van de webpagina. De compressieverhouding kan worden verhoogd door de afbeelding vooraf onscherp te maken. Schuifregelaar vervagen(Vervagen) in het gebied Vooraf ingesteld(Voorgestelde instellingen) elimineert de noodzaak om het exportfiltervenster te verlaten. Natuurlijk mag de eikel niet te groot zijn, zodat de beeldkwaliteit er niet onder lijdt. Een waarde van 0,2 voldoet ruimschoots aan deze eis.

8. Selectievakje Progressief(Progressief) stelt in dat de afbeelding wordt geïnterlinieerd wanneer deze in de browser wordt geladen. Het vergroot de bestandsgrootte enigszins, maar laat de lezer van de pagina ook zelf bepalen of hij moet wachten op de volgende download. Installeer het.

9. Selectievakje ICC-profiel(ICC-profiel) sluit een kleurprofiel in een afbeeldingsbestand in. Schakel dit selectievakje alleen in als u hier zeer goede redenen voor hebt, aangezien het ingesloten profiel de bestandsgrootte met 3-4 KB vergroot.

10. Selectievakje Geoptimaliseerd(Geoptimaliseerd) bevat aanvullende optimalisaties van de interne structuur van de JPEG, waardoor de bestandsgrootte soms verder wordt verkleind. Het neveneffect van optimalisatie kan alleen van invloed zijn op zeer oude versies van browsers. Alle nieuwe browsers verwerken dergelijke bestanden normaal.

11. De juistheid van de gemaakte instellingen kan eenvoudig worden gecontroleerd door de voltooide afbeelding naar de browser te downloaden. U hoeft hiervoor niet eens het venster van de exportmodule te verlaten. Klik op de knop Device Central(Device Center), en de module zal de radiotelefoonbrowser openen met de afbeelding erin geladen (Fig. 15.13). De achtergrondkleur van de pagina kan vooraf worden ingesteld met behulp van de lijst Mat(Pagina achtergrondkleur).

Rijst. 15.13. Bekijk een voorbeeld van de geoptimaliseerde afbeelding in het browservenster

We hebben geleerd hoe we lettertypen in Photoshop kunnen laden, ik raad iedereen die het nog niet heeft gelezen dit artikel aan.

Vandaag gaan we verder met het leren van de basis van Photoshop, het onderwerp van de tutorial van vandaag. Een foto voorbereiden voor internet... Misschien heb je meteen vragen, waarom en waarom een foto maken voor internet? Je kunt gewoon de download nemen en dat is alles.

Ja, inderdaad, in sommige gevallen kun je gewoon de download nemen en dat is het, maar dit brengt veel problemen en ongemakken met zich mee. Ik heb hieronder gegeven: 5 redenen: waarom u foto's voor internet moet voorbereiden:

5 redenen om afbeeldingen voor WEB voor te bereiden

Groot beeldgewicht. Als u bijvoorbeeld een foto op uw website plaatst die enkele megabytes weegt, overbelast en verstoort u ten eerste het werk van uw server, en ten tweede zal de pagina waar u uw foto heeft geplaatst zeer lang laden. En dit heeft grote invloed op het siteverkeer. Onthoud dat mensen er niet van houden om sites te bezoeken die traag zijn en er lang over doen om te laden.

Tijdens de lay-out van webdesign moeten alle elementen van de lay-out van de toekomstige site (afbeeldingen in de .png- en .jpg-formaten) voorbereid zijn voor internet, zonder dat deze lay-out onmogelijk is.

De hoogte-breedteverhouding van de foto is niet juist, waardoor vervorming ontstaat. Dit punt behoeft naar mijn mening geen verduidelijking.

Hoog verlies van beeldkwaliteit. Wanneer u uw nieuwe foto's uploadt, bijvoorbeeld naar sociale netwerken of naar online veilingen, is het u waarschijnlijk opgevallen dat ze niet zo helder, gekleurd en contrastrijk zijn als aanvankelijk. Het punt is dat wanneer u uw afbeeldingen uploadt naar
alle internetbronnen, ze comprimeren en verslechteren automatisch de kwaliteit van uw afbeeldingen.

In sommige situaties is het nodig om een afbeelding van een bepaalde grootte en formaat te downloaden. U moet bijvoorbeeld een pictogram van 16 × 16 pixels uploaden in het formaat .png voor uw website. Dit alles kan eenvoudig en eenvoudig in Photoshop worden gedaan.

Ons favoriete programma doet uitstekend werk met al deze taken. Adobe photoshop cc... De ontwikkelaars van Photoshop kwamen met een zeer nuttige en noodzakelijke module met de functie om afbeeldingen voor internet op te slaan ( Opslaan voor internet ) Het is een krachtige module voor het beheren van de processen van optimalisatie en het opslaan van documenten, die automatisch de optimale instellingen voor het opgeslagen bestand selecteert. Deze module ondersteunt en werkt met de meest gangbare bestandsformaten voor internet. .jpg, .gif, .png.

De voordelen en het gemak van het gebruik van deze module zijn nuttige en noodzakelijke functies als:

Meerdere weergavemodi kiezen terwijl u een afbeelding voor internet optimaliseert

Het formaat selecteren waarin de afbeelding wordt opgeslagen

De kwaliteit en grootte van de opgeslagen afbeelding selecteren

selectie van de optimalisatiemethode, compressie en bekijken van het gewicht van de geoptimaliseerde afbeelding.

Dit is waar de hele theorie eindigt, laten we verder gaan met de praktijk. Laten we eerst een afbeelding of foto openen die we voor internet opslaan. Ik zal werken met deze afbeelding:

Om naar opslaan voor het web te gaan, ga naar het bovenste menu Bestand / Opslaan voor web of gebruik sneltoetsen Ctrl + Alt + Shift + S.

Een venster met instellingen zou voor ons moeten openen, zoals weergegeven in de onderstaande schermafbeelding. U hoeft niet bang te zijn voor een groot aantal knoppen en instellingen, we zullen er slechts enkele gebruiken en een beetje hieronder in detailwe zullen analyseren waar ze voor zijn en hoe ze te gebruiken.

Beschrijving van de opties:

1. Vier tabbladen met voorbeeldopties.

- Voorletter - dit is wanneer je je originele afbeelding actueel ziet

- Optimalisatie - dit is wanneer u alleen de geoptimaliseerde afbeelding in het voorbeeld ziet

- 2 opties - dit is wanneer u uw originele afbeelding bovenaan ziet en de geoptimaliseerde onderaan. Deze optie is het handigst en ik vind het het leukst, daarom heb ik ervoor gekozen.

- 4 opties - dit is wanneer je in de preview de originele afbeelding ziet, de afbeelding waarvoor je hebt geselecteerd, de afbeelding in kwaliteit 22 en de afbeelding in kwaliteit 11.

2. Het formaat van het opgeslagen bestand. In ons geval kiezen we voor JPEG.

- PNG - bestandsformaat voor het opslaan van webafbeeldingen. Er zijn twee soorten, 8 bit - geïndexeerde afbeeldingen, 24 bit - "alle" kleuren. Meestal worden cliparts en logo's in dit formaat op een transparante achtergrond opgeslagen.

- GIF Is een verouderd bestandsformaat voor het opslaan van webafbeeldingen. Meestal worden bestanden met een beperkt aantal kleuren, tabellen, diagrammen, logo's in dit formaat opgeslagen; het formaat ondersteunt ook animatie en transparante achtergronden. Dit formaat wordt steeds minder gebruikt naarmate het betere PNG-formaat is ontstaan.

- JPEG - Het meest populaire formaat. Perfect voor het opslaan van foto's en afbeeldingen met veel kleuren, tinten, effecten.

3. De waarde van kwaliteit. Ik hou van Hoog.

Het gemiddelde

Hoog

Heel hoog

Het beste

4. Hier zetten we een vinkje in de waarde " Optimalisatie « ... Overweeg en focus op de opties " Progressief " en " Ingebouwd profiel “Dat doen we niet, omdat de meeste webbrowsers ze niet ondersteunen.

5. We zetten een vinkje om de optie “ Converteren naar sRGB «. Dit is om ervoor te zorgen dat onze afbeelding correct wordt weergegeven op de website en wordt opgeslagen in de sRGB-kleurruimte.

6. We stellen de gewenste afbeeldingsgrootte in. In mijn geval is het 500 pixels breed, 281 pixels hoog.

7. De grootte van de originele afbeelding.

8. Geoptimaliseerde afbeeldingsgrootte voor internet.

Ik denk dat je het onderwerp nu doorhebt Een foto voorbereiden voor internet in Photoshop en nu kun je het zelf doen. Onthoud dat de beste dankbaarheid voor de auteur bestaat uit likes, reposts op sociale netwerken en reacties op de site. Tot ziens in de volgende lessen!

Doelwit: studie van het algoritme voor het maken van grafische elementen van een webpagina

Algemene wensen voor het maken van afbeeldingen:

Grafische elementen moeten worden gepresenteerd in het formaat GIF of PNG-afbeelding.
Foto's moeten worden ingediend in het formaat JPEG.
Geef afbeeldingen met een kleine resolutie weer terwijl grote afbeeldingen worden geladen.
Gebruik maken van GIF-afbeeldingen met interlaced formaat.
Specificeer attributen hoogte en breedte element img.
Verminder de hoeveelheid animatie.
Gebruik waar mogelijk miniatuurafbeeldingen.
Zorg ervoor dat u "alternatieve" tekst maakt (attribuut alt)

Wanneer u een verloop op een achtergrond plaatst, wordt ofwel een horizontaal ofwel een verticaal verloop geselecteerd, en afhankelijk hiervan wordt slechts een dunne lijn van dit verloop uitgesneden. Bij plaatsing in CSS worden de juiste achtergrondeigenschappen ingesteld ( zie afb. 1.1)

Rijst. 1.1. Verloop naar achtergrond in Photoshop

Voordat u een afbeeldingsbestand in een webpagina gebruikt, moet u het voorbereiden voor plaatsing in een grafische editor. In dit geval is het niet alleen belangrijk om de grootte van de afbeelding in photoshop te bepalen, maar ook om deze correct op te slaan: met dialoogvenster Opslaan voor internet en apparaten (zie afb. 1.2):

Instellingen voor dialoogvensters instellen Opslaan voor internet en apparaten:

Optimalisatie en compressie tot een bepaalde bestandsgrootte:

Rijst. 1.4. Optimalisatie en compressie tot een bepaalde bestandsgrootte

Photoshop-lab 1_1:

Open de afbeelding in Photoshop en selecteer "Bestand" ->.
In het dialoogvenster Opslaan voor internet en apparaten klik op het tabblad "Geoptimaliseerd".
Op het menu "Stijl" Kiezen "Lage kwaliteit JPEG".
Klik op het tabblad "Afbeeldingsgrootte".
Zorg ervoor dat de optie is ingesteld Verhoudingen behouden en voer de breedte in. Maat past voor e-mail 400 pixels.
Klik op de knop "Opslaan"... Voer de bestandsnaam en het pad in om het bestand op te slaan. Zorg ervoor dat het menu "Formaat" optie geselecteerd "Alleen foto's"... Klik op de knop "Opslaan".

JPEG-optimalisatieopties instellen

Om foto's van hoge kwaliteit te plaatsen, moet u een JPEG-afbeelding voorbereiden in Photoshop:

Rijst. 1.5. Opties voor JPEG-optimalisatie

Optimalisatieopties instellen voor GIF- en PNG-indelingen

Rijst. 1.6. Optimalisatie-opties voor GIF- en PNG-indelingen

Photoshop Lab 1_2: JPEG opslaan

Open een afbeelding in jpg-formaat (of download) in de editor en roep het dialoogvenster op (Opslaan voor internet en apparaten) op het menu Bestand.
Selecteer een tabblad "Geoptimaliseerd" (Geoptimaliseerd)
Open de lijst Parametersets (Vooraf ingesteld) en selecteer een van de 12 voorgestelde opties - JPEG-medium(gemiddeld)
Schat de beeldkwaliteit en de uiteindelijke bestandsgrootte
Het kwaliteitsniveau kan grofweg worden ingesteld in het menu, of je kunt fijn afstemmen met de schuifregelaar "Kwaliteit" (Kwaliteit): verplaats de schuifregelaar naar 70 .
Opties voor selectievakjes inschakelen "Geoptimaliseerd" (Geoptimaliseerd): hiermee kunt u de bestandsgrootte iets verkleinen in ruil voor het beperken van de compatibiliteit met oudere browsers.

Photoshop Lab 1_3: GIF opslaan

voor het werk.
Van "Lijst met formaten" selecteer item "gif".
Selecteer (of typ) het aantal tinten in het vak kleuren en kijk hoe dit de afbeelding en de grootte van het resulterende bestand beïnvloedde (set 90 )
Om het oorspronkelijke kleurbereik van de afbeelding tot een bepaalde hoeveelheid te verkleinen, kunt u een van de 9 beschikbare kleurreductiemethoden gebruiken. Kies een van de vier beste opties: installeren beperkend
Kleur mengen ( Dithering) compenseert gedeeltelijk de smalheid van het gamma, door de ontbrekende kleuren uit de reeks beschikbare kleuren te "construeren". Selecteer alstublieft Diffusie en verplaats de schuifregelaar Dither(de graad van het aantal halve tonen) door 80 .
Selecteer in de kleurentabel een van de kleuren (geel) door te dubbelklikken op een kleur en vervang deze door een andere tint. Om te kiezen, kunt u gebruik maken van Pipet aan de linkerkant van het scherm.
Klik op de knop Gedaan om de optimalisatie-instellingen op te slaan in het originele document

Photoshop Lab 1_4: Gewogen optimalisatie

voor het werk.
Open het bestand in een editor. Selecteer een fragment van de afbeelding (bloem) rechte lasso of een ander hulpmiddel.
Bewaar selectie in alfakanaal ( Selecteer → Selectie opslaan (Selectie → Selectie opslaan)). Geef het een naam (vul in het veld in) Naam).
Open de dialoog Opslaan voor internet en apparaten, selecteer "JPEG" als uitvoerformaat en pas indien nodig het kwaliteitsniveau aan.
Klik op de knop "masker" naast het veld Kwaliteit... Er wordt een dialoogvenster geopend.
Kies uit het menu Kanaal het nieuw opgeslagen alfakanaal. Aanpassen "Minimum" en/of "Maximum" waarden naar smaak en pers OK.

Photoshop Lab 1_5: Uitgangsparameters instellen

In het dialoogvenster Opslaan voor internet en apparaten in het vervolgkeuzemenu "Optimalisatie" selecteer item Uitvoerinstellingen wijzigen (Uitvoerinstellingen bewerken).
Vink het vakje aan XHTML-uitvoer: Export maakt webpagina's die voldoen aan de XHTML-standaard.
Klik op de knop Volgende en pas de parameters in de groep aan "Fragmenten".
Pas de achtergrondweergave aan door op . te klikken Volgende.
Klik Oke en sla het geoptimaliseerde bestand op.
Bekijk de HTML-code van het resulterende bestand.

Photoshop biedt een geweldig hulpmiddel voor het optimaliseren van uw afbeeldingen en foto's - de opdracht (Opslaan voor web).

Beeldoptimalisatie- dit is het vinden van de gulden middenweg tussen kwaliteit en bestandsgrootte, geschikt om de taak op te lossen.

De meest populaire reden voor optimalisatie is om een afbeelding voor te bereiden voor verzending via internet of om deze op een website te plaatsen. Website-ontwerpers en webstudio's voor grafisch ontwerp, zoals http://brandbe.net, nemen na voorbereiding hun toevlucht tot het optimaliseren van de resulterende delen van de afbeelding om hun gewicht te verminderen (voor het snel laden van de afbeeldingen van de toekomstige site), maar aan de tegelijkertijd werd de kwaliteit van de foto niet slechter.

Beschrijving van de elementen van het dialoogvenster

(Klik om te vergroten)

Na het uitvoeren van de opdracht verschijnt de geladen afbeelding in het centrale deel van het dialoogvenster. Het venster is onderverdeeld in de volgende elementen:

links - werkbalk;
hierboven - beeldweergaveparameters;
in het midden - het kijkgebied;
aan de rechterkant - optimalisatiebeheertools;
hieronder - enkele serviceparameters;

Werkbalk

Met een hulpmiddel Hand navigatie door het beeldgebied wordt uitgevoerd. Druk op de linkermuisknop en beweeg uw hand naar de zijkant om de afbeelding heen en weer te bewegen. Als een ander gereedschap is geselecteerd, houdt u ingedrukt Ruimte om uw hand te activeren en de afbeelding te verplaatsen. Door met het muiswiel te scrollen, beweegt de afbeelding op en neer.

Hulpmiddel Fragment selectie stelt u in staat om met afzonderlijke fragmenten van het snijden te werken: combineren, verdelen, parameters wijzigen, verwijderen en dergelijke. Lees meer over deze tool en nesting.

Na het klikken op Schaaltool en als u over de afbeelding zweeft, verschijnt een vergrootglaspictogram. Elke muisklik vergroot de schaal van de afbeelding (terwijl u de Alt-toets ingedrukt houdt - neemt af). In het contextmenu dat opent door met de rechtermuisknop te klikken, kunt u de gewenste schaal uit de lijst selecteren of de afbeelding in het hele venster of scherm weergeven. U kunt ook een gedeelte van de afbeelding met een kader selecteren om dat gedeelte te vergroten.

Pipet u kunt de schaduw van de gewenste kleur in de afbeelding vinden. Deze tint wordt weergegeven in het venster Kleur pipet... Klik op deze kleur om de kleurkiezer te openen en de alfanumerieke code te zien.

Als de afbeelding in afzonderlijke fragmenten is geknipt, en de randen van deze snede stoort u - klik op De weergave van snijfragmenten uitschakelen om ze te verbergen. Als u er nogmaals op drukt, komen ze terug.

weergaveopties

De geüploade afbeelding wordt automatisch geoptimaliseerd met de standaardinstellingen. Het tabblad wordt geactiveerd in het bovenste gedeelte van het dialoogvenster. Optimalisatie, die het uiterlijk, de grootte en de geschatte laadtijd van de geoptimaliseerde afbeelding op de site weergeeft.

Tab Het origineel geeft de oorspronkelijke weergave en grootte van de afbeelding weer. Voor een duidelijke vergelijking van het origineel met de geoptimaliseerde afbeelding, ga je naar het tabblad 2 opties... Het tabblad is nog handiger 4 opties: die de gebruiker niet één, maar drie optimalisatiemogelijkheden biedt.

Optimalisatie controle

Correctie van de standaardoptimalisatie kan rechts in het dialoogvenster worden gedaan.

Allereerst moet u het formaat van het te optimaliseren bestand specificeren! De correctietools die aan de gebruiker worden aangeboden, veranderen volgens het geselecteerde formaat.

De "Set"-lijst en zijn sublijst (onder JPEG) specificeren de kwaliteit van de geoptimaliseerde afbeelding. Het heeft 5 opties:

beste (standaard);
heel hoog;
hoog;
het gemiddelde;
laag.

Wanneer u de vermelde opties selecteert, wordt de parameterwaarde automatisch ingesteld Kwaliteiten bij respectievelijk 100, 80, 60, 30 en 10. De keuze voor de slechtste kwaliteit wordt gemaakt wanneer het beeldformaat onacceptabel groot is.

Parameterselectie: Progressief bepaalt hoe de afbeelding in de browser wordt gescand. De lichte toename van de bestandsgrootte wordt ruimschoots gecompenseerd door de versnelde weergave van de foto nog voordat deze volledig is geladen. En de schuifregelaar verplaatsen vervagen rechts van de oorspronkelijke nulwaarde comprimeert het bestand verder, waardoor het kleiner wordt.

In de lijst Mat / Backing indien nodig kunt u de kleur van transparante pixels instellen. Voorgrondkleur, achtergrondkleur, pipetten, wit en zwart zijn beschikbaar.

Selectievakje Ingebouwd profiel geactiveerd om kleurprofielen op te slaan in een geoptimaliseerd bestand. Ze worden in sommige browsers gebruikt voor kleurcorrectie.

GIF of PNG

De formaten werken met een beperkt palet van 8-bits kleuren. Tekeningen in deze formaten gebruiken maximaal 256 tinten die zijn opgeslagen in een speciale kleurentabel die verschijnt bij het werken met GIF en PNG. Als de gewenste kleur afwezig is, wordt dithering uitgevoerd - het wordt geïmiteerd door andere kleuren te mengen. Een hoog percentage dithering stelt u in staat om meer details en kleuren te behouden, maar verhoogt ook het bestandsgewicht. Dithering wordt aanbevolen voor gradiëntafbeeldingen.

Op de bovenste lijst Kit mogelijke optimalisatie-opties met of zonder dithering worden geselecteerd. Hogere waarden voor kleuren en dithering verbeteren de kwaliteit van de geoptimaliseerde afbeelding, maar vergroten ook de grootte. Het aantal kleuren is rechts in de lijst apart te selecteren kleuren.

In de lijst links ervan is een methode geselecteerd voor het maken van een kleurentabel met de volgende basisopties:

perceptueel - met een voorkeur voor die kleuren waarvoor het oog het meest gevoelig is;
selectief (standaard) - met een extra voorkeur voor de kleuren van grote beeldfragmenten;
adaptief - met een voorkeur voor de kleuren van het heersende spectrum;
beperkt (webveilig palet) - met volledige uitsluiting van dithering.

In dezelfde lijst is er de mogelijkheid om kant-en-klare kleurentabellen of paletten te gebruiken op maat gemaakt gemaakt door de gebruiker.

De volgende lijst selecteert een dithering-algoritme uit 3 opties:

willekeurig, met behulp van een willekeurig patroon om te simuleren;
regelmatig, met een vierkant patroon;
"Ruis" vrij van "naden" in de afbeelding.

Aanvullende aanpassingen zijn beschikbaar in verschillende lijsten aan de rechterkant. In de lijst Dithering het percentage kan worden gewijzigd door een soepele beweging van de schuifregelaar. In de lijst Webkleuren op dezelfde manier kunt u hun percentage regelen.

Lijst Verliezen is alleen voor GIF-indeling. Hiermee kunt u een acceptabele drempel instellen voor het verwijderen van een deel van de afbeelding om de grootte van het geoptimaliseerde bestand te minimaliseren.

Service-opties onderaan het venster

Onder aan het dialoogvenster wordt de mogelijkheid om de afbeelding te schalen gedupliceerd. Rechtsonder kunt u het formaat van de afbeelding wijzigen in pixels of percentages. Hieronder staan de knoppen Opslaan en Voltooien. Het is erg handig om periodiek de geoptimaliseerde afbeelding in de browser te bekijken, wat wordt gerealiseerd door op een knop te drukken. Weergave.

Een set parameters opslaan / verwijderen

De bovenstaande talrijke optimalisatie-instellingen kunnen worden opgeslagen als aangepaste sets met een naam die op andere afbeeldingen kunnen worden toegepast. Dit zal de optimalisatietijd voor een groot aantal afbeeldingen aanzienlijk verkorten.

Om uw eigen set parameters op te slaan, moet u eerst een van de standaardsets wijzigen. Kies bijvoorbeeld de set Hoge kwaliteit JPEG, Vink het vakje aan Progressief... Het actieve commando verschijnt nu in het menu Instellingen opslaan.

Nadat u uw instellingen heeft opgeslagen, worden ze beschikbaar in de Set-lijst:

Een door u gemaakte aangepaste set verwijderen:

in de lijst Kit kies zijn naam;
Open het menuvenster;
Selecteer een team Instellingen verwijderen.

Werken met fragmenten van een afbeelding

Bij het beschouwen van de werkbalk werd de mogelijkheid genoemd om een enkel fragment van een grote afbeelding te optimaliseren. Maar hiervoor moet het eerst in fragmenten worden verdeeld.

Voor deze scheiding wordt gebruik gemaakt van de hoofdwerkbalk van Photoshop. Nadat je het hebt geselecteerd met de pen die verschijnt, moet je het gewenste fragment schetsen. De grote afbeelding wordt opgesplitst in verschillende delen.

Na het uitvoeren van de opdracht Opslaan voor internet en apparaten u kunt doorgaan met het optimaliseren van een enkel fragment. Eerst moet u de weergave van instellingsfragmenten inschakelen door het onderste gereedschap van het lokale paneel met dezelfde naam. Selecteer vervolgens het gewenste fragment met de tool Segmentselectie.

Als u een fout in de tekst ziet, selecteert u deze en drukt u op Ctrl + Enter. Bedankt!

In de linkerbovenhoek van het voorbeeldgebied ziet u een reeks van vier tabbladen. Standaard is het tabblad Geoptimaliseerd geselecteerd, wat betekent dat u de originele afbeelding niet kunt zien. In plaats daarvan wordt een voorbeeld weergegeven van hoe de afbeelding eruitziet met de huidige optimalisatie-instellingen (waar we later naar zullen kijken):

Zoals webdesigners adviseren, is het beter om een ander tabblad te gebruiken, waar twee afbeeldingen tegelijk in het voorbeeldvenster worden getoond, origineel en geoptimaliseerd, dit is het tabblad "2 opties" (2-Up):

Met het tabblad "2 opties" actief, zien we nu twee afbeeldingen tegelijk, de originele versie aan de linkerkant en de geoptimaliseerde versie aan de rechterkant (als uw foto een landschapsoriëntatie heeft, dwz dat de breedte groter is dan de hoogte, dan foto's worden boven elkaar weergegeven):

Bestandsformaat

Aan de rechterkant van het dialoogvenster staan opties voor het optimaliseren van de afbeelding.

Het eerste dat u moet doen, is het juiste bestandsformaat voor onze afbeelding kiezen. Als u dit venster voor de eerste keer opent, is de standaardindeling GIF. het formaat van het geselecteerde bestand bovenaan (direct onder het woord "Preset"). GIF wordt soms gebruikt om webafbeeldingen op te slaan, maar voor mijn foto is JPEG beter, dus ik verander de GIF in JPEG:

Beeldcompressiekwaliteit

Direct onder de formaatoptie zijn er opties om de beeldcompressiekwaliteit te kiezen, d.w.z. de uitvoerkwaliteit van de foto zelf.
We kunnen kiezen uit vooraf ingestelde kwaliteitsparameters (laag, gemiddeld, hoog en zeer hoog, en best, in het Engels - Laag, Gemiddeld, Hoog, Zeer hoog en Maximaal) in de vervolgkeuzelijst aan de linkerkant, of we kunnen een specifieke kwaliteitswaarde in procenten rechts.
Hoewel het verleidelijk is om onze foto's op maximale kwaliteit in te stellen, betekent optimaliseren voor het web dat we de megabyte-bestandsgrootte zo klein mogelijk moeten houden, wat betekent dat we een middenweg moeten vinden tussen beeldkwaliteit en bestandsgrootte. De kwaliteitsinstelling "Hoog" is bijna altijd de beste keuze, het geeft ons een acceptabele beeldkwaliteit met een relatief kleine bestandsgrootte. Als u "Hoog" selecteert, wordt de kwaliteitswaarde automatisch ingesteld op 60%:

Nadat u een kwaliteitswaarde heeft geselecteerd, moet u ervoor zorgen dat de optie "Geoptimaliseerd" is ingeschakeld. het kan helpen de bestandsgrootte iets verder te verkleinen. De opties "Progressief" en "Kleurprofiel insluiten" hoeven niet te zijn ingeschakeld. de meeste webbrowsers ondersteunen sowieso geen kleurprofielen:

Kleur ruimte

Schakel ten slotte de optie "Converteren naar sRGB" in als deze nog niet actief is. Dit zorgt ervoor dat de foto wordt opgeslagen in de sRGB-kleurruimte, wat in eenvoudige bewoordingen betekent dat de kleuren in de foto correct op de website verschijnen:

Afbeeldingsgrootte
Het dialoogvenster geeft ons ook de mogelijkheid om de lineaire grootte van de afbeelding te wijzigen. Ik raad aan om het formaat van de afbeelding van tevoren te wijzigen, voordat u het dialoogvenster Opslaan voor web inschakelt, zodat de lineaire afmetingen in pixels klaar zijn wanneer u opslaat voor het web. Dit geldt met name voor de nieuwste versie van Photoshop CC met zijn
het nieuwe dialoogvenster Afbeeldingsgrootte. Het formaat van afbeeldingen in Photoshop CC is gedekt, en in versies CS6 en lager -.

Vergelijking van originele en geoptimaliseerde bestandsgroottes

Op dit moment hebben we gedaan wat nodig is om het bestand voor het web te optimaliseren, en laten we nu eens kijken naar de bestandsgrootte in bytes in de originele en geoptimaliseerde versies. In mijn geval was de grootte van de originele foto (links) gelijk aan een kolossale waarde voor internet - 1,29 Mb, wat te groot is voor gebruikers, zelfs met een gemiddelde internetsnelheid, en de geoptimaliseerde versie (aan de rechterkant) , die er bijna net zo goed uitziet als het origineel, bleek slechts 41,85 Kb te zijn:

Een afbeelding opslaan

Om een geoptimaliseerde versie van uw foto op te slaan, klikt u op de knop Opslaan onder aan het dialoogvenster. Photoshop opent een nieuw dialoogvenster Opslaan geoptimaliseerd als, waarin u de afbeelding indien nodig kunt hernoemen en de gewenste map op uw harde schijf kunt selecteren om op te slaan. Als u klaar bent, klikt u op de knop Opslaan om de afbeelding op te slaan en het dialoogvenster te sluiten:

Nou dat is alles. De foto is nu volledig geoptimaliseerd en klaar om per e-mail te versturen of op de website te plaatsen.