For each color had to pick the color inside of Affinity Designer, copy the hex code, open the color dialog on Piskel, paste the code and press enter. If you want to transfer a lot of colors, this can get a little bit annoying.

The good thing: Piskel is an Open Source web project. That means with a little effort I could solve this problem for me. Because I know, there is a native color control which has a picker which works across the whole screen (atleast in Chromium browsers): <input type="color">

Great. Now I needed to bring this to the Piskel application and make it overwrite the current color. I tried to find some kind of a state in the JavaScript code I could use. Because Piskel’s source code is on GitHub, I could just clone the project to my machine and search through the code. Because I know from the User Interface that the main color is called “primary color” I was searching for “primary”. And voila, I found an event called "SELECT_PRIMARY_COLOR". Sounds like exactly what I need. Now I needed to know how to trigger this event. So I was searching for where "SELECT_PRIMARY_COLOR" is used in the code and this is what I found:

$.publish(Events.SELECT_PRIMARY_COLOR, [color])

Nice, looks like I could just use something like $.publish("SELECT_PRIMARY_COLOR", "#ff00ff"). I tested it in the browser console and it worked! I now also used the console to put the color input element to the HTML document and passed an event listener when the input is changed:

const colorInput = 
  document.createElement("input")

colorInput.id = "lgkColorInput"
colorInput.className = "tool-icon"
colorInput.title = "Native color picker"
colorInput.type = "color"

// The tools container of Piskel's UI
document.getElementById("tools-container")
  .append(colorInput)

document.getElementById("lgkColorInput")
  .addEventListener(
    "input", 
    ({currentTarget}) => {
      $.publish("SELECT_PRIMARY_COLOR", 
      currentTarget.value)
    }
  )

It looks great, like it was always part of the UI. I found the "tool-icon" class name, because all other tool buttons use it too.

Awesome, but everything I run on the browser console is just temporary, so I needed a way to always execute it when I’m on Piskel. The good thing; there is a browser extension for this: Custom JavaScript for Websites 2
I installed it, pasted my code in and it works!

So if you would like to my new tool aswell, just install the extension and paste in my code and it should work. ^^

You could do it like this:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            

                {"LGK" == "awesome" ?
                    
LGK is awesome!
                : 
                    
LGK is not awesome :C
                }
            
        );
    }
}

This works without any problem. But you always have to set the else part. But in many situations you only need the “if part”.
In this case, this way is much nicer:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            

                {"LGK" == "awesome" &&
                    
LGK is awesome!
                }
            
        );
    }
}

A benefit of objects is that you can directly call its children elements (properties) by name. While arrays only have index numbers.

Here is a simple example:

const exampleDataArray = [
	{
		id: 8462943,
		name: "Google",
		url: "http://google.com/"
	},
	{
		id: 9847323,
		name: "Amazon",
		url: "http://amazon.com/"
	},
	{
		id: 938442934,
		name: "Twitter",
		url: "http://twitter.com/"
	}
];

function getDataById(id) {
	for (let i = 0; i < exampleDataArray.length; i++) {
		if (exampleDataArray[i].id === id) {
			return exampleDataArray[i];
		}
	}
}

So in this example when I want to get an item by its ID or any other property I have to go through each other item first. Depending on how many items you have and how often you need to get one item, it can take lot of time.

If you use an object instead of an array it could look like this:

const exampleDataObject = {
	8462943: {
		name: "Google",
		url: "http://google.com/"
	},
	9847323: {
		name: "Amazon",
		url: "http://amazon.com/"
	},
	938442934: {
		name: "Twitter",
		url: "http://twitter.com/"
	}
};

function getDataById(id) {
	return exampleDataObject[id];
}

This way we can directly point to the item we want and don't have to use a loop.

Emoticons sind aus sozialen Netzwerken längst nicht mehr wegzudenken. Sie werden vor allem dafür genutzt, Gefühle auszudrücken, etwas was durch Wörter häufig schwer auszudrücken ist. Oder sie untermahlen Geschriebenes, u.a. auch um Missverständnisse des Textes zu umgehen.

Aber nicht nur beim Austauschen von Nachrichten sind Icons hilfreich. Für die User Experience sind Symbole ein wichtiger Bestandteil. Ein ☰ öffnet ein Menü, ein 🔎 führt eine Suche aus und mit einem ♥ favorisiere ich etwas.

Oh, hast du gesehen, wie ich Icons sogar hier im Artikel verwendet habe? Und das ging ganz einfach. Und damit kommen wir zum eigentlichen Thema dieses Artikels. 〠

