Dokumentation PrintShop

Einführung / Konfiguration

Voraussetzungen & Installation

Voraussetzungen: Magento CE 1.9.x oder neuer.

Download: http://www.magentocommerce.com/download

Wichtig!

Bevor Sie die Installation der PS Designer Extension in Ihrem Webshop beginnen, erstellen Sie ein komplettes Backup des Systems (Datenbank und Files).

Für Informationen über Magento CE Basis wenden Sie sich bitte an die offizielle Magento Knowledgebase:  http://www.magentocommerce.com/knowledge-base

Bei der Installation von PSDesigner werden die Produkt-Detail-Page sowie die Warenkorb Seite mit Objekten beschrieben. Zum standard Theme RWD von Version 1.9.x ist PS Designer 100% kompatibel. Je nach verwendetem Theme kann es aber Anpassungen benötigen. Dies hängt von der Qualität ihres Themes ab. Konflikte müssen korrigiert werden. Dies ist in der Regel aber kein Problem.

Installation via FTP

Kopieren sie die Daten der Extension in ihr Magento Document root. Loggen sie sich neu ein und löschen sie den Cache.

Back To Top

Konfiguration

Unter System / Konfiguration / PrintShop Designer /  finden Sie die Konfiguration des Editors.

  • Frontend Canvas Size: kann im Frontend die Grösse des Templates verstellt werden oder nicht
  • Frontend Menu Source: kann im Frontend der SVG Code aufgerufen werden oder nicht
  • Frontend Menu Open SVG: kann im Frontend eine SVG Datei importiert werden oder nicht.
  • Image Resolution Upload max. 3000 x 3000 px: mit dieser Einstellung wird der Upload von Bildern in der Pixelanzahl limitiert
  • Enable Image Gallery: Damit wird das Auslesen des Verzeichnisses für Bilder unter /httpdocs/media/printshop/svgtemplate/imagegallery gestartet. Bitte die erforderlichen Verzeichnisrechte einstellen.
  • Show document block: Buttons für Dokumentendetails ein / ausblenden – (Seitengrösse, Farbe)
  • Display Mode: wie wird der Editor im Frontend angezeigt — auf die volle Browsergrösse oder innerhalb des Magento-Theme-Gestaltungsrahmens. Je nach verwendetem Theme muss die Anzeige angepasst werden.
  • Primary Color/Secondary Color etc..: Farbeinstellungen des Editors können beliebig angepasst werden
Konfiguration Editor

Konfiguration Editor

Schulungs Video

Schulungs Video

Back To Top

SVG – das universelle Grafikformat

PrintShop Designer arbeitet mit SVG als universelles Grafikformat. Die meisten Grafikapplikationen können direkt SVG exportieren / importieren. Leider unterscheidet sich die Qualität und der korrekte SVG Code nach Spezifikation je nach Applikation. Der aktuell vorliegende SVG 1.1 Standard hat keine Funktion für Multipage — kann also nur einseitige SVG Dokumente verarbeiten.

An dieser Stelle wurde mit PrintShop Designer eine Erweiterung der Spezifikation entwickelt die Multipage und vieles mehr ermöglicht.

  • Multipage SVG©
  • Layers Rouler©
  • SVG2PDF©

 

Browserunsterstützung SVG Daten / Spezifikation

Jeder moderne Browser unterstützt das SVG 1.1.x Datenformat. Es gibt einige Unterschiede im der Geschwindigkeit und der Genauigkeit des Renderings. Hier gibt es eine Übersicht:

 

Import SVG Daten in den Designer

SVG Daten können im Designer via Drag&Drop auf eine bestehende Seite importiert werden. Sie können SVG Dateien auch unter den Design Ideas als ClipArt hochladen. Eine weitere Möglichkeit ist SVG Code direct in die Source eines Templates zu laden. Die Kompatibilität hängt von der Qualität des SVG Codes ab und muss ausprobiert werden.

  • Video Export SVG aus Adobe Illustrator
  • Video Importieren SVG Daten in Designer

 

‚Waschen‘ von SVG Daten

Oft kann schlechter SVG Code durch einen Import und Export in Inkscape reingewaschen (optimiert) werden. Es ist zu vergleichen mit den Anfängen von PDF — diese Dateien wurden oft durch Import/Export in Illustrator oder via EPS und Acrobat Distiller reingewaschen.

 

Editoren

