Logo erstel­len

Vie­le Men­schen hel­fen sich selbst, wenn Sie mer­ken das jetzt ein Logo not­wen­dig ist. Doch sie scha­den sich, wenn sie der ers­ten Ein­ge­bung nach­ge­ben. Das Ergeb­nis ist desas­trös und im Nach­hin­ein nur unter gro­ßen Mühen zu kor­ri­gie­ren, wenn schon 10.000 Visi­ten­kar­ten bestellt sind oder teu­re Fly­er gedruckt wur­den.

Hier ein wenig Hil­fe, bevor die Lawi­ne rollt.

Inhalts­ver­zeich­nis

Logo erstel­len wei­ter­le­sen

Ink­scape — Farb­rad [Color­wheel]

Die­se Tuto­ri­al ist eine Grund­la­ge für ver­rück­te Design-Ide­en.
Zum Bei­spiel als Pfad erstellt für einen Regen­bo­gen oder Farb­rand mit Weich­zeich­ner und vie­les mehr.

Ergeb­nis des Tuto­ri­als
Colorwheel-small
Die Ein­stel­lun­gen sind in Bear­bei­ten -> Klo­nen -> Geka­chel­te Klo­ne erzeu­gen.



Wer­te
P1: Ein­fa­che Ver­schie­bung
Rei­hen: 1
Spal­ten: 255
Rota­ti­on = Seg­ment­grö­ße: 1,4117°
Far­be pro Spal­te H-Wert: 0,3921%


Colorwheel-12-rows

Wer­te
P1: Ein­fa­che Ver­schie­bung
Rei­hen: 1
Spal­ten: 12
Rota­ti­on: 30°
Far­be pro Spal­te H-Wert: 8,3%


Berech­nun­gen

360 Grad geteilt durch 255 Seg­men­te gleich 1,411764706 Grad je Seg­ment.
360° / 255 = 1,411764706°

100 % Far­ben geteilt durch 255 Seg­men­te gleich 0,392156863 Farb­an­teil je Seg­ment.
100 % / 255 = 0,392156863% H

Start­far­be
HSL, H = 0, S = 255, L = 128, A = 255


Objekt

Mit gedrück­ter Strg-Tas­te einen Kreis zie­hen.
Objekt-Fül­lung unde­fi­niert las­sen, das ist das Fra­ge­zei­chen­sym­bol und kei­ne Kon­tur.


Video


Bil­der

zfr07

zfr08

zfr09

zfr10

zfr11

zfr12

zfr13

CSS-Zeich­nen Drei­ecke


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #c00; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 4em solid yellowgreen; border-bottom: 4em solid transparent; border-right: 4em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: url(rose.jpg) #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid royalblue; border-left: 2em solid transparent; border-right: 2em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid mediumvioletred; border-left: 22em solid transparent; border-right: 2em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: auto; height: 2em; border-top: 2em solid transparent; border-bottom: 2em solid transparend; border-right: 2em solid black;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid goldenrod; border-bottom: 2em solid royalblue;border-left: 2em solid yellowgreen; border-right: 2em solid mediumvioletred;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-width: 1em; height: 2em; border-color:goldenrod royalblue yellowgreen mediumvioletred; border-style:solid;">
</div>
</div>

box-shadow

Es gibt noch viel fan­tas­ti­sche­re Mög­lich­kei­ten für box-shadow, hier eini­ge Anre­gun­gen.

Wei­cher Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>

• 1.1em = hori­zon­ta­le Ver­schie­bung
• 1.2em = ver­ti­ka­le Ver­schie­bung
• 1.3em = Unschär­fe-Radi­us [Blur]
• royal­blue = Schat­ten­far­be


Har­ter Schat­t­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>


4 Far­ben-Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>


Inne­rer wei­cher Schat­ten auf 2 Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>


Inne­rer har­ter Schat­ten auf 2 Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>


Inne­rer wei­cher Schat­ten auf allen Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>


Äuße­rer wei­cher Schat­ten auf allen Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>


Äuße­rer wei­cher Schat­ten auf 1 Sei­te


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>


Trans­pa­ren­ter Schat­ten


<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>


Schat­ti­ger Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>

text-shadow

Bei­spiel­text mit text-shadow


<div style="text-shadow: .1em .2em .3em #666; font-size: 2em; color: mediumvioletred;">Beispieltext mit <em>text-shadow</em>
</div>

• 0.1em = hori­zon­ta­le Ver­schie­bung
• 0.2em = ver­ti­ka­le Ver­schie­bung
• 0.3em = Blur [Unschär­fe-Radi­us]
• #666 = Schat­ten­far­be
• medi­um­vio­let­red = Schrift­far­be


Bei­spiel­text mit 2x Text­schat­ten


<div style="text-shadow: 0 0 .5em red,.1em .1em .1em gold; color: white; font-size: 2em;">Beispieltext mit 2x Textschatten
</div>


Bei­spiel­text im Vor­der­grund


<div style="text-shadow: .1em .1em .1em black; color: white; font-size: 2em;">Beispieltext im Vordergrund
</div>


Bei­spiel­text mit Kon­tur


<div style="text-shadow: 0 -1px black,1px 0 black,0 1px black,-1px 0 black; color: white; font-size: 2em;">Beispieltext mit Kontur
</div>


Bei­spiel­text im Inset


<div style="text-shadow: 0 -1px 1px black,0 1px 1px white; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Inset
</div>


Bei­spiel­text im Out­set


<div style="text-shadow: 0 -1px 1px white,0 1px 1px black; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Outset
</div>


Wei­te­re Infor­ma­tio­nen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

bor­der-radi­us


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 2em 4em 6em;"></div>

bor­der-top-left-radi­us: 0;
bor­der-top-right-radi­us: 2em;
bor­der-bot­tom-right-radi­us: 4em;
bor­der-bot­tom-left-radi­us: 6em;


Bor­der-Radi­us mit 1 Wert alle Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em;"></div>


Bor­der-Radi­us mit 1 Ecke


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 4em 0;"></div>


Bor­der-Radi­us mit 2 Ecken unten


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 6em 6em;"></div>


Bor­der-Radi­us mit 2 dia­go­na­le Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em 0;"></div>


Bor­der-Radi­us mit 2 unter­schied­li­che Wer­ten in 2 Ecken


<div style="width: 24em; height: 4em; background: silver; border-bottom-left-radius: 6em 1em; border-bottom-right-radius: 2em 1em;"></div>


Bor­der-Radi­us als Kreis


<div style="border-radius: 10em; height: 10em; width: 10em; background: silver;"></div>