Ich benutzte dafür keine Icon-Library wie FontAwesome. Für das 〠 zum Beispiel habe ich nur folgendes als HTML geschrieben: 〠
Damit habe ich einfach nur den Unicode für dieses Symbol benutzt. Denn eine Menge Icons haben — genauso wie Buchstaben und Ziffern — einen eigenen Unicode.
Vorraussetzung dafür, dass das Symbol auch angezeigt wird, ist dass die verwendete Schriftart dieses auch enthält.

Finde Icons mit Graphemica

Graphemica sucht Icons im Unicode basierend auf Stichwörter.

http://graphemica.com/

In der Suchleiste gibst du einfach ein was du brauchst. Auf der Detail-Seite zu einem Icon findest du dann die nötigen HTML-Codes zum Einbinden auf deine Seite.

Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein.

Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell):

npm install uglify-js -g

Navigiere anschließend mit cd zu deinem Projekt-Ordner.

In meinem Beispiel sieht mein Projekt-Ordner so aus:

Führe nun diesen Befehl aus:

uglifyjs js/jquery.js js/main.js js/search.js -o js/script.min.js

Zuerst kommt der Befehl uglifyjs, anschließend die zu kombinierenden Dateien (durch Leerzeichen getrennt). Das -o steht für “Output” und kennzeichnet die Ausgabe-Datei. In diesem Fall js/script.min.js.

Wichtig bei der Eingabe ist auch die Reihenfolge der Dateien.

Anschließend müsste unser Ordner so aussehen:

Und aus:

wird:

Erweiterungen für Entwicklungsumgebungen?

Für Brackets habe ich ein passendes Plugin gefunden: JSCompiler2

Durch eine Konfigurations-Datei können somit auch die Ein- und Ausgabe-Dateien gespeichert werden, sodass für eine Neu-Kompilierung nur noch ein Knopfdruck nötig ist. Ziemlich praktisch also.

Für NetBeans scheint es nichts dergleichen zu geben. Für PHPStorm lässt sich UglifyJS anscheind einrichten: https://www.jetbrains.com/phpstorm/help/minifying-javascript.html

Ich habe auch einen Artikel über das Kombinieren von CSS-Dateien geschrieben: Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

	
		
		
		
		
		
	

	
		...
	

Die feine Art ist das nicht. Der Browser muss so bei jedem Seitenaufruf jede einzelne Datei abklappern. Je nach Internet-Leistung des Besuchers kann das eine Weile dauern.
Und jede Millisekunde, die der Nutzer warten muss, ist eine Gefahr, dass dieser die Seite wieder verlassen will.

In diesem Artikel möchte ich ein paar Tipps geben, wie ihr CSS-Dateien kombinieren könnt, sodass der Browser nur noch jeweils eine Datei abfragen muss.

Los geht’s: CSS-Dateien mit LESS verbinden

LESS ist ein CSS Pre-Prozessor. LESS-Dateien beinhalten erweiterten CSS-Code, welcher anschließend durch einen Compiler zu einer normalen CSS-Datei kompiliert wird.

LESS-Dateien können mehrere LESS-Dateien importieren. Die kompilierte CSS-Datei sieht dann so aus, als hätte ich einfach die einzelnen Codes hintereinander eingefügt.

Beispiel

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}

#nav li#home {
	font-weight: bold;
	background-color: orange;
}

@import url("main.less");
@import url("home.less");

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}
#nav li#home {
	font-weight: bold;
	background-color: orange;
}