Programme, mit denen SVG-Dateien erstellt und bearbeitet werden können, sind u. a.:

  • Adobe Illustrator (proprietär; Windows, Mac OS)
  • CorelDRAW (proprietär; Windows)
  • Inkscape – Grafik- und Zeichenprogramm (freie Software; Linux/Unix, Windows, Mac OS X; verwendet SVG als natives Fileformat (mit Inkscape Erweiterungen))
  • Apache OpenOffice – Nativer Import und Export mit Einschränkungen (freies Office-Paket)
  • PhotoLine (proprietär; Windows, Mac OS)
  • sK1 – Graphics und Druckvorstufe (freie Software; Linux/Unix)
  • Scribus (freie Software; Unix, Linux, Mac OS X, OS/2, Windows)
  • Xara Designer Pro – Grafik- und Zeichenprogramm (proprietär für Windows)
  • SVGConv [19] – Online-Konverter, mit dem SVG-Dateien in andere Formate (JPEG, PNG, GIF, BMP, PDF, PS usw.) umgewandelt werden können
  • Go2convert[20] – Online-Konverter, mit dem SVG-Dateien in andere Formate umgewandelt werden können
  • Microsoft Visio (proprietär; Windows)
  • Omnigraffle (proprietär; Mac OS)

 

Back To Top

Manage Fonts

Manage Fonts

Unter dem Menu PrintShop Designer / Manage Fonts können die Fonts für die Gestaltung organisiert werden.

PrintShop Designer hat eine Echtzeit-Schnittstelle zu Google Fonts. Bei einer neuen Installation müssen Sie einmal die Fontlibrary aktualisieren — danach müssen Sie das nie wieder tun!!

Aktualisieren (einmaliges Laden) der Fontinformation von Google Fonts

Update Fonts

Update Fonts

Open / Close Fonts für die Verwendung im Designer

Über die Liste können Sie die Fonts per Namen filtern, auswählen, aktivieren und deaktivieren.

Fonts aktivieren

Fonts aktivieren

Tip: für die bequeme auswahl der Fonts mit Voransicht rufen Sie am besten diese Seite auf http://www.google.com/fonts . Damit können sie die Fonttypen aussuchen und entsprechend über den Namen im Fontmanager aktivieren.

 

Verwenden der Fonts im Design und offline

Die geladenen Fonts stehen im Designer für die Arbeit zur Verfügung. Der Designer setzt einen Link zum Font in den SVG Code. Wird eine Bestellung erstellt und eine PDF Datei über den Service SVG2PDF© generiert, werden die Fonts als Subset in das PDF eingebettet.

Verarbeiten sie die SVG Datei (single site) so wird der Font automatisch auf dem Client geladen solange dieser online ist. Über Google Font können die Fonts auch als TTF heruntergeladen werden.

Back To Top

Design Ideen

Design Ideen – ClipArt und Grafiken verwalten

Im Menu PrintShop Designer / Design Ideas können ClipArts und Designelemente für den systemweiten Gebrauch sortiert nach Kategorien angelegt werden. Diese Design Galerie steht für alle Benutzer im Designer zur Verfügung.

Manage Design Category

Hier erstellen sie einfach Kategorien für Ihre Cliparts und Objekte

Manage Category

Manage Category

Manage Designs

Cliparts und Design-Objekte müssen als SVG Datei vorliegen und können hier hochgeladen werden. Bestimmen sie einen Design-Namen und wählen sie eine Kategorie.

Designs erstellen

Designs erstellen

Clipart hochladen

Clipart hochladen

Back To Top

Bildgalerie

Bildgalerie administrieren

Die Bildgalerie kann über den File Manager in ihrem Control Panel oder per FTP administriert werden. Folgende Schritte sind dafür notwendig:

  • loggen sie sich per FTP auf das Filesystem ihre Shops ein
  • im Verzeichnispfad ‚media/printshop/svgtemplate/imagegallery‘  werden die Verzeichnisse und Fotos abgelegt.
  • erstellen sie offline ihre gewünschten Verzeichnisse (nur eine Ebene ist möglich) und kopieren sie ihre Bilder in diese Verzeichnisse.
  • Verwenden sie JPG Format oder auch PNG
  • danach können sie diese in /imagegallery hochladen
  • Die Bildgalerie liest die Verzeichnisse und Bilder aus und stellt diese im Designtool dar

Bildgalerie

 

!!Bildgrössen und Performance!!

Für die Performance des Systemes ist es überaus wichtig das sie die Bildgrössen so klein wie möglich halten. Je grösser die Bilder desto mehr Zeit wird für die Darstellung in der Bildgalerie, für die Platzierung in der Vorlage und den ganzen Bestellablauf benötigt. Platzierte Bilder werden mit der vollen Auflösung in das SVG File gerechnet (Vorlage). Deshalb muss die Bildgrösse so tief wie möglich gehalten werden.

