Bissinger's Blog » Photoshop http://blog.bissinger.biz Der tägliche Computer-Ärger hat ein Ende... oder doch nicht!? Sun, 07 Mar 2010 17:43:59 +0000 en hourly 1 http://wordpress.org/?v=abc Wallpapers, Tutorials und Inspiration http://blog.bissinger.biz/wallpapers-tutorials-und-inspiration/ http://blog.bissinger.biz/wallpapers-tutorials-und-inspiration/#comments Tue, 07 Oct 2008 19:45:44 +0000 Manuel Bissinger http://blog.bissinger.biz/?p=316 Eine kleine aber feine Auswahl an Hintergründen findet man bei Abduzeedo. Die Bilder enthalten zwar immer mal wieder das Designer-eigene Logo, was jedoch z.T. recht gut zum Wallpaper passt und nicht negativ auffällt.

Außerdem gibt’s recht schöne Photoshop-Tutorials in Schrift- und sogar Video-Form. Ziemlich gut gemacht alles.

Im Blog gibt’s immer mal wieder Sachen zum Thema Design, so z.B. ausgesuchte Übersichten von besonders schönen Webseiten mit “besonderem” Style.

]]> http://blog.bissinger.biz/wallpapers-tutorials-und-inspiration/feed/ 0 Alternative zum border-image mit CSS http://blog.bissinger.biz/alternative-zum-border-image-mit-css/ http://blog.bissinger.biz/alternative-zum-border-image-mit-css/#comments Tue, 03 Jun 2008 16:18:24 +0000 Manuel Bissinger http://blog.bissinger.biz/?p=189 Beim erstellen einer, wenn auch kleinen, Website stößt man doch immer mal wieder auf kleiner Probleme bei der Umsetzung. So hat sich z.B. jemand überlegt, es wäre doch ganz schick, wenn man um seinen Content einen grafischen Rahmen erstellt. Eine komfortable Funktion dafür gibt es im Bereich von CSS. Diese nennt sich border-image. Problem ist nur, dass es diese erst in der CSS-Version 3 geben wird. Aktuell nutzbar ist jedoch die Version 2.1, welche ohne eine solche Funktion auskommen muss. Dementsprechend muss man sich leider anderweitig behelfen. Hier jetzt eine kleine Anleitung zu meiner Lösung – es gibt ja bekanntlich immer mehrere für ein Problem.

Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.

Erstmal benötigt man einen Rahmen, den man später um seinen Inhalt haben möchte. Ich habe diesen mit Photoshop auf die schnelle erstellt.

  • PS öffnen, neues Bild erstellen (500x500px) und neue Ebene erstellen.
  • Untere Ebene ist weiß, obere ist schwarz.
  • Rechtsklick auf ober Ebene (schwarz) -> Fülloptionen…, “Schein nach innen” auswählen, Füllmethode: Normal, Deckkraft: 100%, Farbe: weiß (eben wie die untere Ebene), Größe: 40px, Kontur: Halbrund.

  • Taste “K” drücken bzw. Slice-Werkzeug auswählen. Damit lassen sich jetzt einzelne Bereiche im nachhinein zurecht schneiden. Erstmal ein Rechteck in die mitte des Bildes ziehen. Größe und Form ist egal, hauptsache mittig.

  • In der Werkzeugleiste klickt man jetzt etwas länger auf das Slice-Werkzeug um sich das Slice-Auswahl-Werkzeug zu holen oder man hält einfach die STRG-Taste gedrückt (die wechselt automatisch um).

  • Doppelklick auf das Rechteck mit der Nummer 01 (links oben im Rechteck zu sehen).
  • Slice-Typ: Bild, Name: lo (für links oben), X: 0, Y: 0, B: 40 (s.o. Größe des Rahmens), H: 40 (s. Breite), Slice-Hintergrundart: Ohne.
  • Jetzt wählt man Slice 02 aus und geht genauso vor. Name: mo (mitte oben), X: 40, Y: 0, B: 10 (reicht erstmal), H: 40.
  • Weiter zu Slice 03 – Name: ro, X: 460 (weil 500-40=460), Y: 0, B: 40, H: 40. Jetzt entsteht ein neues, aktives Slice 04. Nummer 03 bleibt grau und ist somit erstmal nicht aktiv.
  • Nun zum Slice unterhalb von 01. Name: lm, X: 0, Y: 40, B: 40, H: 10.
  • Slice unterhalb von 04 bekommt den Namen: rm, X: 460, Y: 40, B: 40, H: 10.
  • Unten links (geht’s weiter mit Name: lu, X: 0, Y: 460, B: 40, H: 40.
  • Nebendran wird ein Slice namens mu und den Werten X: 40, Y: 460, B: 10, H: 40 erstellt.
  • Das letzte nennt man ru, X: 460, Y: 460, B: 40, H: 40.
  • Jetzt dürfte man einige Slices auf dem Bild sehen, mit Glück nur 9, ansonsten eben mehr. Alles kein Problem, hauptsache man hat die 8 wichtigen lo, mo, ro, lm, rm, lu, mu und ru.
  • Hat man diese, speichert man das ganze wie folgt: Datei -> Für Web speichern… .
  • Mit einem Rechtsklick auf das Bild und “Auto-Slices ausblenden” verschafft man sich noch etwas Übersicht.
  • Man wählt jetzt Slice 01 aus, danach mit gedrückter Shift-Taste das Slice daneben und darunter, dann das rechts oben und darunter, das links unten und daneben und das einzelne rechts unten. 8 sollten es jetzt schon sein.
  • Ganz rechts wählt man nun das Dateiformat aus. Bei JPEG macht man in diesem Fall nichts verkehrt und schon kann man auf Speichern klicken.
  • Am einfachsten ist das Speichern als “HTML und Bilder”. Hierbei werden die ausgewählten Slices mit den vorher eingegebenen Namen im Ordner “Bilder” abgespeichert. Nur diese werden nachher auch benötigt.
  • Somit hat man nun 8 jpg-Bilder. Die vier Ecken, sowie 4 Teilstücke aus den Rändern.
  • Die Datei “Abstandhalter.gif” wird nicht benötigt und kann gelöscht werden.

Der Einfachheit halber erstellt man jetzt eine html-Datei direkt im Ordner “Bilder”. Der Inhalt sollte einer Standard-HTML-Seite entsprechen und wird erstmal im Body um folgende Zeilen ergänzt:

<body>
<div id="page">
<div id="oben">
<div id="lo"></div>
<div id="mo"></div>
<div id="ro"></div>
</div>
<div id="rm">
<div id="lm">
<div id="text"></div>
</div>
</div>
<div id="footer">
<div id="lu"></div>
<div id="mu"></div>
<div id="ru"></div>
</div>
</div>
</body>

Jetzt braucht man nur noch die passenden CSS-Einträge:

<style type="text/css">
/* erstmal alles auf Anfang */
* {
padding :-0 ;
margin :-0 ;
border :-0 ;
}
p {
color:white;
background-color:black;
}

/* Gesamt-Rahmen */
#page {
width:880px;
}

