Categorie archieven: Geen categorie

Verzin een app

Verzin een App. Het mag voor je stagebedrijf zijn, of totaal iets anders. Het mag zelfs met techniek en mogelijkheden die nog helemaal niet bestaan. Je kan uiteraard ook alle bestaande sensoren van je telefoon gebruiken, zoals de camera, de microfoon, de GPS, gyro sensors, proximity sensors, en dingen als hartslag en bloeddruk, die via een Watch kunnen.

Deze opdracht duurt meerdere lessen. De eerste les is stap 1, zie verderop.

Adobe XD

In de lessen daarna gaan we voor het ontwerp van de app, dus voor een klikbaar prototype Adobe XD gebruiken. Zie deze intro en korte uitleg:

Kortom: ontwerp vijf schermen op telefoonformaat, met knoppen erbij, en laat de knoppen of de hele schermen linken naar de volgende schermen. Klik de knop “Prototype” linksboven, en klik dan op de plaatjes > klik het blauwe icoon > sleep de pijl naar het volgende scherm. Je kan ook weer bij “prototype” op Design klikken, dan kun je bijvoorbeeld rechthoekjes tekenen, die vullen met transparante kleur, en dan kun je weer Prototype klikken en deze knop laten linken naar een ander scherm.

Lesplanner

  1. STAP 1: Verzin de app en beschrijf het idee in een elevator pitch: een korte tekst om je app te beschrijven, met een leuke goede naam. Doe onderzoek naar de concurrenten en naar een mogelijk goed ontwerp: zoek 3 inspirerende apps die je qua ontwerp zou kunnen gebruiken, of onderdelen daarvan. Maak van elke app dan minstens drie screenshots en schrijf bij alle plaatjes een korte tekst waarom en wat je daar wil gebruiken.
  2. STAP 2: Idee, uitvoering en ontwerp van jouw app,
    in minstens 5 screenshots + logo + favicon + naam.
    Dit komt ook op die pagina op je website.
    De ontwerpen kan je het beste maken in Adobe XD of Figma
  3. STAP 3: Zet de app werkend op je telefoon (via de XD app op je telefoon), vanaf je startscherm (via Share > rechts bij View setting > User Testing > Create Link  > kopieer de link en open die op je telefoon in je browser > klik: Voeg toe aan Beginscherm, of op Android in je browser > 3 puntjes > Voeg toe aan startscherm)
  4. Zet de link ook in je WordPress-artikel, zodat je vanaf dat artikel ook meteen naar de web app kan.

STAP 1: Idee en onderzoek

Beschrijf je idee in een korte tekst, twee a drie alinea’s, oftewel een elevator pitch. Verzin een goed naam of doe meerdere mogelijkheden. Lever het in als een PDF: tekst met plaatjes. Het maakt niet uit in welk programma je dat maakt. Het idee mag van alles zijn. Verzin een naam en de functionaliteit. Het hoeft niet echt te werken, het gaat om een prototype, waar je alleen doorheen hoeft te klikken om het te presenteren en te testen. Denk ook aan alle mogelijkheden zoals Notificaties, en alle sensoren zoals GPS, Camera, 3D, licht, beweging (gyro), geluid. Die kan je allemaal gebruiken.

Maar je mag ook dingen verzinnen die nog helemaal niet bestaan.

  • Verzin een goede naam voor de app
  • Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 foto’s in totaal. Zet bij elk plaatje een korte tekst waarom je deze koos.

STAP 2: Schetsen

Schets de Web App, dus maak het design. Formaat: jouw telefoon, dus maak bijvoorbeeld een screenshot en open dat in Photoshop. Of gebruik Adobe XD. en kies daar jouw telefoon-formaat. Gratis software is er ook, zoals Figma of Canvas.

Op papier mag ook, of in Photoshop, of in Indesign. Werk zo minstens 5 schermen van de App verder uit. Met vormgeving, kleuren, logo, typografie, knoppen, menu. Gebruik als inspiratie voor het ontwerp de designs uit stap 1 en gebruik standaard onderdelen zoals het keyboard op je telefoon in de schermen waar je dat nog hebt.

  • Ontwerp dus 5 schermen van de app
  • Ontwerp ook het logo, en een favicon van 500×500 pixels (het app-icoon op je startscherm).

Favicon / app icoon