Optimale Bildgrössen

Hier ein Beispiel für optimale Bildgrössen die gut in der Bildgalerie funktionieren:

  • Pixelmasse: 1500 x 840 Pixel
  • Masse: 25,4 x 14.3 cm
  • Auflösung: 150 dpi
  • Format: JPG
  • Dieses Bild kann sehr gut für Grösse A5 im Digitaldruck gedruckt werden.

Back To Top

Templates (Vorlagen) erstellen

Templates – Multipage

PrintShop Designer beherrscht mehrseitige Dokumente (Multipages). Diese Dokumente können aktuell nicht in Browsern oder anderen SVG Editoren angezeigt werden, weil diese keine Mehrseitigen SVG Dokumente unterstützen. Der PrintShop-Dienst SVG2PDF rendert diese Dokumente zu mehrseitigen PDF Daten.

Schulungs Video

Multipage SVG

Back To Top

Template importieren (SVG Daten)

SVG Daten können im Designer via Drag&Drop auf eine bestehende Seite importiert werden. Sie können SVG Dateien auch unter den Design Ideas als ClipArt hochladen. Eine weitere Möglichkeit ist SVG Code direct in die Source eines Templates zu laden. Die Kompatibilität hängt von der Qualität des SVG Codes ab und muss ausprobiert werden

Schulungs Video

Schulungs Video

Back To Top

Template in Adobe Illustrator erstellen und importieren

PrintShop Designer arbeitet mit SVG als universelles Grafikformat. Die meisten Grafikapplikationen können direkt SVG exportieren / importieren. Leider unterscheidet sich die Qualität und der korrekte SVG Code nach Spezifikation je nach Applikation. Der aktuell vorliegende SVG 1.1 Standard hat keine Funktion für Multipage — kann also nur einseitige SVG Dokumente verarbeiten.

Schulungs Video

Schulungs Video

Back To Top

SVG2PDF Service

SVG2PDF Service

Der SVG2PDF Service ist eine Dienstleistung der Clixmedia GmbH. Dieser Cloudservice konvertiert SVG Daten (inklusive Multipage SVG) nach High-End PDF Version 1.7 Acrobat 8.

multipage-convertion

Multipage SVG Datei

Multipage PDF von SVG Daten

Multipage PDF von SVG Daten

Technische Details der SVG Objektunterstützung:

Einige Attribute, Objekte können nicht nach PDF konvertiert werden weil PDF diese Anweisungen einfach nicht verarbeiten kann. Hier ist eine Zusammenstellung der Elemente die unterstützt werden und denjenigen die nicht in PDF Funktionieren.

SVG Grafiken PS Convertion implementiert SVG 1.1 (Second Edition), wie vom W3C veröffentlicht. 

Folgende Unicode-Formate und -Encodings werden unterstützt:
UTF-8, UTF-16, ISO 8859-1 … ISO 8859-15, ASCII
CSS-Styling ist verfügbar, einige CSS-Elemente werden allerdings nicht unterstützt. Fonts im Format CEF werden unterstützt. CEF-Fonts sind zwar nicht Teil der SVG- Spezifikation, werden aber von einigen Adobe-Anwendungen in SVG-Grafiken ein- gebettet.

Fontauswahl
Algorithmus für die Fontauswahl. Die Fontauswahl wird bei SVG durch die folgenden Properties gesteuert:
font-family
font-style
font-weight
font-stretch
font-variant
font-size
font-size-adjust
Relevant für die Auswahl eines externen Fonts sind nur die ersten drei Properties. PS Convertion bildet dazu die folgenden

Fontnamen:
<font-family>,<font-weight>,<font-style>
<font-family>-<font-weight><font-style>
<font-family>,<font-normweight>,<font-style>
<font-family>,<font-weight>,<font-normstyle>
<font-family>,<font-normweight>,<font-normstyle>
<font-normweight> hat dabei einen der folgenden Werte:
Regular, Thin, Extralight, Light, Medium, Semibold, Bold, Extrabold, Black

Elemente für die Auswahl von Glyphen:
altGlyph, altGlyphDef, altGlyphItem, glyphRef

weitere Elemente:
cursor, foreignObject, vkern

Einschränkungen bei SVG-Attributen und -Properties. Für die folgenden Attribute und Properties gelten bestimmte Einschränkungen:

