team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community » WEBPRODUKTION http://team.elizzza.net Club der wifen Nasen - Gemeinsam sind wir schlauer! Tue, 07 Feb 2012 08:49:21 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Google Font Vorschau http://team.elizzza.net/2010/09/17/google-font-vorschau/ http://team.elizzza.net/2010/09/17/google-font-vorschau/#comments Fri, 17 Sep 2010 02:57:12 +0000 eliZZZa http://team.elizzza.net/?p=3384 Nachdem es nun endlich eine funktionierende Lösung für WebFonts gibt (von wem wohl?), findest Du im Google Font Directory auch einen “Font Previewer“. Damit kannst Du die derzeit angebotenen Web-Schriften mit beliebigem Text und in verschiedenen Größen ansehen.

]]> http://team.elizzza.net/2010/09/17/google-font-vorschau/feed/ 0 Flash Actionscript Navigation http://team.elizzza.net/2010/05/29/flash-actionscript-navigation/ http://team.elizzza.net/2010/05/29/flash-actionscript-navigation/#comments Sat, 29 May 2010 13:44:37 +0000 Dalee http://team.elizzza.net/?p=3235 Hallo,

es gibt wiedereinmal ein neues Videotutorial in dem ich herzeige wie man eine Flash Navigation erstellt. Actionscript kommt dabei auch zum Einsatz. Hoffe das Tutorial kann euch mal helfen.

Lg, Dali

Flash Navigation Link

]]> http://team.elizzza.net/2010/05/29/flash-actionscript-navigation/feed/ 0 Typografie http://team.elizzza.net/2010/05/28/typografie/ http://team.elizzza.net/2010/05/28/typografie/#comments Fri, 28 May 2010 17:17:11 +0000 gerald.reisner http://team.elizzza.net/?p=3227 Hi! Beim täglichen Surfen im Web bin ich auf einen Artikel zum Plug-In “WP Google Fonts” gestossen. Ich habe schon gelesen, daß Google eine kleine Zahl von Fonts fürs Web zur Verfügung stellt, und jetzt, vielleicht eine Woche danach, gibt es schon das passende Plugin.
Wer ist “mutig” und probiert das aus? Als blutiger WP-Anfänger bin ich noch zu feig! Ich freue mich ja noch regelmäßig, wenn alles so funktioniert, wie ich es will.

Nochwas: Das Plugin “wp-Typography” mag ich auch gerne, alleine deshalb, weil die Anführungsstriche dann an der richtigen Stelle stehen, namlich zuerst unten, und dann oben.

Wie gesagt, ich freue mich auch noch über die kleinen Dinge!

Ciao, Gerald

]]> http://team.elizzza.net/2010/05/28/typografie/feed/ 0 Endlich Typografie!!! Google Fonts API http://team.elizzza.net/2010/05/23/endlich-typografie-google-fonts-api/ http://team.elizzza.net/2010/05/23/endlich-typografie-google-fonts-api/#comments Sat, 22 May 2010 23:42:59 +0000 eliZZZa http://team.elizzza.net/?p=3199 Ich habe nicht geglaubt, dass ich DAS noch erleben darf: Google hat vor wenigen Tagen seine Schriftenlösung vorgestellt.

Und so funktionierts:Im <head> Deiner Site fügst Du folgende Zeile ein:

<link href=’http://fonts.googleapis.com/css?family=’Yanone+Kaffeesatz’ rel=’stylesheet’ type=’text/css’>
<style>
body { font-family: ’Yanone Kaffeesatz’, serif; font-size: 100px; }
</style>

Das ist auch schon alles. Genial, nicht? Die Schriften werden dabei von Google gehostet und funktionieren browserkompatibel bis runter zu IE 6.

Und hier die Liste der derzeit verfügbaren Schriften (die laufend wachsen wird.

]]> http://team.elizzza.net/2010/05/23/endlich-typografie-google-fonts-api/feed/ 1 Gratis Webspace – Blogspot http://team.elizzza.net/2009/10/09/gratis-webspace-blogspot/ http://team.elizzza.net/2009/10/09/gratis-webspace-blogspot/#comments Fri, 09 Oct 2009 09:20:45 +0000 Natalie http://team.elizzza.net/?p=3032 Ich bin immer noch auf der Suche nach (fast Gratis) Webspace bei gleichzeitig grösstmöglicher Designerfreiheit (keine Header-Modulbildchen die man einzeln kaufen muss, das nervt …)