Maak ook een App icon, 500 x 500 pixels, noem het favicon.png (via Save for Web, Cmd-alt-shift-S > png 24). Als je het in XD maakt kun je de app werkend bekijken op je telefoon, via de Adobe XD app daar. De favicon werkt daar helaas niet op Android. Op IOS kan het via een omweg:

IOS > Opdrachten
Open app > XD > instellingen: hier je favicon kiezen

Sensoren

Er zitten veel sensoren in een telefoon. Die kun je allemaal gebruiken. Zie deze lijst met uitleg. Maar je mag ook dingen verzinnen die nog niet kunnen. Zoals een hartslag- of bloeddrukmeter. Dan kan via je horloge, dus eigenlijk is dat er ook al echt.

Visueel ontwerp

De ontwerpschetsen kan je beginnen op papier, zodat je makkelijk en snel kan testen en aanpassen. Maar het kan ook meteen in Photoshop, Illustrator, Indesign, XD of in wat voor andere software dan ook. Je kan zelfs de papieren tekeningen fotograferen en die plaatjes gebruiken. Interface-elementen zoals knoppen en toetsenbord kun je Googlen (“IOS gui psd” of “IOS UI Kit”) en gebruiken in je schetsen. GUI staat voor Graphical User Interface.

dribbble_1x resources_iOS9_right

Je kan ook speciale software gebruiken zoals Sketch (99,- in de App Store, kan ook met 50% onderwijskorting). Dat programma combineert vector met pixel en je kan het project direct op je smartphone zien. Je kan exporteren naar prototyping tools zoals Marvel (via Dropbox of via een plugin) of Invision (via Dropbox). Met Photoshop CC 2015 kun je ook je ontwerp live op je mobiel / tablet bekijken, met Adobe Preview CC, een gratis download in de App Store. Zie dit artikel.

In de nieuwere Adobe CC zit Adobe XD oftewel Xperience Design. Dat is een compleet programma voor het maken van web app prototypes.

Het gaat erom dat het visuele ontwerp duidelijk wordt, in minstens vijf schermen, en dat je zo het doorklikken, de usibility en het ontwerp kan testen. Logo, kleur, typografie, vormgeving van het menu, beeldgebruik. Waar moet je klikken, wat kun je doen, hoe kan je terug. Eventueel ook al de animaties, in de interface bijvoorbeeld. Animaties zijn niet alleen versierend maar vaak ook functioneel: denk aan de subtiele bewegingen op IOS, zoals bij swipe naar beneden voor een update.

De losse schermen kun je klikbaar maken met HTML of met andere software. Je kan ook pdf’s uit Indesign gebruiken. Presenteren kan op een telefoon of in een browser. Pdf’s kan je ook presenteren op mobiel, via Dropbox. Op een desktop kan dat met Adobe Reader, die je fullscreen kan zetten met Cmd-L. HTML kan fullscreen op mobiel via onderstaande tips.

STAP 3:
Web App Prototype in HTML/CSS

Dit vervalt als je alles in Adobe XD of iets vergelijkbaars zoals Figma doet: want die kan je meteen klikbaar openen op je telefoon.

