Afbeeldingen doorsnijden (vanaf v7)

Allerlei nuttige uitleg over het programma...
Plaats reactie
Gebruikersavatar
jangske
Site Admin
Berichten: 1011
Lid geworden op: 14 jun 2017, 07:23

Afbeeldingen doorsnijden (vanaf v7)

Bericht door jangske » 14 jun 2017, 22:42

De meeste afbeelding worden gebruikt zoals ze zijn, met 100% van het oppervlak.
Je moest een gebied definiëren met de selectierechthoek als je maar een gedeelte van een afbeelding wilde gebruiken.
Hierna klikte je op Image/Crop to selection om de ongewenste gedeelten te verwijderen.
Dat was de enige mogelijkheid tot versie 7.0 van Paint Shop Pro.
Dat is sedert dan veranderd...

Waarom zou je een afbeelding segmenteren?

Met de functie voor het segmenteren van afbeeldingen van Paint Shop Pro 7.0 kan je een afbeelding opdelen in verschillende aangrenzende gedeelten.
Deze functie, die je ook vindt in de concurrent Photoshop 6.0 (gereedschap Slice), wordt gebruikt in drie verschillende situaties:
  • Een afbeelding opdelen in kleinere stukken zodat deze stuk voor stuk kunnen worden geladen.
    Deze optie is een aantrekkelijk alternatief voor het interlaced laden van een afbeelding, vooral voor grote afbeeldingen.
    De bezoeker krijgt de afbeelding per paneel te zien (je kunt ook interlaced laden), zodat hij of zij benieuwd blijft en niet wegklikt voordat de hele afbeelding is geladen.
  • Een afbeelding opdelen in perfect op elkaar aansluitende hotspots.
    Met deze functie kun je snel een blok met knoppen maken door ze allemaal in één afbeelding te ontwerpen die je vervolgens segmenteert in hotspots.
  • Een consistente set knoppen, balken, tekstblokken en dergelijke maken.
    Met de functie voor segmenteren kan je alle knoppen, balken of tekstblokken in één document maken.
    Je hoeft ze dan niet meer in aparte bestanden te maken en op al die bestanden steeds dezelfde handelingen uit te voeren.
    Je kunt kleuren, filters, speciale effecten en dergelijke toepassen op het gehele bestand, waarna je het opdeelt in de onderdelen waaruit de afbeelding bestaat.
    Hierna sla je de onderdelen op met een eigen bestandsnaam.


De werkbalk Web

Afbeeldingen segmenteren is een webfunctie.
Je vindt hem niet in het hoofdmenu van Paint Shop Pro 7, maar op een van de vele werkbalken van het programma.
Je activeert deze functie als volgt:
  1. Klik op View > ToolBars.
    Het dialoogvenster Toolbars wordt geopend.

    Afbeelding
  2. Schakel het selectievakje Web ToolBar in en sluit het dialoogvenster.
    De werkbalk Web is nu zichtbaar aan de bovenkant van het scherm.

Afbeelding De juiste werkbalk op de juiste plaats. Dankzij de dubbele verticale lijntjes links op de werkbalk kan je de werkbalk Web op elke gewenste plaats in het venster van Paint Shop Pro neerzetten als zwevend werkpaneel.
Je kunt hem ook vastzetten aan de linkerkant, rechterkant of onderkant van de werkruimte.

Je vindt de knop Image Slicer helemaal links op de werkbalk.
De volgende keer dat je het programma start, wordt de werkbalk als standaardonderdeel weergegeven in Paint Shop Pro.

Afbeelding

De afbeelding maken

We gaan nu een blok maken met vier knoppen.
Elke knop wordt 90 x 30 pixels groot en krijgt een koppeling toegewezen.
Deze oefening is bedoeld voor het segmenteren, dus we houden de knoppen simpel.
  1. Klik op File > New en maak een afbeelding van 90 pixels breed bij 120 pixels hoog.
  2. Open de vervolgkeuzelijst Background Colour en selecteer White als achtergrondkleur voor de afbeelding.
  3. Controleer of Image Type is ingesteld op 16,7 miljoen kleuren.
    Als dit niet zo is, zijn de meeste speciale effecten en filters niet beschikbaar.
  4. Laat de resolutie ingesteld op 72 pixels per inch (de standaardwaarde voor computerschermen).
  5. Plaats met behulp van het gereedschap Text de menuteksten op gelijke afstand van elkaar.
    Je kunt de tekst nauwkeuriger neerzetten als je het raster weergeeft. Klik hiervoor op View > Grid.

