internet ready {images for blogs}

Okay….so I’ve been asked a lot about how I resize and edit my pictures to get them internet-ready.

I figured it’s about time I post about it here so everyone else can find out about it as well.

First of – I work with Photoshop (version CS3) but I’m sure the steps I take are good for any other editing software, too. Not only is it important to resize your images you also need to resharpen them as well. Be careful with the sharpening though – you don’t want them to be too sharp. {ouch – pain to my eyes!}

Not every blog template has room for pictures as large as mine….for those it’s probably good to stick to a size around 470px for the longest side of the picture. For myself I use 2 different sizes: 665px height for vertical pictures (so 2 of them fit together) and 850px width for horizontal pictures. Make sure with your blog host/template design for the dimension size of your post area. We don’t want the picture to be overlapping with something it shouldn’t. 😀

Okay…so here we go…after editing your picture and flattening it, resize it:

Image>Image resize {always change the longest side; select a number that’ll work with your design template} horizontal pictures: 850px width & vertical pictures: 665px height …now resharpen it:

Filter>Sharpen>Unsharp mask ‘Amount: 65%, Radius: 0.4px, Threshold: 0 levels‘

…and the final step it to ‘Save for Web and devices‘. This is very important, since the color spectrum on the internet and electronic devices are different from a print spectrum. If you don’t save your pictures optimized for web-viewing your colors might look a little off. Since I do a lot of editing and try to minimize the amount of time spent on that part of my business I made my own action. Photoshop Actions are awesome and a huge time/life safer. You can download my resizing action here. Just download, open in Photoshop and hit the play button. But remember – a web-optimized picture only looks as good (or bad) as its’ original. Resizing and sharpening does not make up for a wrong exposure. I hope this might help one or the other and will improve the look of your blog. 😀 Enjoy!

… until next time; and don’t forget to leave me some comment love …

Okay….ich werde ständig gefragt, wie ich meine Fotos bearbeite, damit sie fertig für den Internetupload sind.

Dachte mir, dass es Zeit ist es hier offiziell zu posten, damit auch alle anderen davon erfahren.

Ich arbeite ausschließlich mit Photoshop (CS3 Version) aber dieser Vorgang klappt auch mit anderen Editierungsprogrammen. Jetzt aber zum eigentlichen….es ist nicht nur  wichtig Fotos zu verkleinern, sondern sollte man sie auch nochmal extra nachschärfen. Aber Vorsicht, dass sie nicht zu scharf werden.  {aua – meine Augen!}

Nicht jedes Blog Design bietet die Möglichkeit Fotos so groß wie meine hochzuladen…..daher ist eine min. Größe von 470px der längsten Kantenseite ein guter Maßstab. Ich persönlich benutze 2 verschiedene Größen: 665px längste Kantenseite für vertikale Fotos (damit 2 nebeneinander passen) und 850px längste Kantenseite für horizontale Fotos. Geht aber vor dem Verkleinern einfach nochmal in euer Stylesheet schaun, welche Größe erlaubt ist. Wir wollen doch nicht, dass die Fotos in einen anderen (Seiten) Bereich überlappen. 😀

So und nun zum wichtigen Teil….nachdem das Foto fertig editiert und auf die Hintergrundebene reduziert ist wird die Bildgröße verändert:

Bild>Bildgröße {hier darauf achten, dass immer die längste Kantenseite verändert wird; nimm eine Größe die mit deinem Blog Design funktioniert} horizontale Fotos: 850px Breite & vertikale Fotos: 665px Höhe …und jetzt wird nachgeschärft:

Filter>Schärfen>Unscharf maskieren ‘Betrag: 65%, Radius: 0,4px, Grenzwert: 0 levels‘ …und zu guter letzt ‘Abspeichern für’s web‘. Dieser Schritt ist wichtig, weil das Farbspektrum für’s Internet und für andere elektron. Geräte anders ist als das für den Druck. Wenn man Fotos nicht für’s Web abspeichert sind die Farben etwas anders als im Original.

Da ich sehr viel editiere und ich versuche so wenig Zeit wie möglich für diesen Aspekt meiner Arbeit zu investieren, habe ich mir meine eigenen PS Aktionen gemacht. Photoshop Aktionen sind super und sparen einem viel Zeit! Hier findet ihr meine Aktion für die Weboptimierung/Verkleinerung von Fotos. Einfach runterladen, in Photoshop öffnen und im Aktionsfenster den Startknopf wählen. Aber denkt dran, dass ein web-optimiertes Foto nur so gut (oder schlecht) aussieht wie das Original. Web-Optimierung behebt keine Belichtungsfehler.

Ich hoffe meine Tipps und Tricks helfen dem ein oder anderen und ihr könnt das Design eures Blogs mit tollen, großen, scharfen Fotos optimieren. 😀 Viel Spaß!

… bis zum nächsten Mal; und vergesst nicht mir etwas Kommentarliebe zu hinterlassen …