Zet de app werkend op je telefoon (via de XD app op je telefoon), vanaf je startscherm (via Share > rechts bij View setting > User Testing > Create Link  > kopieer de link en open die op je telefoon in je browser > klik: Voeg toe aan Beginscherm, of op Android in je browser > 3 puntjes > Voeg toe aan startscherm.

Lever diezelfde link ook in op Teams bij deze opdracht.

Een web app is een gewone website met een manifest.json bestand, zodat het op de telefoon als een echte app werkt:

manifest.json

Plak onderstaande code in een nieuw document, verander 3x de APPNAAM en bewaar het als manifest.json in de hoofdmap (het moet op een Secure Server staan, dus https://):

{
"name": "APPNAAM",
"short_name": "APPNAAM",
"start_url": "https://aartjan.nl/adem",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#bbb",
"description": "hierjetekst",
"icons": [

{
"src": "favicon.png",
"sizes": "512x512",
"type": "image/png"
}],
"scope": "/",
"id": "APPNAAM",
"background_color": "white"
}

HTML maken en uploaden

Zet je 5 plaatjes en je favicon.png in een map “app” in de map “websites”.
Noem de plaatjes 1.jpg, 2.jpg etc
De map “app” met alle HTML-pagina’s, plaatjes en manifest.json moet je uploaden.
Zie hieronder hoe je die allemaal maakt (of kijk helemaal onderaan voor de HTML)

Je app staat nu online op ROCstudent.nl/ftp/jevoornaam/app
Kijk op je telefoon of het werkt, en voeg de app dan toe aan je startscherm.

De plaatjes moet je croppen zonder de batterijbalk, in Photoshop > Crop. En dan bewaren via Save for Web, Cmd-alt-shift-S > jpg High.

Maak voor elk scherm een eigen HTML-pagina (index.html, 2.html, 3.html etc). Laat de plaatjes telkens linken naar de volgende pagina.

Maak eerst de home-pagina: die heet index.html.Bewaar in de map “app”. Als die klaar is kun je de andere pagina’s maken met Bewaar-Als. Zie hieronder (of kijk onderaan voor de complete HTML-code).

  • Zet het eerste plaatje in de <body>, via Insert Image
    of tik deze code:   <img src=”1.jpg”> onder de <body>
  • Zet bij het plaatje via de Properties de width 100%, en de height moet weg.
  • Maak het plaatje klikbaar via de het venster Eigenschappen > Koppeling naar de volgende pagina: 2.html.
  • Verander de <title> naar de naam van je app
  • Plak in de <head> dit stukje css:
    <style>
    body {margin: 0; padding:0; background:black;}
    a img {border:none}
    </style>

Dan nog wat stappen met knip-en-plak:

  • Maak de pagina responsive en fullscreen op je mobiel, zie hieronder
  • Zorg dat de app fullscreen blijft, met het script hieronder
  • Maak het manifest.json, zie hieronder

En dan alles uploaden, testen en bekijken:

  • Zet de map “app” online (uploaden)
  • Bekijk het op je mobiel: rocstudent.nl/ftp/jenaam/app
  • Voeg die website toe aan je Homescreen (op IOS via de knop onderaan je scherm, op Android via de 3 puntjes). Start de App nu vanaf je homescreen.

Responsive code

[DIT HOEFT NIET MEER als je een manifest gebruikt]
Zet onderstaand in de <head> om de pagina responsive te maken en de App fullscreen te openen na Toevoegen aan Homescreen. Verander APPNAAM. Dat is de naam van de App die onder de knop (jouw favicon) komt te staan.

<link rel="manifest" href="manifest.json">    

<meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="msapplication-starturl" content="index.html">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APPNAAM">
<meta name="application-name" content="APPNAAM">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">

Web App prototype fullscreen houden

[DIT HOEFT NIET MEER als je een manifest gebruikt]
Onderstaand script zorgt ervoor dat je de Web App fullscreen blijft, ook na het klikken op een interne link. Zet het script in de <head>.

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(chref=d.href).replace(e.href,"").indexOf("#")&&(!/^[a-z\+\.\-]+:/i.test(chref)||chref.indexOf(e.protocol+"//"+e.host)===0)&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone");
</script>

ptioneel: CSS Image Preloader

Je kan een CSS-preloader aan de <style> van index.html toevoegen, zodat het tweede plaatje (en evt derde) van tevoren ingeladen wordt en de gebruiker niet hoeft te wachten:

body:after{
 position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
 content: url(2.jpg) url(3.jpg);
}

Zet dat op elke pagina en verander 2.jpg (en/of 3.jpg)

Meer Prototyping tools

Er zijn tools – ook vaak gratis – om de schermen van een web app prototype klikbaar te maken. Zo kan je de usability van de interface zien en testen. Je kan dat ook direct in HTML doen, bijvoorbeeld met Dreamweaver. In HTML kan je volledig werkende web apps maken, maar je kan ook de schermen los in pagina’s zetten, zonder functionaliteit, en de plaatjes alleen klikbaar maken. Ditzelfde kan je ook doen met apps als Firefly.

Zie ook dit artikel met een vergelijking of dit artikel. In de nieuwste Adobe CC zit ook Adobe XD oftewel Xperience Design. Hier een lijst met andere tools, waarbij Marvel en Invision de beste en ook nog gratis zijn:
marvelapp.com
appsketcher.com
invisionapp.com

justinmind.com
proto.io
fluidui.com
flinto.com
popapp.in
balsamic

Het prototype kun je toevoegen aan je homescreen (op IOS via de knop midden onder, op Android via de drie puntjes). Dan is het net als een echte App, met icoon op het homescreen, die daarna fullscreen start. Er bestaan ook javascripts die de gebruiker vragen om de website toe te voegen aan het homescreen.

Als je alleen een onderdeel van een plaatje klikbaar wil maken, en niet het geheel, dan kan dat met Javascript en hotspots (standaardfunctie in Dreamweaver) of door het plaatje op te delen in stukjes die apart klikbaar moeten zijn. De stukjes beeld kan je naast- en onder elkaar zetten, tegen elkaar aan. Ruimte tussen plaatjes kan je weghalen met inline CSS:

<img src="2.jpg" style="margin-top:-5px; margin-bottom:-5px">

Een echte App moet uiteindelijk in de App Store van Apple (en in de Google Play store) terechtkomen. Voor IOS heb je een developer account nodig. Een HTML-app zou je naar deze systemen kunen porten. Native IOS Apps zijn tegenwoordig meestal in Swift gemaakt.

Je kan een klikbaar web app prototype ook maken in Indesign, met als output een klikbare PDF. Elk element op een pagina kun je klikbaar maken. De PDF kan je full-screen tonen in Adobe Reader, met Ctrl-L. Op IOS kun je een PDF fullscreen tonen door erop te tappen vanuit Dropbox.



LESPLANNER


  1. Les 1: Uitleg
  2. Les 2: Presenteer je idee voor de klas. De klas geeft feedback.
  3. Les 3: Verzin een naam voor je app, en maak een favicon / logo van 500×500 pixels (dat is het icoon voor op je telefoon)
    Zoek 3 apps die een goed design hebben waar je wat van kan gebruiken, maak van elke app 3 screenshots. Dus 9 schermen in totaal.
    Maak er een pagina van in WordPress met een galerie (+ link to media + Easy Fancybox aanzetten).  Zet bij elk plaatje een tekst (zowel als bijschrift als in de “Alt”).
    Schrijf een tekst van 2 of 3 alinea’s om je app te beschrijven: een elevator pitch.
    Lever de url van je wordpress-pagina hier in.
  4. Les 4: download een UI kit en ga de schermen maken. Minstens 5 schermen. Kan in Photoshop maar mag ook in andere software. Zelfs tekenen mag.
  5. Les 5: verwerk de feedback
  6. Les 6: HTML in Dreamweaver, uploaden naar ROCstudent.nl/ftp/jenaam/app, testen, feedback verwerken
  7. Les 7: Presenteren en /of verder werken
  8. Les 8: Beoordeling
  9. Les 9: Herkansing.

Bijlage: de gehele code voor index.html

(Dit vervalt of is anders als je een manifest gebruikt)
Kopieer en plak. Verander 3x “APPNAAM” naar de naam van jouw app:



<!doctype html>
<html>
<head>

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(chref=d.href).replace(e.href,"").indexOf("#")&&(!/^[a-z\+\.\-]+:/i.test(chref)||chref.indexOf(e.protocol+"//"+e.host)===0)&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone");
</script>

<link rel="manifest" href="manifest.json">

<meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="msapplication-starturl" content="index.html">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="APPNAAM">
<meta name="application-name" content="APPNAAM">

<link rel="apple-touch-icon" href="favicon.png" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png">
<style>
body {margin: 0; padding:0; background:black;}
a img {border:none}
</style>
<meta charset="UTF-8">
<title>APPNAAM</title>
</head>

<body>

<a href="2.html"><img src="1.jpg" width="100%" /></a>

</body></html>

Doe daarna “Bewaar als: 2.html” en verander daarin het regeltje:
<a href=”2.html”><img src=”1.jpg” width=”100%” /></a>
in
<a href=”3.html”><img src=”2.jpg” width=”100%” /></a>

Idem voor 3.html en 4.html. En in 5.html ga je weer terug naar Home:
<a href=”index.html”><img src=”5.jpg” width=”100%” /></a>

Adobe Photoshop Generative AI

Lees en bekijk alles hieronder. De opdracht is:

  • Koop Adobe CC Student op https://www.surfspot.nl/populaire-producten/adobe-creative-cloud-student.html (Je mag het met zijn tweeën delen)
  • Maak een Adobe-account met je studentnr@talnet.nl.
  • Download de Adobe Creative Cloud software, en daarin download je Photoshop.
  • Gebruik de plaatjes uit de vorige les (of nieuwe plaatjes) en doe het volgende:
  • Bij 3 plaatjes: maak het plaatje groter (Links en rechts, of boven en onder) met AI, zie verderop.
    Exporteer als Medium JPG en lever in op Teams.
  • Bij 3 plaatjes: verwijder iets met AI, zie verderop.
    Exporteer als Medium JPG en lever in op Teams.
  • Maak 3 plaatjes (wat jij maar wil) in Adobe Firefly of een andere AI-dienst zoals MidJourney of Dall-E, dus helemaal gemaakt door AI.
    Lever ze in op Teams.

Lees verder Adobe Photoshop Generative AI

WordPress 5.0: Gutenberg Editor en nieuw thema: Twenty Nineteen

Alle websites op ROCweb zijn bijgewerkt naar WordPress 5.0. Dit is de grootste update van de laatste jaren. De editor is compleet vernieuwd en heet nu de Gutenberg Editor. Deze editor waar je Pagina’s en Berichten aanmaakt ziet en nu veel moderner uit. Maar ook totaal anders. 

Als je nieuw bent in WordPress kan je misschien beter meteen beginnen met deze nieuwe editor omdat dit de toekomst is. Maar als je gewend bent aan de Classic Editor is het wel erg wennen, en kan je ook de Classic editor als plugin blijven gebruiken. Een aantal dingen zijn namelijk toch wel slechter en omslachtiger dan in de klassieke editor.

Natuurlijk is er ook weer een nieuw standaard thema: Twenty Nineteen.

https://wordpress.org/gutenberg/

Affinity Publisher cursus

Indesign was marktleider op het gebied van DTP-software, maar het zou binnenkort wel eens vervangen kunnen worden door Affinity Publisher.

In grote lijnen kun je van alles spelenderwijs wel vinden. De Beta-versie is gratis en kun je hier downloaden. Hieronder de basistips. Daarmee kom je al een heel eind. Google altijd direct alles wat je niet weet of waar je uitleg over wil. Hier staan tutorials. Zie ook de blog over Affinity Publisher op aartjan.nl.

Algemene tips

  • Voor tekst kan je eerst een vakje trekken met de tweede Text-tool (2 x T). Klik vervolgens in het kader om de tekst te bewerken, en tik Escape om het kader te bewerken. Pak je de eerste Text-tool (1 x T) dan is er geen kader.
  • Automatische tekstinloop: Shift-klik op het overflow-icoon rechtsonder in je tekstkader. Nieuwe pagina’s worden nu aangemaakt met identieke kaders zodat alle tekst geplaatst wordt.
  • Plaatjes: pak je het foto-kader (Place Image Tool) dan is het kader altijd in de afmeting van de foto, en de foto schaalt altijd mee bij aanpassen. Pak je het andere kader (Picture Frame Tool) dan wordt de foto altijd uitgesneden, vullend in het kader. Als je het ziet snap je het meteen. Dit kader kun je dubbelklikken om de inhoud te verplaatsen, te schalen of te draaien, los van het kader.
  • Een plaatje kan je ook Groeperen (⌘-G) om het daarna nog te schalen met Shift
  • Deselecteer door buiten objecten te klikken, of Escape, of ⌘D.
  • Plaatjes kun je vanuit de Finder in je document slepen, bij voorkeur direct in een kader. Of kies File > Place.
  • Kaders kun je schalen door hendels te verslepen. Bij tekstkaders zie je rechtsonder een tweede hendel: de inhoud schaalt dan mee. Met Shift kan ook, dan gaat het uit verhouding.
  • In de balk bovenaan vind je alle opties van het geselecteerde item. Wijzig die door op een getal te staan en pijltjes-toetsen te gebruiken, en dan Enter.
  • In die balk voor tekst zijn er aan de rechterkant 3 knoppen: Character, Paragraph en Typography.

Tik ctrl-w voor een Preview zonder hulplijnen.

  • Kaders die onder andere kaders staan kun je met ⌘-Shift-klik selecteren
  • Gebruik veel Rechts-klik voor allerlei opties (twee-vinger-klik / Ctrl-klik)
  • Gebruik de Tooltips (hover over een tool voor uitleg).
  • Klik uitklap-ikonen in paletten voor extra opties.
  • Effecten zoals Text-shadow kan via Rechtsklik > Layer Effects
  • Je kan tekenen zoals in Illustrator, met bezier curves. Gebruik dan de Pen Tool, en wijzig met de Witte pijl. Kies Rechtsklik > Geometry voor Add en Subtract en zo (Pathfinder).
  • Tekstkaders aan elkaar linken: met het witte driehoekje rechtsonder elk kader. Klik dat en je cursor is geladen met de rest van de tekst. Sleep dan een nieuw kader. Naast het driehoekje is er een oogje, waarmee je tekstoverloop kan verbergen.
  • Met het Lagen-palet kun je lagen maken, verschuiven, op slot zetten, en verbergen.
  • Tekstomloop (tekst komt automatisch om kader of plaatje heen) kan met de knoppen bovenaan.
  • éúíó: een accent op een letter is Alt-e en dan die letter
    üïëä: een trema is Alt-u en dan een letter
    Speciale tekens zie je verder ook bij Text > Show Glyph browser

Meteen maar doen:

  • Breek de Tools los voor een dubbele rij, dan zie je de Fill-kleur beter.
    Maximaliseer het venster met de Groene Knop. Met Tab kan je de UI uitzetten (behalve als je in Tekst zit, dan is het een Tab)
  • Zet bij meerdere pagina’s het Pagina-palet los linksonder
  • Loop door de Voorkeuren ,
  • Zet de Snapping Manager aan. Alle opties kunnen daar aan, behalve Show Snapping Candidates: die kan uit.

    Leuke oefening: zet de Snapping Manager aan. Plaats 3 kaders, maak ze exact even groot, ook de tussenruimte. Supersimpel! Plaats er 3 afbeeldingen in (drag & drop). Selecteer de kaders en resize.

Belangrijke dingen

  • Plaatjes staan NIET in het document! Die moet je altijd apart bewaren.
  • Afbreken: Zet de taal goed. Breek nooit af met afbreekstreepje of Enter, maar altijd automatisch (via Stijlen) of met Cmd-Shift-afbreekstreepje. Kan ook vóór het woord, om níet af te breken.
  • Gebruik altijd Stijlen voor koppen, subkoppen en allerlei andere stijlen. Die kun je namelijk later wijzigen / exporteren, en het werkt sneller en minder foutgevoelig.
  • Bij meerdere pagina’s gebruik je Stramienen: Master Pages. Die zie je staan in het Pagina-palet, boven de gewone pagina’s . Repeterende elementen zoals paginacijfer en headers en footers zet je op dit stramien.
  • Voor drukwerk exporteer je naar PDF. Kies een preset Drukwerkkwaliteit en zet snijlijnen en afloop AAN, maak daar eventueel een eigen nieuwe Preset van.
  • Zet bodytekst altijd op Basislijnstramien – Stel de Threshold in in op bijv 120%, en geef het als kleur Grid Orange.
  • Voor drukwerk moet je de afloop (bleed) rondom op 3 mm extra zetten. Aflopende foto’s en vlakken moeten ook altijd op die extra 3 mm staan.
  • Check voor drukwerk de resolutie van beeld. De Effective PPI moet minstens 240 zijn (voor online 72 ppi)

Nog wat tips

Maak zelf een shortcut voor Plaats Afbeelding: In de voorkeuren kies je ⌘ Shift D bij File > Place. ⌘D is Deselect: moet je zo houden.

Tekst importeren: Word en RTF kun je knippen-en-plakken. Stijl en opmaak bijft behouden.

Bij Voorkeuren > Tools kun je Select when intersect […] beter aanzetten.

Maskers: Klik de Triangle Tool voor allerlei vormen zoals een hartje. Via Layers > Convert to Picture frame kun je in elke vorm een plaatje plaatsen, als masker dus. Dubbelklik het plaatje voor opties.

Inmiddels al opgelost:

  • De “bleed” ofwel afloop is er (File > Document setup > bleed)
  • MET of ZONDER bleed heet View > Clip to Canvas  en er is ook View > bleed
  • Het kettinkje ontbrak bijna overal, om de vier getallen te koppelen voor Top Right Bottom Left.
  • maskers
  • Een gecropt plaatje kun je schalen inclusief inhoud als je eerst groepeert (⌘-G)
  • Automatisch Tekst-kaders aanmaken: Shift-klik op het overflow-icoon rechtsonder in je tekstkader. Nieuwe pagina’s worden nu aangemaakt met identieke kaders.
  • Nederlandse spelling is er nu ook, bij Character > Language. Afbreking nu ook. Handmatig afbreken kan sowieso, de gewone sneltoets ⌘Shift- kan je zelf instellen.