body{font-family:Arial,sans-serif;font-size:14px;color:#000}#nav li#home{font-weight:700;background-color:orange}

Bei vielen CSS-Dateien macht das auf jeden Fall Sinn. Für viele Entwicklungsumgebungen und Code-Editor gibt es passende Plugins, welche aus LESS-Dateien automatisch CSS-Dateien generieren. Unter anderem für Brackets, Visual Studio oder auch NetBeans.

In dem Beispiel habe ich die style.css außerdem noch minimiert (zu: style.min.css). So schrumpft auch nochmal die Größe der End-Datei. Auch hierfür gibt es entsprechende Plugins. Mit CSS Minifier geht das auch online.

Vorher / nachher

Wenn wir das auch noch mit unseren CSS-Frameworks machen wird aus:

schnell das hier:

Was beachtet sei: Drch die Kombinierung ändern sich auch die Verweise. Bei Bootstrap bespielsweise müssen dann die Verweise zu den Font-Dateien geändert werden.
Öffne dafür die bootstrap.less und ersetze alle ../fonts/ durch ../lib/bootstrap/fonts/.

JavaScript-Dateien kombinieren

Gut, die Stylesheets haben wir somit auf eine Datei reduziert. Doch auch bei den JavaScript-Dateien auf einer Seite kann sich einiges ansammeln.

In einem seperaten Artikel möchte ich darauf eingehen, JavaScript-Dateien zu kombinieren.
Der Link wird dann hier angefügt.

Diese Methode erspart euch einige Copy-Paste-Vorgänge von Farb-Codes.
Mit dem Pipetten-Werkzeug von Photoshop könnt ihr auch ganz einfach Farben von anderen Fenstern auswählen.

Video direkt auf YouTube ansehen.

Damit eignet es sich vor allem für ältere oder langsamere Smartphones.

Wie richte ich Start Touch als Startseite ein?

Zumindest bei den Standard-Browsern von Android kann man noch eine Startseite einrichten.

Am schnellsten geht es, wenn du die Seite über diesen QR-Code öffnest:

Aber auch Google und nun auch Apple ziehen nun mit.

Ein Bestandteil von Flat Design sind “Long Shadows”. Vor allem bei App-Icons findet man diese.

Seht einfach selbst:

Weitere Beispiele findet ihr in diesem Artikel auf designmodo.com.

Tutorial

Aber dies soll ein Tutorial sein, darüber wie man “Long Shadow”-Icons mit Photoshop verwirklichen kann.

Für den Schatten verwende ich eine selbstgemachte Vorlage, womit es einfacher ist den Schatten zu erstellen.

Die Vorlage hier als PSD: 45-Grad-Form.psd

Wie bei dem Beispiel mit dem Google Fonts-Icon, erstellen wir einen 45°-Schatten, welcher nach unten rechts scheint.

Für den Icon-Hintergrund erstellen wir ein abgerundetes Quadrat in der Farbe #00a89b.

Für das Tutorial wollen wir ein “Home”-Icon machen.
Also fügen wir ein Haus-Symbol ein. Das Icon stammt von iconmonstr.com. Dort findet ihr noch viele weitere Icons, die ihr verwenden könnt.

Da das Symbol aus zwei Körpern (Haus und Schornstein) besteht, erstellen wir zwei voneinander getrennte Schatten.

Zuerst ist das Haus dran. Wir fügen die beiden Ebenen aus der Schatten-Vorlage ein und bewegen diese zu der jeweils äußersten Kante des Hauses.

In einer neuen Ebene unter dem Haus-Symbol färben wir den unteren Bereich mit dem Pinsel-Werkzeug (B) schwarz. Das Schwarz muss dabei über der Vorlage liegen.

Das Schwarze soll unser Schatten werden. Der Teil des Schattens, das nun über die Vorlage steht soll nun abgeschnitten werden.

Dafür müssen wir die beiden Vorlagen-Ebenen in eine Auswahl umwandeln. Am einfachsten geht das, wenn man STRG gedrückt hält und auf die entsprechende Ebenen-Miniatur klickt.

Halte ich zu STRG auch noch SHIFT (Umschalt) gedrückt, kann ich eine Ebene zur Auswahl hinzufügen.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, werden die überschüssigen Teile sauber abgetrennt.

Die Auswahl kannst du übrigens mit STRG + D aufheben.

Blendest du nun die Vorlagen-Ebenen aus (in meinem Fall sind es Ebene 4 und Ebene 3), wirst du sehen, dass ein Teil des Schattens noch über den Icon-Hintergrund übersteht.

Auch hier, geht es am einfachsten, wenn du den Icon-Hintergrund mit STRG und Klick auf die Miniatur auswählst.

Allerdings musst du danach die Auswahl noch umkehren, da wir ja den Teil des Schattens außerhalb des Icon-Hintergrundes entfernen wollen.

Nun, auch dafür gibt es einen Tastenkürzel, und zwar STRG + SHIFT (Umschalt) + I.

Wechseln wir nun wieder zur “Schatten”-Ebene und drücken ENTF, wird der unschöne Überschuss entfernt.

Nun können wir noch die Deckkraft des Schattens regulieren. Ich habe sie bei mir auf 23% gestellt.

Das Resultat ist doch schon mal ganz ansprechend. Die vorherigen Schritte wiederholen wir jetzt, allerdings beim Schornstein.
Das sieht dann so aus:

Das fertige Projekt könnt ihr hier als PSD runterladen: home-long-shadow.psd

Photoshop Tutorial: Logo-Grafik als Form abspeichern

Auf YouTube ansehen

Musik: http://www.audioagency.de/

In diesem Video zeige ich euch, wie ihr mit Photoshop eine Pixel-Grafik als Form verwenden könnt.
So braucht ihr z.B. ein Logo nicht extra als Datei öffnen sondern könnt es direkt als Form einbinden.

Ich hoffe, den einen oder anderen damit einen Tipp geben zu können.