team.eliZZZa * webdesign * screendesign * xhtml * css * jQuery * ajax * fragen & antworten * tutorials * community

Google Font Vorschau

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.

Flash Actionscript Navigation

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

Typografie

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

Endlich Typografie!!! Google Fonts API

Ich habe nicht geglaubt, dass ich DAS noch erleben darf: Google hat vor wenigen Tagen seine Schriftenlösung vorgestellt.

Und so funktionierts: » Weiterlesen »

Gratis Webspace – Blogspot

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

soundstream

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

Kursmitschrift Webdesign 2009 Basiskurs

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

Kursmitschrift der Navigationsleiste inkl.Screenshots!

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)

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.

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

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.

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:

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!

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

Typo – netter Versuch…

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…

light cage

Faszinierendes 3D-Tool, um ein Portrait mit unterschiedlichsten Lichtquellen zu betrachten…

smashing magazine

DIE Autorität in Sachen Webdesign & Webproduktion. Wenn Du dich über die aktuellsten Trends informieren möchtest, dann bist Du hier richtig!

Site fertig – und was kommt jetzt?

Ist eine Site einmal fertiggestellt, beginnt der Spaß erst – wie mache ich mein Meisterwerk bekannt?
Nachfolgend eine Stichwortliste mit Links, die Dir helfen soll, möglichst viele Besucher für Deine Website zu erreichen:

Seite validieren & Fehler finden

http://validator.w3.org/ (HTML)
http://jigsaw.w3.org/css-validator/ (CSS)
http://validator.w3.org/checklink/ (Links)
http://browsershots.org/ (Browserkompatibilität)

Seite evaluieren

http://seitwert.de/
http://www.xinureturns.com/

Suchmaschinen

Google Analytics Account anlegen
http://google.com/analytics/

Zusätzliche Keyword-Ideen sammeln
https://adwords.google.com/select/KeywordToolExternal

URL bei Google registrieren
http://www.google.com/addurl/?continue=/addurl

Feedburner RSS anmelden
http://feedburner.google.com/fb/a/myfeeds

Google Calendar – Events ankündigen
http://www.google.com/calendar/render

Google Subscribed Links
(Tutorial folgt noch)

Blogsuchmaschinen & -verzeichnisse

http://technorati.com/
http://www.blog-sucher.de/
http://www.twingly.com/
http://www.bloggeramt.de/
http://www.blogverzeichnis.com/

Special WordPress Plugin
http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Verzeichnisse

Im Yahoo Webkatalog registrieren
http://de.dir.yahoo.com/

Im DMoz Webkatalog registrieren (füttert Google)
http://www.dmoz.org/World/Deutsch/

Web-Adressbuch

http://web-adressbuch.de/

Linklisten

Craig’s List (Österreich aber auch weltweit)
http://vienna.de.craigslist.at/

Linklisten.org
http://www.linklisten.org/

In Foren schreiben

Verwende Deine Webadresse als Signatur!

http://www.forenvz.de/forenverzeichnis
oder Google-Suche “forum+thema”

Social Networks

Kurze Nachrichten auf MySpace
http://myspace.com/

Kurze Nachrichten auf FaceBook
http://facebook.com/

Mikroblogging auf Twitter
http://twitter.com/

Kontain
http://kontain.com/
http://youtube.com/

Social Bookmarking

http://www.mister-wong.de/
http://delicious.com/
http://diigo.com/

Special WordPress Plugin – Add to Any
http://wordpress.org/extend/plugins/add-to-any/

eCards auf WebSite

Attraktive eCards können Besucher anziehen. Gleichzeitig wird beim Versand der eigene Link mitgeschickt.

Plugin für WordPress
http://wordpress.org/extend/plugins/wp-ecards/

Special WordPress Plugins

Helfen bei der Verbreitung Deiner Webseiten…

WP Email
http://wordpress.org/extend/plugins/wp-email/

Add-to-Any
http://wordpress.org/extend/plugins/add-to-any/

FunShirt Shop

Eigenen Shop anlegen, individuelle Shirts designen, sowohl auf der Shirt-Plattform als auch auf der eigenen Website verkaufen:

http://spreadshirt.net/

Beispiel - weiber.net ShirtShop

Gegenlinks

Auf der eigenen Site einen gepflegten, einladenden und übersichtlichenLinkbereich anlegen. Betreiber von verwandten WebSites verlinken und ein Einladungsmail zu einem Gegenlink schicken.

Nicht vergessen!

Gerne verlinke ich Eure Websites auf meinen diversen Projekten >;o)

Verschiedenes