Zo, het menublok is klaar. Nu gaan we segmenteren.

Afbeelding

De afbeelding segmenteren

Nu hebben we het gereedschap Image Slicer nodig:
  1. Klik op de knop Image Slicer op de werkbalk Web.
    Het dialoogvenster Image Slicer wordt geopend.
  2. Klik op de knop met het vergrootglas, rechtsonder in het scherm, om het document groter te maken.
    Met het gereedschap Pan helemaal rechts in het vak Tools kan je de afbeelding in het venster verplaatsen.

    Afbeelding
  3. Klik op de knop Slicer in het vak Tools, linksboven in het dialoogvenster.
  4. Sleep nu met de muiswijzer over het gebied met de afbeelding; de muiswijzer verandert in een mes.
  5. Houd de waarden voor X en Y links onder het venster in de gaten: X geeft de positie van de muiswijzer in het horizontale vlak aan en Y de positie in het verticale vlak.
    De X-waarde is nu even niet belangrijk. Zet de muiswijzer op Y = 30 en klik.
    Paint Shop Pro 7 tekent een horizontale of verticale zwarte lijn, afhankelijk van of je de muiswijzer naar boven of beneden of naar links of rechts verplaatst.
  6. Laat de muisknop los: de afbeelding is nu gesegmenteerd op het niveau Y = 30.

    Afbeelding

Doe nu hetzelfde voor de coördinaten Y = 60 en Y = 90.
De afbeelding is nu opgedeeld in vier gelijke delen.

Als je een foutje maakt, wis je de snijlijn door de knop Delete te activeren.
Deze knop ziet eruit als een gum.
Klik op de lijn om hem te verwijderen.

Koppelingen maken

Aan elk van de vier gebieden die we net hebben gedefinieerd, kan je een koppeling toewijzen.
Dit is heel makkelijk:
  1. Activeer het gereedschap Arrow en klik in het gedeelte van de afbeelding waaraan je de koppeling wilt toewijzen.
    De contouren van het geselecteerde gebied worden een beetje dikker, al moet je wel goed kijken om het te zien.
  2. Geef het webadres van de koppeling (een andere pagina of site) in het veld URL.
  3. Typ in het veld Alt text de tekst die je wilt weergeven als knopinfo waarmee de knop wordt toegelicht in de webbrowser.
    Als de browser zo is ingesteld dat afbeeldingen niet worden geladen, wordt deze tekst in plaats van de afbeelding weergegeven.
  4. Laat het veld Target leeg, de standaardoptie is _parent.
    In dit gebied kan je het frame definiëren waarin de afbeelding wordt geopend.

Herhaal deze stappen voor alle gedeelten van het knopmenu en wijs een andere URL toe aan elke knop.

Je kunt het resultaat bekijken door onder in het dialoogvenster op de knop met het oog te klikken.
Met deze knop open je een venster in de standaardwebbrowser met hierin je opgedeelde afbeelding als inhoud.
Zet de muiswijzer op de knoppen en controleer of de koppelingen goed zijn aan de hand van de knopinfo en de naam van de URL op de statusbalk linksonder in het venster van de browser.

Afbeelding

Sla de afbeelding op.
Een koud kunstje in vergelijking met wat je allemaal al hebt gedaan!
Klik op de knop Save As in het dialoogvenster Image Slicer.

Het standaarddialoogvenster van Windows wordt geopend.
Het bestandstype is geen grafische indeling maar een HTML-indeling met de extensie .htm.
Geef het bestand een naam en selecteer een bestemmingsmap, liefst de map met je websiteproject en klik op Opslaan.
Alles wat je nu nog hoeft te doen, is de code die je zo hebt gekregen op de gewenste pagina te zetten; een standaard HTML-bewerking...

Afbeelding De juiste indeling. De module Image Slicer biedt standaard de GIF-indeling aan om de afbeelding op te slaan.
Je kunt als je wilt een andere indeling kiezen in het veld Format (JPEG of PNG).
Nog veel plezier op deze site...

Plaats reactie