zondag 28 oktober 2012

Kleur tijdens fotograferen

Profiel Adobe Standaard
 Eerder schreef ik over de DNG profiler van Adobe. Deze week die van X-rite uitgeprobeerd. Daarvoor heb ik een kunststof doosje gekocht met daarin de kleurtjes en daarbij zit het computer programmaatje waarmee je een profiel van de camera kunt maken. Ik fotografeer het doosje in het licht waarmee ik wil gaan fotograferen.

Het RAW bestand van mijn camera moet ik daarvoor omzetten naar een DNG bestand.




Ik sleep het bestand dan in het programma "Color Checker Passport".
Daarna vindt het programma met een beetje geluk de gefotografeerde kleurkaart zelf. Mocht dat niet het geval zijn dan geef ik zelf aan waar de hoeken zijn. De groene punten op de hoeken. Als dit goed gaat kies ik voor "create profile". Het profiel wordt ook automatisch bewaard in de goede map. Ik kan ze gebruiken in zowel Camera RAW als Lightroom. Overigens moet ik de progamma's wel opnieuw opstarten om de profielen zichtbaar te krijgen.



 

Wat gebeurt er dan, waar vindt je dat profiel en wat doe je met de andere groep kleurtjes?







In camera calibration staat er bij mij het profile: Adobe standard. In dat lijstje zie ik ook mijn nieuw gemaakte profiel tegen "Nikon D700blog".  Als ik daarvoor kies zie ik de kleuren veranderen.  Ze worden realistischer. Om dat te kunnen zien moet je wel de kleuren kennen zoals ze waren. Of er veel verandert ligt natuurlijk aan de kleurafwijking van de camera zelf. Iedere camera is uniek. Ook is het afhankelijk van de kleurtemperatuur van het licht waarin gefotografeerd is.



(De grote overgangen in kleur zijn afkomstig van het feit dat dit een GIF bestand is. Een Gif bestand kan maar 255 kleuren weergeven waardoor er een aantal weg vallen waardoor er deze strepen ontstaan bij de kleurovergangen.)

Als ik mijn eigen profiel heb toegewezen kan ik de andere kant met kleuren gaan gebruiken.
De 2 binnenste rijtjes zijn om de foto net iets warmer of kouder te maken.
Dit wordt aangegeven met icoontjes. Bergen voor landschapsfotografie en een mensje voor portret fotografie. 

Bij het portretje is de meest linker de neutrale kleur. Meer naar rechts wordt de foto warmer gemaakt doordat er meer geel en magenta toegevoegd wordt. Bij het landschapsrijtje is de middelste de neutrale. Naar links wordt de foto koeler, blauwer en groener, naar rechts iets meer geel en magenta; warmer dus. Daarvoor gebruik ik de witbalans.  

  

Wil je de gevonden resultaten gebruiken op de volgende foto's dan maak je daar een preset van. 

donderdag 25 oktober 2012

Plaatsen van bestanden in Muse

Muse kan JPEG, Gif en PNG bestanden plaatsen. In die gevallen wordt er een link gemaakt naar het originele bestand. Op het moment dat je een PSD bestand plaatst wordt dan maakt muse er een ander samengevoegd bestand van wat zonder link geplaatst wordt; embedded.

Een bestand wordt altijd, ook als je het in muse verkleind bewaard en geüpload in het originele formaat. Daarom is het aan te raden bestanden zelf vooraf de goede formaten mee te geven.


In het "assets" menu kun je problemen zien m.b.t. geplaatste bestanden. De 9 kleurtjes (bovenste 2 icoontjes) geven aan dat het origineel te klein / te groot is.
Het icoontje met vierkantje en driehoekje geeft aan dat een bestand "embed" is.

De bestanden waar geen icoontje bij staat zijn gelinkt. Als de originele afbeelding veranderd wordt krijg je een uitroepteken te zien in het assets paneel. Klik je met de rechtermuisknop op dit uitroepteken dan krijg je de mogelijkheid het bestand te updaten en verdwijnt het uitroepteken.


Plaats je een .PSD bestand dat uit meerdere lagen bestaat dan kun krijg je een keuzescherm tijdens het plaatsen: iedere laag apart kun je nu kiezen (import layer) of het eindresultaat (import composite image).