Manche CSS-Regeln werden nicht unterstützt, einschließlich @import und @font-
face.

Die Property zur Fontauswahl font-variant wird nur zusammen mit dem Schlüsselwort small-caps und nur für Fonts mit der OpenType-Funktion smcp unterstützt.Die Kombination von Werten der Property text-decoration wird nicht unterstützt. PS Convertion zeichnet die Dekorationselemente nicht als Bereiche mit separater Füll- und Linienfarbe, sondern als Linien. Diese werden mit der Füllfarbe gezeichnet, wenn vorhanden, und sonst mit der Linienfarbe.

Fehlende Fonts und der Default-Font:
Wenn ein Font nicht geladen werden kann, ver-sucht PS Convertion einen Standardfont zu laden, bei dem der Fontname fontfamily in der Option defaultfontfamily von PDF_load_graphics( ) definiert ist. Standardmäßig wird der Font Helvetica geladen, ansonsten Arial Unicode MS . Wir empfehlen daher dringend, entweder den Font Helvetica auf dem Client der Daten aus PS Designer öffnet bereitzustellen oder einen anderen Font mit einem großen Sortiment an Glyphen. Wie gesagt wird für die Konvertierung als Ersatzfont Helvetica genommen.

Farbe in SVG:
Entsprechend der SVG-Spezifikation werden für Text und Vektorgrafik in SVG standardmäßig im sRGB-Farbraum Farbangaben interpretiert. Das bedeutet, dass SVG-Grafiken bei PDF/X und PDF/A als geräteunabhängige Farbe behandelt werden. Denken Sie daran, dass in SVG eingebettete Rasterbilder andere Farbräume verwenden können. Ein eingebettetes oder referenziertes JPEG-Bild kann zum Beispiel den CMYK-Farbraum mit oder ohne ein ICC-Profil verwenden.
Wenn die Option devicergb an PDF_load_graphics( ) übergeben wurde, werden SVG- Grafiken in einfachen RGB-Farben dargestellt, was bei PDF/A und PDF/X manchmal nicht erlaubt ist

Metadaten in SVG:
SVG-Grafik kann XMP-Metadaten enthalten. PS Convertion ignoriert SVG- Metadaten in Grafiken, um die Größe der Ausgabedatei zu reduzieren.

Nicht unterstützte SVG Funktionen
Elemente für Animation und Scripting:
animate, animateColor, animateMotion, animateTransform, script, mpath, set

Elemente für SVG-Filter:
feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter

Nicht unterstützte SVG-Properties. Die folgenden SVG-Properties werden nicht unter-
stützt und einfach ignoriert:
alignment-baseline, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, dominant-baseline, enable-background, filter, flood-color,flood-opacity, font, glyph-orientation-horizontal, glyph-orientation-vertical,
image-rendering, lighting-color, pointer-events, shape-rendering, text-rendering

Nicht unterstützte Attribute unterstützter SVG-Elemente. Die folgenden Attribute un-
terstützter SVG-Elemente werden nicht unterstützt und einfach ignoriert:
baseProfile (svg)
contentScriptType (svg)
contentStyleType (svg)
externalResourcesRequired (all elements)
method (textPath)
on* (all elements)
requiredExtensions (all elements)
requiredFeatures (all elements)
spacing (textPath)
spreadMethod (linearGradient, radialGradient)
version (svg)
zoomAndPan (svg)
xlink:role (all elements)
xlink:show (all elements)
xlink:type (all elements)

Back To Top

Frontend Funktionen

Shop Administration

Staffelpreise richtig verwenden

Voraussetzung für diese Anwendung ist die Extension PriceTierPopUp erhältlich bei support@clixmedia.ch

Funktionen

  • Price PopUp für Staffelpreise im Frontend
  • Preistyp Absolut – für die einmalige Berechnung von Optionen wie z.Bsp Gut zum Druck
Schulungs Video

Schulungs Video

Back To Top

Technische Referenz

Datenablage

PrintShop Daten werden hier gespeichert:

Benutzer Templates: media/printshop/svgtemplate/user_template

Benutzer Bilder: media/printshop/svgtemplate/user_image

Template Daten SVG: media/printshop/svgtemplate/designs

Bestelldaten SVG / PDF: media/printshop/svgtemplate/cart_template

 

Sprachdateien: svg/printshop/language

Sprachdateien Werkzeuge: svg/printshop/locale

Applikation: svg/printshop

Back To Top

 

 

 

 

Schreibe einen Kommentar

Copyrights © Clixmedia GmbH.