Logo er­stel­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 Er­geb­nis ist de­sas­trös und im Nach­hin­ein nur un­ter gro­ßen Mü­hen zu kor­ri­gie­ren, wenn schon 10.000 Vi­si­ten­kar­ten be­stellt sind oder teu­re Fly­er ge­druckt wur­den.

Hier ein we­nig Hil­fe, be­vor die La­wi­ne rollt.

In­halts­ver­zeich­nis

Logo er­stel­len wei­ter­le­sen

Ink­scape — Farb­rad [Co­lor­wheel]

Die­se Tu­to­ri­al ist eine Grund­la­ge für ver­rück­te De­sign-Ide­en.
Zum Bei­spiel als Pfad er­stellt für ei­nen Re­gen­bo­gen oder Farb­rand mit Weich­zeich­ner und vie­les mehr.

Er­geb­nis des Tu­to­ri­als
Colorwheel-small
Die Ein­stel­lun­gen sind in Be­ar­bei­ten -> Klo­nen -> Ge­ka­chel­te Klo­ne er­zeu­gen.



Wer­te
P1: Ein­fa­che Ver­schie­bung
Rei­hen: 1
Spal­ten: 255
Ro­ta­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
Ro­ta­ti­on: 30°
Far­be pro Spal­te H-Wert: 8,3%


Be­rech­nun­gen

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

100 % Far­ben ge­teilt 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


Ob­jekt

Mit ge­drück­ter Strg-Tas­te ei­nen Kreis zie­hen.
Ob­jekt-Fül­lung un­de­fi­niert las­sen, das ist das Fra­ge­zei­chen­sym­bol und kei­ne Kon­tur.


Vi­deo


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 ei­ni­ge An­re­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 = ho­ri­zon­ta­le Ver­schie­bung
• 1.2em = ver­ti­ka­le Ver­schie­bung
• 1.3em = Un­schär­fe-Ra­di­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>


In­ne­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>


In­ne­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>


In­ne­rer wei­cher Schat­ten auf al­len 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 al­len 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 = ho­ri­zon­ta­le Ver­schie­bung
• 0.2em = ver­ti­ka­le Ver­schie­bung
• 0.3em = Blur [Un­schär­fe-Ra­di­us]
• #666 = Schat­ten­far­be
• me­di­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 In­set


<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 In­for­ma­tio­nen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

bor­der-ra­di­us


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

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


Bor­der-Ra­di­us mit 1 Wert alle Ecken


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


Bor­der-Ra­di­us mit 1 Ecke


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


Bor­der-Ra­di­us mit 2 Ecken un­ten


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


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


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


Bor­der-Ra­di­us mit 2 un­ter­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-Ra­di­us als Kreis


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