Als je voor een aantal lagen kiest en daarna op OK dan zie je een klein getal bovenin verschijnen. In dit geval 3. Ik heb dus 3 afbeeldingen die ik één voor één kan gaan plaatsen. De afbeelding die als eerst geplaatst wordt is bovendien klein te zien. Met pijltjes toetsen kun je hierdoor navigeren. Met de escape kun je er één verwijderen. Als je in het venster  "Clip to Layer Content" aangezet hebt dan worden de kaders aangepast aan de inhoud. Als je het origineel bewerkt dan wordt het ook gewijzigd in Muse.


Bestandsformaten GIF, PNG en JPEG

Even een klein overzicht met de verschillen tussen JPG, PNG en GIF bestanden.



Nog over de alpha kanalen: dit is bijvoorbeeld transparantie of slagschaduw. Oudere browsers ondersteunen dit niet. Hierdoor kan je beeld er anders uit gaan zien als bedoeld.

Kleurcodes op het web.

Ik ben wel benieuwd hoe dat eigenlijk zit met die codes voor kleuren die gebruikt worden op het web.

#000 of #000000 (zwart) zijn dezelfde kleur, #FFF of #FFFFF (wit) ook

Ik kom letters tegen en cijfers. Bovendien weet ik dat het een hexadecimaal stelsel is;
het getal 16 hoort daarbij.