Hat schon jemand einen Blogspot probiert? Hier eine Beispielseite, die schon fast wie ein Onlineshop aussieht!

https://www.blogger.com/start

http://borneo-crafts.blogspot.com/

Für Hinweise anderer free spots bin ich nach wie vor dankbar! (Hab noch einige die “fast gratis” online sein wollen …)

lg

Natalie

]]> http://team.elizzza.net/2009/10/09/gratis-webspace-blogspot/feed/ 0 soundstream http://team.elizzza.net/2009/09/24/soundstream/ http://team.elizzza.net/2009/09/24/soundstream/#comments Thu, 24 Sep 2009 13:09:56 +0000 lissommiller http://team.elizzza.net/?p=2978 http://soundcloud.com/lissommiller/

[soundcloud url="http://soundcloud.com/lissommiller/spinne1-1"]

(wäre das Widget bereits installiert, würde man anstelle dieses codes, bereits den player sehen)

Jeder der mit Wordpres arbeitet und schnell und unkompliziert einen Player installieren möchte, empfehle ich www.soundcloud.com ! Sobald das Soundcloud Widget installiert ist, kann man den Code direkt in den Artikel kopieren und das Plugin wandelt diesen in einen Musicstream in Form eines Players um. Natürlich muss man dazu, sich zuerst bei Soundloud.com anmelden und seine Musicfiles dort uploaden, siehe link ganz oben (http://soundcloud.com/lissommiller/) damit man auf Files zurückgreifen kann. Ein weiterer Vorteil, ist das nun diese Files am Server von Soundcloud liegen und beim Abspielen des Players auf Soundcloudserver zugegriffen wird.

The SoundCloud Shortcode plugin allows you to easily integrate a player widget for a track, set or group from SoundCloud into your WordPress Blog by using a WordPress shortcode. Use it like that in your blog post: [soundcloud]http://soundcloud.com/LINK_TO_TRACK_SET_OR_GROUP[/soundcloud] It also supports these optional parameters: width, height and params. The “params” parameter will pass the given options on to the player widget. Our player accepts the following parameter options:

Viel Vergnügen

lissom miller

]]> http://team.elizzza.net/2009/09/24/soundstream/feed/ 0 Kursmitschrift Webdesign 2009 Basiskurs http://team.elizzza.net/2009/07/22/kursmitschrift-teil1/ http://team.elizzza.net/2009/07/22/kursmitschrift-teil1/#comments Wed, 22 Jul 2009 10:23:55 +0000 lissommiller http://team.elizzza.net/?p=2764 Mitschrift Webdesign Basiskurs Teil 1