/* Oberer Rahmen */
#lo {
float:left;
background: url(bilder/lo.jpg) no-repeat black; /* Grafik wird nicht wiederholt */
height:40px;                                    /* Höhe und Breite sind 40px, wie bei PS angegeben */
width:40px;
}
#mo {
float:left;
background: url(bilder/mo.jpg) repeat-x black;  /* Grafik wird nur in x-Achse, also vertikal wiederholt */
height:40px;
width:800px;                                    /* ergibt sich aus 880px-40px-40px (#page-#lo-#ro) */
}
#ro {
float:left;
background: url(bilder/ro.jpg) no-repeat black;
height:40px;
width:40px;
}

/* Mittlerer Rahmen für Content */
#rm {
background: url(bilder/rm.jpg) repeat-y black right top;        /* erst der rechte Rahmen */
}
#lm {
background: url(bilder/lm.jpg) repeat-y transparent left top;   /* dann der linke Rahmen und Rest transparent */
color:white;
width:100%;                                                     /* wichtig, sonst klappt's nicht */
}

#text {
padding: 0 60px;
}

/* Unterer Rahmen */
#lu {
float:left;
background: url(bilder/lu.jpg) no-repeat black;
height:40px;
width:40px;
}
#mu {
float:left;
background: url(bilder/mu.jpg) repeat-x black;
height:40px;
width:800px;
}
#ru {
float:left;
background: url(bilder/ru.jpg) no-repeat black;
height:40px;
width:40px;
}
</style>

Das ganze kann man sich natürlich auch als gepacktes ZIP-Archiv hier herunterladen.

Für dieses Konstrukt kann man fast jede Rahmen-Grafik nutzen, die man findet. Auch lassen sich so z.B. Bilderrahmen erstellen. Dabei sollte man allerdings auf die Transparenz der Grafiken achten. Also nur als GIF oder PNG (Vorsicht: IE) speichern und ohne weißen o.ä. Hintergrund. Ebenfalls sollte man auf die Wiederholbarkeit der Ränder achten. Sprich, die Texturen sollten sauber aneinander gereiht werden können.

]]> http://blog.bissinger.biz/alternative-zum-border-image-mit-css/feed/ 0 Update: Online-Bildbearbeitung von Adobe http://blog.bissinger.biz/update-online-bildbearbeitung-von-adobe/ http://blog.bissinger.biz/update-online-bildbearbeitung-von-adobe/#comments Sun, 30 Mar 2008 21:58:33 +0000 Manuel Bissinger http://blog.bissinger.biz/?p=118 Photoshop LogoEndlich ist es soweit! Der Software-Hersteller Adobe stellt nach langer Zeit der Ankündigungen sein Online-Photoshop den gierigen Massen zur Verfügung. Das ganze funktioniert wie viele andere Online-Applikationen, über die ich hier schon berichtet habe. Um das “Photoshop Express” nutzen zu können, muss man sich leider erst registrieren.

Nach der kostenlosen Registrierung erhält man eine komplette Fotomanager-Umgebung, wie z.B. von Google mit Picasa. Auch kann man seine Bilder für andere in Galerien zusammenstellen und per Slideshow präsentieren, ganz nach Flickr-Manier. Und natürlich lassen sich alle Bilder editieren, also bearbeiten. Ebenfalls wie bei Flickr bekommt man eine .photoshop.com-Adresse mit 2GB Webspace für seine Galerie.

Sehr gelungen, wie ich finde, was Adobe da auf die Beine gestellt hat. Das ganze läuft sehr flüssig und schnell, im Vergleich zu anderen Anbietern solcher Tools. Auf jeden Fall eine Sache, die Anwendung finden wird. Vor allem, wenn man eben keine Bildbearbeitungs-Software lokal installiert hat.

]]> http://blog.bissinger.biz/update-online-bildbearbeitung-von-adobe/feed/ 0