2. Uitgaand van de 6 cijfers/letters (bijv. #F0305C)
    De eerste 2 zijn Rood (03), dan 2 voor Groen (05) en dan 2 voor Blauw (5C)
3. Zijn de groepjes van 2 cijfers hetzelfde dan kan het een code met drie cijfers worden.

Welke letters kom ik tegen?
Er zijn 6 letters te weten A, B, C, D, E en F.
Er zijn 10 getallen te weten 0, 1, 2, 3, 4, 5, 6, 7, 8 en 9
Als ik 6 + 10 doe kom ik op 16.
Bij 17 verwacht ik dus een verandering.
Als ik dat uit probeer blijkt dat ook te kloppen.




dinsdag 23 oktober 2012

Menu mogelijkheden in Muse

Het maken van een menu is in Muse gaat behoorlijk automatisch. Als je in je plan de pagina's goed benoemd hebt dan komen ze automatisch in je menu te staan.

Wil je ze, om wat voor reden dan ook, niet in het menu hebben staan of je wil ervoor zorgen dat je er niet op kunt klikken (geen hyperlink dus) dan is dat mogelijk.

Exclude Page From Menu: dan komt de pagina niet in het menu te staan. Dit kan bijvoorbeeld gebruikt worden voor een pagina waaraan je aan het werken bent terwijl de rest online staat.

Met Include Page without Hyperlink is het mogelijk de pagina wel in het menu te hebben staan zonder dat je daar naar toe kunt. (Als de pagina's bijvoorbeeld "childs"heeft).



Een menu zet je natuurlijk in je master pagina zodat het op alle pagina's hetzelfde is. Zorg dat het altijd op dezelfde plaats staat zodat mensen niet hoeven te gaan zoeken. (maar dat gebeurd ook automatisch als je hem in de master hebt staan.

Een menu maken is erg gemakkelijk. Ga naar het widgets library paneel en kies voor horizontal of verticaal. Daarna is het een kwestie van slepen naar de gewenste plaats.

Het menu maakt gebruik van de pagina's zoals deze in je plan staan. De knoppen worden automatisch gemaakt, en werken ook meteen.

Als je een extra button wil, zoals ik naar dit blog dan kun je een tweede menubalk aanmaken die dan "manueel"ingevuld wordt.
Aan deze knop kun je dan een hyperlink toevoegen.

Op zich spreekt het menu maken voor zich. Je kunt alle buttons zelf veranderen van kleur, er ook een ander icoontje op plakken, rollover states maken e.d. De teksten kun je ook zelf aanpassen.

 Je kunt bepalen of je alleen de toplevel pagina's ziet (parents) of ook de andere pagina's (children) en ook die submenu's zijn naar eigen smaak aan te passen.

Je kunt het vlak vullen met een kleur of een gradiënt of het transparant maken. Of een afbeelding in de button plaatsen.




 


Het kleine driehoekje dat aangeeft dat er een submenu is kun je van plaats veranderen door een andere parts positioning te kiezen. Als je het driehoekje selecteert en vervolgens weggooit dan zal het menu er uitgeklapt uitzien (zoals hieronder)




De breedte van het submenu moet per submenu veranderd worden.













Bovendien kun je ook nog een effect meegeven aan het menu of aan de tekst. In het voorbeeld hieronder is overal schaduw toegevoegd.




maandag 22 oktober 2012

Browser fill Muse

 De browser fill om een bericht is hetgeen buiten de website (en dit blog) om te zien is. Het is mogelijk daar een egale kleur te hebben of een gradiënt. Maar het is ook mogelijk om daar een plaatje te zetten of een patroontje. Bij een afbeelding is het moeilijk om de grootte te bepalen. Hoe groot is het beeldscherm waarop iemand jouw site bekijkt. Je kunt het plaatje herhalen horizontaal of verticaal. Zelf vind ik dit zelden mooi. Omdat een egale kleur wat saai is heb ik een puntje gemaakt in Photoshop. Het is gewoon een erg klein bestandje van 30x30 pixels. Maar door het horizontaal en verticaal te herhalen: "tile"wordt het een achtergrondpatroontje en wordt de achtergrond net iets onderbroken in kleur zonder afleidend te zijn van hetgeen op de site/het blog staat.


Position: de plek die vaststaat en waar rondom heen gedraaid wordt. Het punt zet je meestal in het midden. 
Scrolling uit: de afbeelding/browser fill is gefixeerd. Dit kan behoorlijk onrustig zijn tijdens het scrollen.
Scrolling aan: als je in de pagina naar beneden scrolt zal de afbeelding mee gaan. De pagina en achtergrond zitten dus een soort van aan elkaar vast. (Zoals ook bij dit blog).


zondag 21 oktober 2012

Bestanden zo klein mogelijk opslaan voor web

Vroeger was het altijd zo dat een JPEG bestand opgeslagen met Fireworks kleiner was als met Photoshop. (Fireworks was ooit van Macromedia die een andere manier van berekenen van bestanden kende). een testje of het nog steeds zo is.

Ik gebruik een foto die ik 24% kleiner maak naar 1021x680 pixels, 72DPI.

Photoshop venster: image size


In Photoshop probeer ik 2 manieren; te weten gewoon met image > image size de foto verkleinen. (let op als bicubic op automatic staat wordt de foto verscherpt (vaak iets te veel) heb ik in een eerder artikel over geschreven omdat deze optie nieuw is in CS 6 en de default instelling is).

Daarna sla ik hem op als JPG kwaliteit 8/80.

De andere functie in Photoshop die ik gebruik is de file > save for web.
Daar kan ik behalve opslaan voor JPEG ook voor PNG kiezen (8 en 24) Ook kan ik de metadata weglaten en het kleurprofiel.

In Fireworks kan ik in het "save as" venster kiezen of ik wel of geen XMP wil behouden; dat is hetzelfde als metadata. Het kleurprofiel wordt in beide gevallen verwijderd. Fireworks heeft naast PNG24 ook PNG32.

De resultaten van opslaan met JPG hierboven: Het Firework bestand is aanzienlijk kleiner:
141KB tegenover de kleinste Photoshop versie is 267KB. Wel is er ook een groot kleurverschil, waar ik minder blij mee ben; het fireworks bestand mist in alle gevallen kleur en lijkt een groene kleurzweem te hebben ten opzichte van het origineel. Deze kleurverschillen blijf ik zien als ik de foto in een browser open. De oplossing; zet in Photoshop de foto eerst om naar de 'sRGB ruimte (edit > convert to profile). Daarna blijkt de kleur niet meer te veranderen. Fireworks werkt blijkbaar in 'sRGB het standaard webprofiel.




Het opslaan van een foto als PNG laat geen grote verschillen zien in document groottes, wel ook weer ik kleur. 
Venster FW image size

Muse terminologie en web basics

Omdat ik niet gewend ben aan het maken van websites is voor mij een hoop van de terminologie nieuw. Ook weet ik niet zo heel erg veel af van webdesign. Hoewel je als gebruiker je natuurlijk wel eens ergert aan bepaalde dingen op een site.

Een rijtje met basale kennis die ik nodig blijk te hebben. Soms erg basaal en weet ik het ook wel, maar ik probeer zo volledig mogelijk te zijn.


Terminologie:
  • Home: Ik weet natuurlijk dat de home page de eerste pagina is en dat die meestal index.html heet.
  • Sibling page is een pagina op hetzelfde niveau.
  • Child-page is een pagina "eronder" een sub-pagina zou een ander woord ervoor kunnen zijn.
  • Hyperlink: een verwijzing naar een andere pagina of artikel.
  • Favicon: een klein logo dat naast de URL op de pagina verschijnt.
  • Content: de inhoud, hetgeen op de site staat.
  • Performs: o.a. de snelheid van binnenhalen.
  • Browser fill: hetgeen buiten de pagina wat in de browser te zien is. 
  • Page area: het gedeelte waarop de content van de pagina staat.
  • Toolbox: selecteer-, crop-, tekst-, zoom-, hand- en rechthoek-tool.
  • Controlpanel: laat mogelijkheden zien per tool verschillend.
  • Panels: panelen met widgets, kleuren, tekst mogelijkheden etc.
  • Header: kop met logo, titel en/of menu balk.
  • Foother: links naar social media e.d. 
  • Gutters: de afstand tussen kolommen
  • Page area: het gedeelte waaraan je content kunt toevoegen
  • Margin: een vrije ruimte, soort kantlijn in de site.
  • Padding is ook een vrije ruimte maar deze creëert ruimte boven de website waardoor je meer van de browser fill ziet.
  • Web fonts: lettertypes gepost door een bedrijf online: zoals Adobe Typekit. Op het moment dat de website geopend wordt wordt het font in de browser geladen via een script src="http://webfonts.creativecloud.com/de-walpergens-pica:n4:all.js.
  • Web save fonts: lettertype die eigenlijk op alle systemen wel geïnstalleerd is en daardoor te zien. (Denk aan arial).
  • System fonts: deze fonts worden door Muse omgezet naar een image (.PNG) zodat ze op de site te zien zijn. Te herkennen aan het logootje: een logo met een "T".



Footer en header guides zijn alleen op master pagina's te veranderen.

  • Letter space: afstand tussen de letters. Als je een heel woord selecteert worden alle letters uit elkaar geschoven. Ga je tussen 2 letters staan dan alleen daar plaatselijk.
  • Leading: onderlinge regelafstand (standaard %, maar je kunt ook px intypen).
  • Indent: Inspringen bovenste regel
  • Align justify: het uitvullen van een tekst waardoor er een blok ontstaat.
  • Inline Content: inhoud (afbeelding) die in een tekstvlak geplaatst is waardoor hij bij het verschalen meebeweegt. De afbeelding behoudt dus zijn plaats ten opzichte van de tekst.

Webdesign:
  • Muse maakt de site met vaste breedte gecentreerd in de browser: fixed width. De hoogte is afhankelijk van de content.
  • File size: de grootte van een bestand op de site. Om een bestand te kunnen zien moet het gedownload worden naar de computer; hoe kleiner de bestanden hoe sneller ze zijn. Dit kun je bij Photoshop > save for web helemaal zelf in de hand houden. 
  • Het is aan te raden de kleuren op alle pagina's gelijk te houden. Ook de navigatie niet van plaats veranderen omdat mensen dan moeten gaan zoeken.
  • navigatie snel, overzichtelijk en duidelijk maken en zorg dat de interactiviteit duidelijk wordt zodat mensen snel doorhebben waar deze te vinden is: in muse kun je dit regelen in je masterpage.
  • In de Footer en Header van een pagina kun je de dingen zetten die iedere pagina aanwezig moeten zijn. 

Favicon en hyperlinks in Muse


Een favicon blijkt een logo te zijn dat je ziet naast de naam URL. Om er zelf één te maken in bijvoorbeeld Photoshop heb je een vierkant documentje nodig van  32x32 pixels en 72DPI. Te bewaren als: GIF, JPG of PNG. Je kunt hem toevoegen in het venster file > image properties. Door op het mapjes icoon te klikken in het layout-venster kun je je favicon bestandje selecteren en invoegen. De code:  link rel="shortcut icon" href="images/home-favicon.ico?3921047416"/


In het Hyperlinks paneel blijk ik de keuzes van de kleuren van de hyperlinks te kunnen instellen. Je kunt het ook opslaan als een style. Op het moment dat ik een stuk tekst om wil zetten in een hyperlink dan zie ik daar mijn opgeslagen style terug als keuze.Ook kan ik instellen hoe de tekst zich moet gaan gedragen.
T = bold
T = cursiefT = onderlijnd
Je kunt hierin verschillen maken met 3 mogelijkheden.
☑ Een vinkje betekend dat je ervoor kiest (3 vinkjes op een rijtje kan ook. Gevolg: bold, cursief en onderstreept)☐ Een leeg vlakje betekend dat het NIET gebeurd⚀ Een grijs blokje betekend dat de staat blijft zoals hij was. Dus als de tekst in de normal-state onderstreept was en in de hover staat een grijs vlakje dan blijft hij onderstreept. Dan nog de code die Muse wegschrijft op het moment dat je de site publiceert. Aan de achterkant schrijft Muse dus gewoon de HTML code.a:linka:visiteda:hovera:active color: #78CE07; (kleurcode) font-style: italic; (schuin/ cursief) font-weight: bold; (bold/ dim) text-decoration: inherit; (vorige) text-decoration: underline (onderstreept)
Nu heb ik dit voor de hele site gedaan bij file > site properties. Maar een aantal properties zijn ook op pagina niveau te veranderen of in de master bij page > page properties. Page properties overschrijven altijd de site en de master properties (ook als de site properties later nog aangepast worden). Master properties overschrijven alleen de site properties.In het tweede tabblad kan ik per pagina de metadata aanpassen. Metadata zijn tekst beschrijvingen op basis waarvan zoekmachines werken. Waardoor je site bijvoorbeeld sneller gevonden kan worden. a. description: beschrijving die weergegeven wordt in een zoekmachine over de site. Houdt ongeveer 150 karakters aan. Maak per pagina een unieke beschrijving waarbij je feiten die niet in de titel van de pagina staat noemt.                                                         b. keywords: de woorden waarop gezocht kan worden. Zet deze in volgorde van belangrijkheid. Plaats komma's tussen de woorden waarop gezocht kan worden.c. Page title is normaal gesproken dezelfde als de page name. Als je het vinkje "same as Page Name"uitzet dan kun je dit veranderen. Wat je daar nu als titel zet kom je tegen boven de pagina als je hem opent. Zorg dat je er ook achter zet wat soort pagina het is: in dit geval "| Home". meta http-equiv="Content-type" content="text/html;charset=UTF-8"/meta name="description" content="Hilde Maassen is photographer. She likes to react on thinks that happens."/meta name="keywords" content="dogs, dogs in the city, Rotterdam, the netherlands, photography, pictures, hond, honden, hondjes, stad, "/(Ik moet haakjes om de code weglaten anders laag mijn blog het niet zien).

donderdag 18 oktober 2012

Eigen color LOOKup templates maken

Eerder schreef ik over de nieuwe adjustmentlayer: color Lookup. Me daarbij een paar dingen afvragend. Wat is het, wat doet het, want het lijkt nu net een filter te zijn.

Het blijkt een andere manier van kleuraanpassingen maken te zijn die uit de videowereld komt. Nu heeft Adobe speedgrade (overgenomen). Dit is een speciaal programma waarin je kleur kunt managen voor video.

Met speedgrade is het mogelijk de wijzigingen die je maakt op te slaan als een ".look" document. Dit kun je vervolgens in het adjustment paneel tevoorschijn toveren.

Hoewel ik Speedgrade helemaal niet beheers is het me wel gelukt een adjustment te maken.

* Open een foto in speedgrade (zelf heb ik een jpeg gebruikt) die ik op het bureaublad gezet had.
Deze moet je op de timeline zien te krijgen: dubbel klik.

* Nu kun je op enorm veel manieren kleuraanpassingen maken;

* Ronde schijven voor  offset, gamma en gain. Dat voor de hoge lichten, schaduwen, middentonen of het hele beeld. Schufjes met weer andere mogelijkheden of plaatjes met een beetje meer van dit of van dat.
* Effecten optellen doe je door iedere keer in het lagen paneel een nieuwe laag aan te maken. Ben je tevreden dan klik de op het opslaan knopje (naast prullenbak)

* De foto komt nu onderin met de nieuwe look te staan. Als je op de tumbnail komt dan zie je een E staan. Klik je hierop dan verschijnt er een export venster.
Geen idee wat het allemaal betekend dus ik hem maar gewoon alles aangekruist en export gekozen. Er wordt dan een zip bestand aangemaakt. deze heb ik geopend en het . look bestand heb ik verhuisd naar de presets van het programma Photoshop.


* In het adjustmentpaneel in photoshop kan ik gewoon aangeven waar ik het 'look' bestand heb staan. (load LUT bestand). De .cube en .3dl bestanden die tevens gemaakt zijn ook bruikbaar.









Als ik dezelfde Look op 2 verschillende foto's "loslaat"krijg ik hetzelfde kleurgevoel. Ik begin het nut van de functie in te zien.