Ecomm DS is a powerful tool which allows you to create or customize templates and deploy it for professional printing purposes. Although Ecomm DS is a stand-alone application which requires no more than a standard PHP server to work, it was designed to be integrated to any framework environment.
ECommDS Studio is a powerful and easy-to-use Online Designer which allows your customers to easily design printable material. ECommDS saves the designed template and, allow it to be re-edit. ECommDS Studio comes with an installer which will create the entire database structure for you and, make it ready-to-use! The installer is not different than a WordPress or Joomla installation process.
Get ECommDS Studio Now!
Ecomm DS has been tested within the following Operational Systems:
- - Linux
- - Windows 2003 Server
- - Mac OS (Leopard)
- - IE 6 (Mac)
- - IE 6+ (Win)
- - Opera 10+ (Win/Mac)
- - Safari 5+ (Win/Mac)
- - Chrome 15+ (Win/Mac)
- - Firefox 4+ (Win/Mac)
Under the following languages:
- - English
- - Japanese
- - Brazilian Portuguese
- - Deutsch
1. THE USER INTERFACE
Ecomm DS User Interface was designed based on public selection through Social Network (Facebook , G+ and Twitter). Below follows the description for each button and it’s functionality:
1.1 Add a new Text field It adds a new text field to the document. To edit the text style, click on the text field to select it and use the items 39, 38, 37, 34, 35, 36, 31, 32 and 33 which refers to the text controls. To edit the text content, double click the text field. To deselect it, simple click any area around the text been edited.
1.2 Add a new Rounded Text Field Adds a rounded text into the document. Unlike text field components. Double click to edit its text content and style.
1.3 Remove Text and Rounded Text Fields Use this button to remove any text-based component from the document. In order to accomplish that, select the desired text component (rounded or not) and click the remove text button (3). You may also use the DELETE key from your keyboard to remove texts.
1.4 Add a new Shape Component
To add a new Shape into the document, click the shape button (4) and select one of the shape options on the shape menu.
1.5 Remove Shape Components To remove a shape, select the shape you wish to remove and click the remove shape button. You may also use the DELETE key from your keyboard to remove shapes from your document.
1.6 Add / Change the Background Image
To add or change the background image, click the background library button and select one of the listed image (if available).
You may use the search engine embed into the background library interface to search the list by specific keywords.
1.7 Background Color Picker The background color picker tool (7) allows you to change the document’s background color. Keep in mind that, if a background image is set, the background color will not be visible unless the background image has transparent spots.
1.8 Remove Background Image As the name suggests, this tool allows you to remove the background for the current viewed page.
1.9 Clipart Library Tool
The Clipart Library Tool allows you to add clipart components to your document which are displayed within a searchable library. Cliparts can be offered as vector (can be scaled without losing print quality) or images (png,jpg or gif).
To add a clipart simply click the Clipart Library button and select the clipart you wish to use on your document. You may add as many cliparts as you want into your document.
1.10 Remove Clipart Tool Use this tool to remove cliparts from your document. To remove a clipart, select the clipart your wish to remove and click the remove clipart button. You may also use the DELETE key from your keyboard to accomplish the same task.
1.11 Image Upload Tool
Use the image upload tools to add images from your computer into your document. To upload images, click the Upload Tool button (11) and check the agreement terms for uploading media (see image).
Click the Browse Files button to select the image on your computer. If your image is valid, it will be automatically loaded into the document.
1.12 Full Screen Visualization Tool The full screen tool allows you to work in your document in full screen mode. By clicking the Full Screen button you can switch into full screen and back to normal mode. Be aware that, for security reasons, Adobe Flash Player will not accept keyboard strokes in full screen mode.
1.13 Px Tracker The Px tracker tells you the current selected component’s position relative to the document area. This is extremely useful if you have to place components into the document with pixel precision.
1.14 Py Tracker Like Px, the Py tracker tells you the current selected component’s position relative to the document area.
1.15 Angle Tracker The angle tracker displays the component’s angle relative to the document in degrees measure.
1.16 Previous Document Side Tool Allows you to scroll to the previous side of the document. The selected side is marked by a green arrow at the left top corner of the document’s thumbnail preview. You may also use the PageDown key to browse pages.
1.17 Pagination Tool The Pagination Tool allows you to quickly switch document sides by simply clicking the thumbnail.
1.18 Next Document Side Tool Allows you to scroll to the next document’s side. You may also use the PageUp key to browse pages.
1.19 Alignment Controls: Align to the left Aligns the selected component to the left side of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.20 Alignment Control: Align to the right Aligns the selected component to the right side of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.21 Alignment Control: Align to the center Aligns the selected component to the center of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.22 Alignment Control: Align to the top Aligns the selected component to the top of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.23 Alignment Control: Align to the bottom Aligns the selected component to the bottom of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.24 Alignment Control: Align to the middle Aligns the selected component to the middle of the document. Notice that if distortion(s) to the component is applied, the alignment reference will always start by the XY zero position of the component.
1.25 Reserved title (not used) The item 25 is reserved for the next version of Ecomm DS.
1.26 Filters (effects) Tools
Allows you to apply, edit or remove effects individually to any component within the document.
There are five (5) different filters available as show. After selecting the desired filter, you will be able to edit the filter’s property as showed below:
1.27 Reset Color Channels and Filters Tool This tool allows you to restore to its original state any component that has its color channels changed or effects/filters applied into it.
1.28 Preset Color Channel Tool: Black Silhouette Allows to transform any selected component into a back silhouette.
1.29 Preset Color Channel Tool: White Silhouette Allows to transform any selected component into a white silhouette.
1.30 Preset Color Channel Tool: Chroma-key Allows to transform any selected component in Chroma-key silhouette.
1.31 Text Style: Bold Allows you to apply bold style to a text field component.
1.32 Text Style: Italic Allows you to apply a italic style to a text field component.
1.33 Text Style: Underline Allows you to apply the underline decoration to a text field component.
1.34 Text Style: Align to left Allows you to align the text field content to the left.
1.35 Text Style: Align to center Allows you to center the text field content.
1.36 Text Style: Align to right Allows you to align the text field content to the right.
1.37 Text Style: Font Size Allows you to define the text field’s font size.
1.38 Text Style: Font Color Allows you to define the color of your text field.
1.39 Text Style: Font Family Allows you to select which font family your text field should be used to display the text content.
1.40 Layer Tools: One Layer Down Send the selected component one layer down.
1.41 Layer Tools: One Layer Up Brings the selected component one layer up.
1.42 Layer Tools: Bottom Layer Push the selected component to the bottom layer.
1.43 Layer Tools: Top Layer Bring the select component to the top layer.
1.44 Layer Tools: Automatic Layer Selection Allow the last selected component to placed at the top layer automatically.
1.45 Zoom Tool Allows you to zoom the document in or out.
1.46 Fit Document to Window Tool Allows you to automatically fit the entire document into the document window quickly.
1.47 Safe Line Marker Tool Allows you to display or hide reference lines for the safe area to place text component.
1.48 Cutline Marker Tool Allows you to display or hide reference lines for the bleed are where the document will be cut.
1.49 Grid Marker Tool Allows you to display or hide grid lines to help you to align and place components within the document with accuracy.
1.50 Document Information Tool Allows you to visualize all the document’s properties such as size, dpi quality and others.
1.51 Mask Tool Allows you to display or hide the mask layer (if any) within your document. Mask layers are used to define folding lines whenever is necessary for user’s reference.
1.52 Save Document Tool Allows you to preview and save the document for purchase (users) or storage (administrators) depending of the authentication credentials.
1.53 Application’s Title Displays the application’s title.
1.54 Color Channel Tool: Alpha Channel Allows you to change the transparency channel of the selected component.
1.55 Color Channel Tool: Green Channel Allows you to change the green channel of the selected component.
1.56 Color Channel Tool: Blue Channel Allows you to change the blue channel of the selected component.
1.57 Color Channel Tool: Red Channel Allows you to change the red channel of the selected component.
2. PRINTING YOUR TEMPLATE
There is a lot of confusion and misleading information about RGB and CMYK color spectrum among the printing industry, specially by small and medium sized companies who depends of 3rd party service to print the actual product. In this section we will try to break some taboos and provide you all the context necessary to understand how the color structure works and the difference between web-printing and professional print-job.
RGB Palette (Red, Green and Blue)
The Internet, as we know, uses RGB colors. RGB colors have a huge range of colors, IE.: RGB 24 bits is equal to 256X256X256 = 16.777.216 color combinations. The RGB colorspace is perfect to display content with live color and contrast.
CMYK Colorspace : Cyan, Magenta, Yellow and Black
The CMYK color model (process color, four color) is a subtractive color model, used in color printing, and is also used to describe the printing process itself.
CMYK refers to the four inks used in some color printing: cyan, magenta,yellow, and key (black).
Though it varies by print house, press operator, press manufacturer and press run, ink is typically applied in the order of the abbreviation.
The “K” in CMYK stands for key since in four-color printing cyan, magenta, and yellow printing plates are carefully keyed or aligned with the key of the black key plate. Some sources suggest that the “K” in CMYK comes from the last letter in “black” and was chosen because B already means blue. However, this explanation, though plausible and useful as a mnemonic, is incorrect.
The CMYK model works by partially or entirely masking colors on a lighter, usually white, background. The ink reduces the light that would otherwise be reflected. Such a model is called subtractive because inks “subtract” brightness from white.
In additive color models such as RGB, white is the “additive” combination of all primary colored lights, while black is the absence of light. In the CMYK model, it is the opposite: white is the natural color of the paper or other background, while black results from a full combination of colored inks. To save money on ink, and to produce deeper black tones, unsaturated and dark colors are produced by using black ink instead of the combination of cyan, magenta and yellow.
RGB vs. CMYK : Practical Use on the Web
As mentioned above, the Internet (and your computer’s OS) is based on RGB colorspace. It is impossible to display CMYK on monitors, regardless of mark or quality. From this point, the following problems emerges:
- 1. Color difference while designing or editing products in any software (PC, Mac or Internet based Apps)
- 2. Screen configuration (99% or all users uses manufacture’s default confuguration)
- 3. CMYK profile embed on PDF See below some of the most common problems arising due colorspace and screen problems.
Case Study: PDF or JPG provided by the client
Assuming that the media provided is a PDF or JPG with CMYK profile embed designed by a professional with calibrated monitor, let us analyze the following situation. – A customer orders a flyer design which will be sent to printing. After designing the flyer, the artwork is sent to the customer for review. The customer opens his email on his machine (PC or Mac) and replies to the graphic designer that the logo should have a stronger blue color to match his company’s flag. After performing the necessary changes, the customer finally approves the work which is sent for print job. After a couple of day, the customer calls the graphic designer complaining that the blue is different from what he saw (in his machine) and it doesn’t match his company’s color. Problem sources: a. The graphic designer failed to assume that the client will not have calibrated monitor or knowledge of colorspace. b. The graphic designer failed to inform the client about colorspace differences (RGB/CMYK) c. The customer failed in reviewing the job in a non-calibrated monitor
- There isn’t a right solution. Printable products will always have the CMYK curse, regardless of color profile.
Experiment: Printing PDF or JPG without and with CMYK Profile
(This experiment requires a calibrated monitor) – On your favorite graphic editor, draw 3 squares, one blue (255), one green (255) and one red (255) which represents the basic RGB colors. Save the document in PDF or JPG and send it to print (home/office printer). – Now, convert the same document to CMKY colorspace. Print it out using your home printer (same printer for both documents). Notice the colors on the two sheets. They should have noticeable differences in colors. Now, let us analyze what just happened.
When you add certain range of RGB colors into a document such as pure blue or green, you are defining the color to 255 on its channel and 0 to the other two channels. That’s fine even if
you want to print that particular color. The problem occurred when you converted the document to CMYK. Because CMYK works by mixing 4 colors making the color palette really short comparing to RGB, it will be very likely that the profile instructions changes the blue to a color close to purple. Why? – because there is no formula or mathematic meanings to convert RGB to CMKY with accuracy.
All printers print in CMYK. The proof of that is that, even your printer has 4 to 6 colors on its color deck. So, why RGB are printed with accuracy while CMYK profile mess it up? The answer is simple. The conversion performed by the printer (RIP) is better than the graphic application. To prove this concept, we used Ecomm DS’s output data (pdf) and sent the same document to print in two formats: – With CMYK profile embed during Pre-Flight – The PDF output as is, without any modification. For this experiment, we used two renamed printing companies. Documents printed were:
- 2x Business Card 91x61mm 4/4 356dpi 2 sides 300g (CMKY and RGB)
- 2x Post Card DINA6 Quer 105X148mm 4/4 356dpi 2 sides 300g (CMKY and RGB)
- 2x Flyer DINA6 Quer 148X105mm 4/4 300dpi 2 sides 135g (CMKY and RGB)
The results were as expected.
CMKY: suffered some color changes in which affected mostly the blue color but matches the CMYK PDF converted on inDesign using the printing company’s profile specification.
RGB: the PDF without profile matches the JPG output* and also the PDF which corresponds to what we designed using Ecomm DS. Undoubtedly, the professional printer has better conversion methods (RIP) than the graphic software’s colorspace conversion. * Because Ecomm DS outputs a PDF plus high quality JPGs, we were able to compare the results.
The image below will display different colors depending on your monitor’s settings:
IMPORTANT: We are, in no way, trying to impose our conclusions to you. If you are interested, you should perform the experiment yourself. When it comes down to providing printing products in which a user is allowed to interact with the product (such as Ecomm DS), we found that CMYK profile actually “gets in the way and caused more trouble than solution”. CMYK Profile is great when used by graphic professionals and also allows on the view the exact print output (of course, with a calibrated monitor using professional software) but in the web, that just gets in the way. We will always assume that the client is unfamiliar with printing process and has no clue of what CMYK is. We also concluded that there is no solution for screen visualization regardless of settings. There is no standard when it comes down to color fidelity. There will be always the risk of complains about how different the print looks from the digital media. So, if you plan to send your PDF out for printing, do not forget to specify that no ICC profile should be added to the document to avoid color distortion.
Get ECommDS Studio Now!
If you have more questions or is interested in learn more about web2print, don’t hesitate in contacting us.