Webadresse ist Adressbestandteil! Gehört also auf Geschäftsausstattung (Visitkarten, Briefpapier, Gebäudebeschriftungen, Produktpackungen, Autos etc.

Im Beautysalon – PS Tutorial

Hallo Freunde, momentan stecke ich ja leider bei meiner WP-Theme-Installation fest und darum habe ich ein wenig herumgesurft und folgendes Tutorial gefunden:

Photoshop Skin Retusche war ja im Kurs ein heißes Thema:

http://www.tutiki.org/w/index.php/Beautiful_Skin_by_Czechman

Es wird darauf hingewiesen, dass viele Tricks von Scott Kelby “ The Photoshop Book for Digital Photographers” sind. Ich kann dieses Buch – gibt es auch auf deutsch von Addison Wessley Verlag – wärmstens empfehlen. Es ist total kurzatmig, leicht nachzuvollziehen und macht fast süchtig, weiter zu probieren.

Beim Weichzeichnen wirklich lieber weniger als zu viel!!!

Wichtig: immer unterscheiden, ob eine Retusche für dich und mich gemacht wird – diese soll natürlich wirken, so sehen mich die Leute; oder ob es sich um totale Beautyretusche handelt, wie ein Model am Cover – da ist es eigentlich egal, wie sie in Wirklichkeit aussieht, da kommt es nur darauf an, dass das Bild toll ist.

Viel Spaß im digitalen Beautysalon!

Formular – Dateiupload – wer kann mir da helfen?

Hallo Leute,

ich hoffe es hat jemand von Euch die Lösung parat: ich habe ein ziemlich umfangreiches Formular erstellt, das auch 2 Felder f. Dateiupload enthält.  Man soll das Formular auch ausdrucken können – nur über den browser. Und da liegt mein Problem. Ich sehe zwar bei der Druckvorschau, dass ich Dateien hochgeladen habe – es wird zumindest ein Teil des Pfades angezeigt, aber der Pfad wird dann nicht ausgedruckt? Ist aber blöd, weil mit dem Ausdruck in Händen weiß man dann nie, gab’s jetzt Anhänge oder nicht?

Wie mach ich das, bzw. kann ich das input-Feld für den Dateiupload auch einfach über CSS formatieren, weigert sich bisher strikt breiter zu werden.

Danke für alle Hinweise!

LG

Daniela

Quellen für Menü Designs

Menübutton Designs (Artikel hier) in der Sliding Door Technik im CSS, ganz gut erklärt.

So sehen sie aus: http://exploding-boy.com/images/cssmenus/menus.html#

Eine weitere kleine Menügalerie: hier

Struktur – seufz!

Es ist doch immer wieder die gleiche Frage mit der Struktur – und immer wieder plag ich mich damit: Wollen wir ein Linkverzeichnis mit allen unseren Themen drin, ODER wollen wir in jedem unserer Themen einen Menüpunkt “Links zum Thema”. Hmmm… Im Fall eines CMS spielen da natürlich auch ein paar technische Überlegungen mit. Allerdings könnte man – mit CMS – natürlich auch beides erfüllen, da man Einträge ja mehreren Kategorien zuordnen kann. Ich werd noch ein wenig grübeln…

Der perfekte HTML-Editor?

Es klingt zwar unglaublich, aber ich kenne noch keinen HTML-Editor, der mich glücklich macht. Grad dreh ich wieder eine Testrunde unter diversen Anbietern. DW ärgert mich zunehmend – spinnt derzeit so, dass die Auswahl von Text meist nicht funktioniert (die ganze Seite wird ausgewählt und evt. gelöscht) und das nervt enorm… Ich werde berichten…

The Joshua Tree Principle

Vor Jahren hat mir mein lieber Mann ein Buch aus England mitgebracht:
“The Non-Designer’s Design Book” von  Robin Williams         (not the actor and not the singer!!!)

Für mich als Non-Designer das beste Buch aller Zeiten und ich lese es immer wieder gerne.
Am meisten hat mir die Einleitung gefallen, die mich seit damals immer begleitet:

The Joshua Tree Principle

“… But first I want to tell you a little story that made me realize the importance of being able to name
things, since naming these principles is the key to power over them.

Many years ago I received a tree identification book for Christmas. I was at my parents’ home, and
after all the gifts had been opened I decided to go out and identify the trees in the neighborhood. Before I went out, I read through part of the book. The first tree in the book was the Joshua tree because it took only two clues to identify it. Now the Joshua tree is a really weird-looking tree and I looked at that picture and said to myself, “Oh, we don’t have that kind of tree in Northern California. That is a weirdlooking tree. I would know if I saw that tree, and I’ve never seen one before.” So I took my book and went outside.
My parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. I had lived in that house for thirteen years, and I had never seen a Joshua tree. I took a walk around the block, and there must have been a sale at the nursery when everyone was landscaping their new homes–at least 80 percent of the homes had Joshua trees in the front yards. And I had never seen one before! Once I was conscious of the tree, once I could name it, I saw it everywhere. Which is exactly my point.
Once you can name something, you’re conscious of it. You have power over it.
You own it. You’re in control.
So now you’re going to learn the names of several design principles. And you are going to be in control of your pages.”

(R. Williams page 13)

Navigation – Alternativtext

Eher als Anregung denn als Kritik gedacht: Bei der Navigation von team.elizzza ist oben die Navigation, und bei manchen ist per drop-down eine Subnavigation. Bei der steht auch immer ein Alternativtext. Dies ist zwar sicher löblich, aber man kann dadurch nicht den Button der eine Stufe darunter liegt nicht lesen und muss mit der Maus unnötig herum, um zu sehen, was da steht.

Weiters ist es für mich unangenehm, wenn es Punkte mit und welche ohne Drop-down gibt man das bei der Navigation aber nicht erkennt.

Sollte im Sinne einer zukünftigen Benutzerfreundlichkeit berücksichtigt werden. Vor allem auch als Reminder für unsere Sites bzw. der Sites unserer vielen, vielen zukünfigen Kunden!!??! … Der Mensch braucht Ziele, Visionen und Träume!

WebHosting – Paket für WordPressSites

Dies ist eigentlich kein Beitrag, sondern eher eine Frage zu einem Beitrag:

Ich gehe davon aus, dass wenn einmal die WordPress-Falle zugeschnappt hat, dann hat man nicht nur eine WordPress-Site: z.B. eine private, eine berufliche und eine zum Üben oder so ähnlich. Ich gehe weiters davon aus, dass wir diese bei wordpress.org mit eigener domain anlegen, weil wir ja das Design verändern wollen. Damit stellt sich die Frage, welches WebHosting-Paket wir dafür brauchen.

» Weiterlesen »