Montag 15.06.2009
Kontaktformular:
Felderbreite wird in „col“ angegeben
<form>
Anrede   
Name   
Email    
Nachricht  
Nachricht
</form> – Tag
immer „post“ wählen (bei „get“ stehen alle Infos in der Browser-Zeile)
<action> mail senden. php (immer besser als mailto, da sonst user mail-programm
haben muß)
<name> Name des Formulars
wenn man bei  Webspace kein php dabei hat (inkludierte kostenfreie Datenbank)
Tabelle:
col 1 – Acol 2 – B col 3 – C col 4 – D col 5 – E
row 1 B1
row 2 C2 E2
row 3 D3
row 4 C4
<table>
<tr>
<td> Zeile1/Spalte1 </td>
<td> Zeile1/Spalte2 </td>
<td> Zeile1/Spalte3 </td>
</tr>
<tr>
<td> Zeile2/Spalte1 </td>
<td> Zeile2/Spalte2 </td>
<td> Zeile2/Spalte3 </td>
</tr>
</table>
Vertikale Ausrichtung mit:
valign=„top“
valign=„middle“
valign=„bottom“
Cellpadding:
Abstand des Inhalts zum eigenen Zellenrand innerhalb der Tabellenzeile (Höhe in
der Spalte)
Cellspacing:
ist der Abstand zwischen den Rahmen/Zellen zueinander
th = table header
td = table data
tr = table row
scope definiert die Spalte (column)  z.B.  <th scope=“col“>
row definiert die Zeile
„col“ tag = die vertikale  -  align-Zuweisung
„colgroup“ und „col“ steuern die Darstellung von Tabellenspalten zuverlässoger als
das „width“-Attribut
von Tabellenzellen oder das inziwschen veraltete und schon vergessene „blinde gif“
Notiz: die Breite für „col“ id in % angegeben
margin: Außenabstand
padding: Innenabstand
wird margin oder padding mit nur einem Wert angegeben, so bezieht sich dieser
auf alle Seiten (z.B.: margin: 20px;)
nur wenn „margin top“ oder „margin bottom“ schreibe, bezieht es nur auf den
Abstand oben oder unten
Navigation besteht aus Hyperlinks!
border = Rahmen
border-style = Linienart  ………….  – - – - – - – - – ____________
dotted                               solid
Blockelement (bei Navigationsübung) ist das „ul“
Hexadezimalcode: 6-stellige Farbangabe (z.B.: h2 {color: #440055;} )
wenn alle 6 Stellen gleich genügt Angabe mit #000
oder #55bb99 kann auch mit nur 3 Stellen angegeben werden # 5b9
Der Code, den Browser eigenständig anbieten, heißt „Proprietärer Code“
PHOTOSHOP
ALT +  = Auswahl wird mit Vordergrundfarbe gefüllt
STRG ( ) +  = Auswahl wird mit Hintergrundfarbe gefüllt
+ D = Auswahl aufheben, aber auch “alle Werkzeuge aufheben“

(einzelne Zeile) =
dritte Position im
Auswahlwerkzeugmenü horiziontal
vierte Position – vertikal einzelne Pixelspalte
Mit dem Auswahlwerkzeug die jeweilige Kante
anwählen.
mit Pfeilwerkzeug (1. Werkzeug von oben) +   wird Pixelreihe dupliziert, aber in
derselben Ebene !!!
was ich noch mit dem super 1. werkzeug machen kann.
- Sachen anfassen und herumschieben
+ ALT + li. Maustaste – Doppelpfeil erscheint, wird Auswahl durch Ziehen mit
der Maus (alle oben genannten Tasten drücken) dupliziert und kann gleichzeitig
verschoben werden
Tabulator-Taste blendet alle Werkzeuge und paletten aus; um sie wiederzu
bekommen – erneut Tabulator-Taste
Strg ( )+ ALT und linker Maustaste auf kleines Fenster
in der Ebenenpalette klicken – markiert alle Objekte auf
dieser Ebene!
Strg + ,  =  alle Hilfslinien ausblenden

mit Auswahlrechteck das erste Rechteck zeichnen,
dann Umschalttaste halten
(es erscheint ein + im Cursor) und zweites
Rechteck ziehen – wird zu erster Auswahl
hinzugefügt
Arbeitsfläche vergrößern: Menü Bild / Arbeitsfläche /
Ausschnitt auswählen, STRG ( ) + c = Auswahl kopieren,
STRG ( ) + n = Neue Datei öffnen (diese übernimmt automatisch die Größe des
kopierten Ausschnitts)
STRG ( ) + v = Einfügen
Bei STRG ( ) + x = Ausschneiden oder STRG ( ) + c = Kopieren und nachher
STRG ( ) + v im selben Dokument wird in eigene Ebene eingefügt !
STRG ( ) + d = Auswahl aufheben
Hilfslinien präzise setzen: Menü / Ansicht / Neue Hilfslinie
Mittelpunkt einer Auswahl mit gedrückter ALT festlegen und von dort
auseinanderziehen – Mittelpunkt bleibt
ALT + Umschalttaste gleichzeitig zum der Maus – Auswahl wird vom Mittelpunkt aus
quadratisch oder kreisrund
Maskieren:
Hintergrundebene, dann eine neue leere Ebene (=Ebene 1), diese mit bunter Farbe
füllen und diese unter die Hintergrundebene legen
STRG ( ) + T  =  Transfornmieren
STRG ( ) + E  =  zu 1 Ebenen zusammen fügen (vorher in Ebenenpalette
mit gedrückter STRG ( ) die 2 oder mehreren Ebenen auswählen, die
zusammengefügt werden sollen.
host-provider: domain factory (richtiger server mit DB)
internet provider: A1, UPC, …
hinter der domain steht die ip-adresse eine Identifizierungsnummer mit meinem
domain-namen verknüpft!
Webseiten-Optimierung
Für Zugriffsanalyse:
jeder Provider muß Zugriffanalyse bereitstellen
oder google-analytics
mail.google.adresse anlegen, bei analyst anmelden, man kriegt script/code
zugewiesen, der dann in den <head> eingebaut wird.
Suchmaschinenoptimierung:
um zu bestimmen welchen Text die (google)-Suchmaschine ausliest:
<h6>Meine Site …………. </h6> Kurzbeschreibung – dieser Text erscheint
dann bei der google-Suche unterhalb der Überschrift, wo normalerweise nur
unverständlicher Quargel steht, weil die Suchmaschine jeweils nur die ersten Zeilen
der Site liest, egal, was dort steht.
diese h6, gleich nach dem body-tag als ersten inhalt überhaupt einfügen
im CSS-Sheet: h6 {display: none;} ! Text wird nicht dargestellt, aber von
Suchmaschine trotzdem eingelesen.
im <title>alles möglich reinschreiben (suchbegriffe). 256 zeichen sind möglich
im <meta>-tag: <meta name=“keywords“
content=“4 eigenschaften, 2 eigenschaften, ….“/> (meta kommt auch in head)
ca. 500 Zeichen für “keyword“, 250 für “description“
<meta name=“description“ content=“……..“
gut um von Suchmaschine zu Suchbegriffe gefunden und weiter nach vorne gereiht
zu werden:
• aussagekräftige strukturelle Elemente wie: headings, linktext, listen, alt-texte
• suchbegriffe im content
• links von anderen auf meine seite (muß aber relevanz haben)
• super sind links von .gov, .edu, .gv.at, .ac.at, und Wikipedia
• tag-cloud – tags werden eingelesen
Seite auf google registrieren:
auf google-homepage / über google / gelber Balken / Senden Sie Ihren Content an
google / Hinzufügen Ihrer Webseite zum Index von google
Suchbegriffe mit Beistrich getrennt
Provider muß mir Zugriffsanalyse zukommen lassen
Browser-Reset:
/* Universalselektor: Für ALLE Elemente gilt */
* {margin: 0px; padding: 0px; border: 0px;}
font-size in html ganz oben
62,5% für alle Browser (= ca. 10px Ausgabegröße)
wenn durch den Fixbefehl 62,5 % die Schrift auf 10px gestellt ist, muß man in body
(css) definieren „em“ z.B.: 1,3 em = die Schrift 13px groß
wrapper basteln in .tif
KONZEPTION – 5 SÄULEN
00. BASICS
01. INHALT
02. DESIGN
03. TECHNIK
04. BEKANNTMACHUNG
05. ENTWICKLUNGSSCHRITTE
00. B A S I C S
• DIE IDEE
Formuliere die Idee in einem Satz
• MARKE / LOGO
Entwickle einen „griffigen“ Namen für Deine WebSite und ein Logo
• VORGABEN
Gibt es bereits eine CI (Corporate Identity), bevorzugte Farben, vorhandene Logos,
fixe Vorstellungen etc.

• MITBEWERBER
Finde 3 gute und 3 schlechte Sites mit verwandtem Thema.
Analysiere die Stärken & Schwächen dieser Auftritte
• FREUND & FEIND
Überlege, wer gegen Deine Site sein könnte und entwickle Strategien, wie Du
„Feinde“ zu Freunde/Partnern Deines Projektes machen könntest:
Könnte man aus potentiellen Konkurrenten vielleicht Kooperationen gewinnen?
Könnte man Interessenten zu Partnern machen?
Was könnte man Partnern / Konkurrenten anbieten?
• ZIELSETZUNG
Die Zielsetzungen einer Site können vielfältig sein, z.B.
• Reine Imagewerbung (z.B. Firmenvorstellung, Produkteinführung)
• Firmeninformation
• Unterhaltung
• Fach-News/Fach-Information/Spezial-Plattform
• eCommerce/Verkauf
• Beratung/Support
• Entlastung des Telefonsupports
• Unterstützung von Außendienstmitarbeitern
• Info & Service für Partner/Händler
• Jobbörse
• Etc.
• ZIELGRUPPE(N)
Versuche Deine Zielgruppe(n) so genau wie möglich zu definieren. Greife durchaus
zu Klischees und überspitzten Beschreibungen.
z.B. Frauen 25 bis 45, höhere Bildung, Alleinerzieherinnen; Heimwerker, männlich
40-60; Haustierbesitzer, weiblich 50 bis 70, Stadtbewohner, Naturliebhaber etc.
Beschreibe zu jeder Deiner Zielgruppen eine konkrete Person in wenigen Sätzen
wie in einem Schulaufsatz.
Beobachte an belebten Plätzen Menschen und versuche zu raten, wer Deine Site
gerne besuchen würde, wer damit überhaupt nichts anfangen könnte, wer davon
begeistert wäre, etc. So gewinnst Du sehr konkrete Bilder Deiner Zielgruppen, die
Du bei allen Konzeptüberlegungen im Auge behalten solltest.
Beantworte dabei mindestens Fragen nach:
* Alter
* Geschlecht
* Ausbildung/Bildung
* Einkommen
* Freizeit / Interessen
* evt. politische Orientierung etc.
• BUDGET/LAUFENDEN FINANZIERUNG
Auch hier stehen wieder viele Möglichkeiten offen:
• Auftraggeber bezahlt für Entwicklung
• Sponsoren beteiligen sich an den Kosten
• BenutzerInnen bezahlen Nutzungsbeiträge
• Arbeitsgemeinschaft teilt sich die Kosten
• Etc.
z.B. Werbung auf www.zanox.de  -  hier kann man sich aussuchen, für wen und wie
man werbung machen kann.
od. Partner bei amazon werden
• ZEITPLAN
In einzelne Produktions-/Entwicklungsschritte unterteilen, laufend adaptieren.
• Vorbereitung (Konzept, Layout, Inhalte zusammentragen)
• Produktion (Bilder, Illustrationen, Navigation, Prototypen von Seiten)
• Produktion/Programmierung
• Testphase
• Suchmaschinenoptimierung
Unique monthly visitors
Visits – 100 besucher und 400 besuche, d.h. im schnitt besucht jeder 4 sachen
Pageviews – wieviele seiten schaut der besucher sich an. Im schnitt 1,5 seiten;
durchschnittl. verweildauer = ca. 1,5 min
bounce rate: leute, die auf meine seite gehen, aber gleich wieder weg
Time on site – Besuchsdauer
Neue besucher,
seite fleißig aktualisieren, weil das suchmaschinen anlockt.
50% aller besucher sollen neu hinzukommen
Immer neue dinge zeigen, damit besucher wieder kommen („video der woche“,
„bilder/muster der woche“
• Marketing
• Entwicklungsschritte
01. C O N T E N T

• INHALTE
• Welche Inhalte/Themen erwarten die BesucherInnen
• Wie navigiert BesucherIn vermutlich durch die Themen
• Welche Inhalte/Themen sind für die Zielsetzung unerlässlich
Nicht notwendig mit fertiger seite ins internet zu gehen, sondern startpaket, das
anhand der zugriffsanalysen laufend weiterentwickelt wird.
• MENÜPUNKTE
Welche Menüpunkte/Anforderungen ergeben sich aus der vorigen Frage
• THEMENGRUPPEN/PRIORITÄTEN – Need to have or nice to have
Gruppiere die Menüpunkte/Themengruppen und setze Prioritäten
• Unerlässliche Themen
• Wichtige Themen
• Mögliche weitere Themen (evt. => spätere Entwicklungsschritte)
• ENTWURF NAVIGATIONSLOGIK
Skizziere ein „Storyboard“ und überlege, wie Hauptseiten, Leitseiten, Folgeseiten
vom Standpunkt der Navigation funktionieren könnten.
02. D E S I G N

• BILDSCHIRMGRÖSSE  (960+560 px)
• FIXE BREITE / FLEXIBLE BREITE
• DESIGN STIL / FARBWELT / FOTOSTIL  (ich darf für den kunden
fotografieren, aber sie ihm nicht verkaufen!)
• PHOTOSHOP: Startseite, Leitseiten, Folgeseiten
• DETAILENTWURF NAVIGATION
• FOTOS/ILLUSTRATIONEN/TYPOGRAPHIE
• SCHRIFTEN / FARBEN WÄHLEN
03. T E C H N I K  &  U M S E T Z U N G
• Statisch vs. Dynamisch (mySQL, PHP, Perl etc.)
• LAYOUTTECHNIK (HTML, XHTM, Tables, Frames etc.)
• Redaktionssystem / Content Management
• Programmierexperten?
• Domain & Hosting
• Provider
04. B E K A N N T M A C H U N G / M A R K E T I N G
• Suchmaschinenoptimierung & -registrierung
• Mailings & Newsletters
• Linkpartnerschaften
• PR Aussendungen an Redaktionen
• Sonstige Aktionen
• URL = Adressbestandteil und gehört auf jedes Werbemittel auf der auch der
Firmenname gedruckt ist (Visitkarten, Briefpapier, Verpackungen, Einladungen,
jegliche Aussendungen etc.)
• Mail-Aussendung
• Postkarten/Lesezeichen mit URL drucken
• Teilnahme an Awards
• Teilnahme an Foren
• Erstellung von Blogs
…to be continued…
05. E N T W I C K L U N G S S C H R I T T E
• Je nach Konzept werden Entwickungsschritte (etwa im 3-Monats-Rhythmus)
geplant.
Diese werden später nach Erkenntnissen der Zugriffsanalyse angepasst.
O P T I O N E N
EINBINDUNG von PARTNERPROGRAMMEN/AFFILIATES
• amazon
• google adsense
wie kriege ich css von fremder seite:
im head schauen, wo der browser das style-sheet hernimmt und  z.B.  http://
habertheuer.at//wp-content/themes/blanko_de/style.css   -  alles, was im header link
href=“XXXXXX“  steht kopieren und in webbrowser reinkopieren

]]> http://team.elizzza.net/2009/07/22/kursmitschrift-teil1/feed/ 0 Kursmitschrift der Navigationsleiste inkl.Screenshots! http://team.elizzza.net/2009/06/27/kursmitschrift-der-navigationsleiste-inkl-screenshots/ http://team.elizzza.net/2009/06/27/kursmitschrift-der-navigationsleiste-inkl-screenshots/#comments Sat, 27 Jun 2009 12:36:30 +0000 lissommiller http://team.elizzza.net/?p=2413 Photoshop Übung – LAYOUT 1

Wir erstellen eine Navigationsleite

mit 6 Farbfotos und darunter liegenden

färbigen Textfeldern. Die sogenannte

Menüleiste einer Website.

Wir öffnen eine neue Datei mit Strg.+ N mit 960px * 760px ! Über die Menüleiste wählen wir  Ansicht / Neue Hilfslinie und vergeben 3 horizontale Linien (50px /150px / 170px) und 5 vertikale Linien (160px / 320px / 480px / 640px / 800px).

Mit dem Auswahlrechteck-Werkzeug (links oben erstes Symbol in der Werkzeugleiste) wählen wir den linken Schnittpunkt bzw. das linke obere Eck im Rahmen an und ziehen diagonal bis zum rechten unteren Eck bzw. Schnittpkt. des Rahmens. Über die Menüleiste Fenster wählen wir die Option FARBFELDER aus und mit der Pipette wählen wir eine beliebige Farbe aus, die in der Werkzeugleiste als Vordergrundfarbe zu kontrollieren ist bzw. erscheinen sollte. Dann mit Alttaste + Returntaste (Apple und Windows ist hier ident) das Farbfeld füllen. Wenn wir nun mit dem Steuerkreuz (ohne Drücken der Maustaste) über das Farbfeld/Namensfeld gehen, wird das Steuerkreuz zum Pfeil mit kleinen Briefsymbol darunter. Sobald wir das sehen, drücken wir die linke Maustaste und ziehen das Feld in die nächste Spalte und suchen in den Farbfeldern mit der Pipette eine neue Farbe aus, um diesem Feld eine neue Farbe zu zuordnen. Dann wiederholen wir den Schritt mit Alttaste + Return womit wir das Farbfeld erneut füllen, usw. bis wir alle 6 Felder gefüllt haben und heben dann die Auswahl auf (einfach ins Leere klicken).

Dieser Arbeitsschritt wurde ausschliesslich auf der Ebene 1 durchgeführt. Der nächste Schritt ist, dass wir 6 Bilder über Datei öffnen, einfügen und dadurch 6 Ebenen erzeugen.  Wir wählen nun das Freistellungswerkzeug (3tes Symbol von oben links in der Werkzeugleiste). Da wir nun mit dem Freistellungswerkzeug arbeiten, steht uns nun oben die sogenannte Freistellungsoptionleiste zur Verfügung. Diese befindet sich unmittelbar unter der fixen Photoshopmenüleiste. In der Optionsleiste stellen wir nun die fixen Werte für die Bilderrahmen ein. (Notiz: Die Optionsleiste ändert sich mit dem jeweiligen gewählten Werkzeug bzw. passt sich dem jeweiligen Werkzeug an) 160px * 100px damit alle 6 Bilder genau dasselbe Format ergeben. Mit dem Freistellwerkzeug ziehen wir einen Auswahlrahmen über den gewünschten Bereich des Bildes und lassen die Maustaste los. Nun können wir mit Zuhilfenahme der Pfeiltasten die Position des Auswahlrahmens korrigieren.

Wenn man die Umschalttaste gedrückt hält, während man die Pfeiltasten betätigt, macht man größere Schritte. Sind wir mit der getroffenen Auswahl zufrieden, schliesst man den Prozess mit Eingabetaste ab. Nun wechseln wir unser Werkzeug und wählen das rechte, oberste Verschiebewerkzeug aus der Werkzeugleiste und ziehen die Bilder nacheinander in unsere Rahmen.  Durch diesen Prozess enstehen 6 neue Ebenen. Jedes Bild steht für sich auf einer eigenen Ebene und wird von uns nun mit dem Textwerkzeug beschriftet und mit eigenem Namen versehen.

Nun werden die 6 Ebenen (Fotos) plus der Ebene 1 zu einer Ebenengruppe zusammen gefasst, indem wir alle 7 Ebenen markieren (wir halten dazu die Umschalttaste gedrückt. Diese befindet sich oberhalb der STRG Taste bei Windows und ctrl Taste bei Apple und wählen eine Ebene nach der anderen an, um gleich danach in der Ebenenpalette rechts oben (kleiner Pfeil) den Menüpunkt (Neue Gruppe aus Ebenen) anzuwählen!

Durch diesen Vorgang, bzw. dieser Gruppierung entsteht ein neuer Ordner, dem wir sogleich den Namen buttons_ select verleihen.Nun wird die Ebenengruppe buttons_ select durch Anwählen des PALETTENMENUES ( Die Ebenenpalette in dem sich alle unsere Ebenen befinden hat rechts oben einen kleinen Pfeil, gleich oberhalb der Deckkrafteinstellung 100%, dieser Pfeil führt zum PALETTENMENUE) über den Menüpunkt (Gruppe duplizieren) ausgewählt. Dadurch öffnet sich ein Eingabefenster und wir haben nun die Möglichkeit, diese Kopie mit dem Namen buttons_grau zu versehen.

Wenn wir nun unsere Ebenenpalette betrachten, finden wir zwei Ordner auf zwei Ebenen und in jedem Ordner befinden sich 7 Ebenen, zusätzlich befinden sich noch 6 Ebenen in unserer Ebenenpalette die durch die Beschriftung der Farbtextfelder entstanden sind. Zuerst vergewissern wir uns, dass das Auge in der Ebene buttons_select auf inaktiv gestellt ist, um nicht versehentlich auf der falschen Ebene zu arbeiten. Das Auge simple anklicken und es verschwindet.

Dann markieren wir die Ebene namens buttons_grau und öffnen den Ordner mit den sieben darin befindlichen Ebenen. Wir gehen von links nach rechts vor. Auf meinem Screen befindet sich das Foto ganz links in der Ebenenpalette ganz unten, (nur die Ebene 1 befindet sich noch weiter unten, sie ist ja unsere Allererste Ebene gewesen), weil ich das erste Foto, in den Rahmen ganz links, also zu Beginn dieser Arbeitsausführung, gestellt habe. Wir markieren somit die unterste Ebene, wählen in der Photoshop Menüleiste Bild/Anpassen/Sättigung veringern und wiederholen diesen Schritt für jedes Bild und somit jede Ebene.

Am Ende sollten alle Bilder schwarz-weiss gestellt sein. Zwischendurch mal STRG Taste + S für Speichern drücken und weiter geht’s. Wir markieren nun die Ebene mit dem Ordner buttons_select und öffnen erneut das PALETTENMENUE durch Anklicken des kleinen Pfeils, rechts oben in der Palettenebene. Gruppe duplizieren und dieser Kopie den Namen buttons_monochrom zuweisen.

Nun sollten sich in unserer Ebenepalette drei Ordner (buttons_select, buttons_grau und buttons_monochrom) befinden zzgl.

der sechs Schriftebenen, siehe Screenshot unten: (Screenshot-Mac: gleichzeitiges Drücken von Umschalttaste+ctrl+Apfel + 4)

lay1

In der Grafik sehen wir die zweispaltige Werkzeugleiste, die Protokollpalette, die Farbpfelder und die Ebenenpalette.

Alle vier dieser Kästchen werden in der Photoshop Menüleiste / Fenster aufgerufen. z.B Menüleiste / Fenster / Farbfelder, usw.

Wir wiederholen nun den Vorgang, indem wir den buttons_monochrom Ordner öffnen und auf die unterste Ebene (nur eine Ebene liegt noch weiter unten die Ebene 1/Kopie 2) mit dem ersten Foto und wählen aus der Werkzeugpalette (das rechte vorletzte Symbol unten) die Pipette aus. Wir klicken zunächst in das Farbfeld ganz links und gehen dann in die Menüleiste / Bild / Anpassen / Farbton/Sättigung.  Die Grafik unten zeigt nochmals den Pfad an.

lay2

Nach Auswahl von Farbton/Sättigung öffnet sich dieses Parameterfenster:

lay3

Hier ist nun ganz wichtig das Kontrollkästchen Färben über der Vorschau rechts unten befindlich, anzuklicken. Ist es wie oben in der Grafik nicht angewählt, tut sich nicht viel. Erst wenn das Hakerl auftaucht, erzielen wir den gewünschten Effekt.

Mit dem Sättigungsparameter in der Mitte erreichen wir unseren gewünschten Effekt die Fotos den Farbfeldern unterhalb anzupassen, damit die Leiste dementsprechend aussieht.

lay4

Wir markieren die Ebene buttons_select, aktivieren das Auge, öffnen den Ordner mit den darin befindlichen sieben Ebenen , klicken erneut die unterste Fotoebene an und drücken STRG+A = Alles Auswählen, STRG+C=Ebene  Kopieren, STRG+N=Neue Datei und drücken OK, oder drücken anstatt OK, die Eingabetaste und zuletzt STRG+V=Einfügen. Wir gehen in die Menüleiste / Datei / Web und Geräte speichern, bzw. bei älteren Photoshop Versionen wie CS od. CS 2 ist es nur für WEB speichern, siehe Screenshot unten:

lay6

Das Webparameterfenster öffnet sich und wir stellen das Bild auf .jpg / hoch /  60 Qualität / mit Häkchen bei optimiert und drücken speichern. Als Dateiname wählen wir nun exakt denselben Namen der Ebene, aus der wir das Bild kopierten. Zielordner ist IMAGES / Ordner buttons_select!

lay7

Wir wiederholen diesen Vorgang mit den beiden andere Ordnern und sämtlichen darin befindlichen Bildern IMAGES / Ordner buttons_grau und IMAGES / Ordner buttons_monochrom. Wir vergewissern uns nochmals, ob wir die Arbeit in der Photoshopdatei Layout 1 vollständig abgespeichert haben und schliessen die Datei.

25.Juni 2009 homework by roland miller-aicholz aka lissom miller

]]> http://team.elizzza.net/2009/06/27/kursmitschrift-der-navigationsleiste-inkl-screenshots/feed/ 7 Typo – netter Versuch… http://team.elizzza.net/2009/06/12/typo-ist-euch-was-aufgefallen/ http://team.elizzza.net/2009/06/12/typo-ist-euch-was-aufgefallen/#comments Fri, 12 Jun 2009 02:42:06 +0000 eliZZZa http://team.elizzza.net/?p=1991 Nachdem Typo-Lösungen mit Flash ja nicht sooo eine gute Idee sind, habe ich mir zwei Lösungen angesehen, die auf JavaScript bzw. jQuery basieren. typeface.js kommt dem Ziel schon recht nahe, hat aber immer noch Einschränkungen, die verhindern, dass man es wirklich einsetzt.

Erstens verzögert sich die Ladezeit einer Seite erheblich, wenn einige der Überschriften “übersetzt” werden und zwotens – und wohl der stärkste Hinderungsgrund – werden die Headlines in IE7 überhaupt nicht angezeigt (also auch nicht als Text in Standardschrift). Mehr habe ich gar nicht getestet, denn damit ist die Lösung ohnehin kein mehr.

Tja Leute, netter Versuch…

]]> http://team.elizzza.net/2009/06/12/typo-ist-euch-was-aufgefallen/feed/ 0 light cage http://team.elizzza.net/2009/06/07/light-cage/ http://team.elizzza.net/2009/06/07/light-cage/#comments Sun, 07 Jun 2009 20:41:31 +0000 sabine http://team.elizzza.net/?p=1578 Faszinierendes 3D-Tool, um ein Portrait mit unterschiedlichsten Lichtquellen zu betrachten…

]]> http://team.elizzza.net/2009/06/07/light-cage/feed/ 0