Designer Studio Enhancements
Custom/Art Logo Maker: Create, Save, Edit, Re-use Custom Arts (Add-On)
Earlier, customers didn't had the facility to create, edit custom arts, nor they had the provision to save or reuse their previously saved Custom Arts.
Now, enhancing the Custom Art Maker feature we will allow the customers to create and edit arts, save their arts, re-use their previously saved arts.
- Here, the customer also gets the chance to create their artwork design, they can select from pre-created layouts to use design elements, add clip arts, and text. The artworks that are created by the customers will also be listed in the ‘My Saved Designs’, there will be no identification for the artworks that are created by the customers.
- To add a new artwork customer can use the 'Create Artwork' button provided in the image gallery pop-up.
- Customers can any time Start Over and create new designs.
- Earlier, whenever customers selected any artwork, then it was directly applied to the Designer Studio Canvas. Now, customers will get the provision to name them and save them.
- Here, the customer can enter the Artwork name click on the following –
- Save and Apply – This will save the artwork as well as apply it on the design canvas.
- Apply – This will only apply the artwork.
- Clear Existing Design – This will clear the existing canvas design.
My Saved Artworks (Front Store)
- At Front-Store the customers can view their Saved Custom Arts at My Account >> My Saved Designs.
- The artwork will include its name and the date on which the artwork was last modified. Customers can anytime edit, delete, and create a copy of the designs.
- Customers can also filter out the Artwork and Product Design Templates using the filter dropdown provided.
My Saved Artwork – Designer Studio
- Customers can view their saved Artwork from the custom art maker pop-up and second in the Image Galley pop-up.
Custom Art Maker Pop-up
Image Gallery Pop-up
- Clicking on the ‘My Saved Artwork’ button will display all the artworks created and saved by the customer. Here, the customer can perform the following actions on artwork – Edit and Delete.
Upload Google Fonts directly from Google Font Library
Earlier, for ‘Google Font’ in the Designer Studio, the Admin had to manually download the particular font from the ‘Google Font Library’, convert the downloaded file into multiple specified formats and then upload them one-by-one in the Admin Panel under Designer Studio >> Studio Fonts >> Client Fonts’.
Now, we have given a provision where the Admin will get to easily upload the Google Fonts directly from Google Font Library.
In the Admin Panel go to,Here, we have added a new section – ‘Google Fonts’.
- In the Google Font drop-down list, all the Font Type available in the ‘Google Font Library’ will be listed. As we are fetching this list via an API then all the newly added Google Fonts will also be listed.
- On the click of ‘Apply’ system will auto-upload the following file format for all the available ‘Font Style’ for the selected ‘Font Type’ – ttf, otf, woff, woff2, eot, and svg.
Customizing Inner Side of Cover Page (Flipbook)
Earlier, for Photobook artwork designing/customization, customers didn't had the provision to design/customize on the inner side of the cover pages.
Now we have provided a facility to design/customize the inner side of the Photobook Pages. For this, we have added a new dropdown Product Sub Type under the Photobook product. This will be very handy for Magazines and similar printing products.
- Hardcover – Customer will not get to design the inner side of the cover pages as earlier.
- Flipbook – When this option is selected, all the pages of the photobook will work as inner pages. There will not be any differentiation of the cover page and inner page. Hence, every page will have the same width and height. Following cover configuration will not be available for flipbook: Cover size configuration, Cover Layout creation option, Combine Cover for Photobook, Spine Feature, and Cover Pages Width/Height.
Now, customers can customize Front Cover Page, Inner Front Cover Page, Back Cover Page, and Inner Back Cover Page. This flipbook (softcover) feature offers your customers a seamless personalization experience.
Show the configured layout category
Earlier, for the Photobook Product, under the Layouts tab in the Designer Studio lists ‘All Layouts’ and other categories assigned to a particular template. By default, ‘All layouts’ was auto-selected. There was no provision to show a specific category as default selected.
- Now, we have provided a facility to specify a page layout category as a default layout category of the Photobook template in the Designer Studio.
- For this, we have added a new setting – Select Default Page Layout Category in the template creation form.
- All the page layout categories assigned to the product will be listed here, Admin can select a category to be shown selected by default in the Layout tab in the Designer Studio.
One step undo/redo option
Earlier, in Designer Studio after arranging photos in a layout, when the layout was changed, the user had no provision to go to the previous step. This becomes a concern when the applied/changed layout is not satisfactory and the user wants to move back to the previous design. To address this concern we have given a provision to perform a one-step undo/redo.
Example of Undo/Redo –
Step 1: Photo Arrangement in Layout 1
Step 2: Select Layout 2 with the same photo arrangement
Step 3: Click Undo
- On clicking ‘Undo’, the user will be navigated to the previous photo arrangement performed in step 1.
- Here, on this step, the user will have provision to ‘Redo’ only one-step ahead and the same for ‘Undo’, one step behind.
- On click of ‘Redo’, the user will be navigated back to Step 2, where the previously selected layout will be auto-selected along with those photos.
Side-specific page layout
Earlier, the Admin could create page layout only for Cover Page and/or Inner Pages that got applied to both sides of the pages. There was no provision to make a side-specific layout just for the left inner page or right inner page.
Now, we have added a new setting for this development– ‘Enable side-specific page layouts’ in the Designer Studio Settings. Go to,
After enabling the setting Admin will get the provision to create side-specific layout while creating Page Layouts.
When Layout Type is selected as Inner Page then, Admin can set Layout Side.
- Left – Left side page layout.
- Right – Right side page layout.
- Both – The page layout that applies to both sides of pages of inner pages, like the existing layout type.
At the Front-Store in the Designer Studio of photobook Product, when the customer selects the left side of any inner page and clicks on the ‘Layouts’ tab then all the layouts that are created for ‘Left Inner Page’ and ‘Both Inner Page’ will be listed for selection. Similarly, when customers select the right side of any inner page and click on the ‘Layouts’ tab then all the layouts that are created for ‘Right Inner Page’ and ‘Both Inner Page’ will be listed for selection.
Designer Studio features - clear and layer buttons will now be available for Photobook too.
To enable the clear page and layers button go to,
New Usability Features
Template Objects – by default lock positions
Till now, when a customer selects a template, all the objects within the templates were only locked if the Admin locked it manually. Later while customizing the template the customers will decide whether they want to unlock the object or delete it.
Now, we have extended this feature and given a provision to lock all the objects by default. To cater to this development there is a new setting added - “Lock Objects Position & Allow to unlock and Delete”.
This setting will lock the elements of all the templates throughout the system.
- Unlock/Lock – Easy lock/unlock of the template element.
- Delete – Click to delete the element.
Customers and Admin can now group shapes, pictures, or other objects. Grouping lets you rotate, flip, move, align, or resize all shapes or objects at the same time as though they were a single shape or object.
To group objects press and hold SHIFT while clicking the objects to the group. Select more than one object to enable the Group button. As soon as multiple objects are selected, in the property panel, a ‘Group’ button will be visible. Click it.
On click of the ‘Group’ button, all the selected objects will be grouped (shown in the image below).
In this version, we are introducing a new tool Format Painter in the Designer Studio. This will let you apply all the formatting from a Text Element to another Text Element, this is just a copy and paste of the formatting.
For the development, we have added a new tool – ‘Formatter’, in the Designer Studio.
- You can apply the look of a particular text box to others. To get started select the element, click Format Painter, and select something to apply the formatting. This will allow copying all the effects except rotation, opacity, and shadow.
- For the Format Painter tool, there are various position settings available in the Studio Settings section.
- Go to, Admin >> Designer Studio >> Studio Setting >> Top Panel tab. Here all the position settings of the Formatter Button are available. Admin can set sort order, position, and enable/disable the tool.
Now, Admin and customers can easily swap images between two placeholders. When Designer Studio Setting - ‘Enable auto-fill’ is enabled then the ‘Swap’ Images tool will be available in the Designer Studio.
This tool will be visible under ‘Edit’, which appears only when the image is selected. To swap any image –
Select an image, click on the ‘Swap Image’ tool under ‘Edit’, select the image where you want the swapping to be performed.
Swapping can be done between any two images irrespective of the page they belong i.e. when if one image is on the first page and the other image is on the third page both can be swapped. Swap Image is a free facility, which can be done for any image i.e. there is no requirement of layout or placeholder to swap the images.
Font Resize without aspect ratio
To give the provision of re-sizing fonts without the aspect ratio we have enhanced the existing functionality of scalable text. Now customers can re-size their fonts both with and without the aspect ratio.
We have modified the existing setting under the ‘Left Panel’ tab – “Font/Text Scaling”, removed the toggle, and added a dropdown with three options.
To check the setting, go to,
- None – No scaling effect
- Scalable with aspect ratio – Allows scaling of a text field with the aspect ratio (the existing functionality)
- Scalable without aspect ratio – This feature will allow you to expand the text both horizontally and vertically without the aspect ratio. (See image below for example)
Display template’s used colors & fonts
Till now, the colors and fonts used within the template by the Admin were not listed at the Front-Store in the Designer Studio separately. Due to this, to maintain the consistency of the template, the customers faced difficulty in finding the exact color in the color palette.
To help customers maintain consistency and design better we have added a new setting – ‘Enable Used Color & Fonts from Design’.
To enable/disable the setting go to,
- We have added a separate color list in the color picker. This list contains all the colors used in the design.
- Whenever, for the first time the customers add a new text in the canvas, the font that is used maximum times in the template will be displayed i.e. the newly added font will be the font that is used maximum times in the selected template.
- If the customers change the font type, then the next time customers add the ‘new text’ it will have the font that was previously used i.e. the last font used.
Display template’s default and bound colors
Earlier, in the color palette of Designer Studio, either specific bound colors were shown or the default colors. There was no provision to show both of them at the same time in the color palette of any template. Similarly, for the fonts either specific fonts are displayed or the default fonts.
Now, in the Template Property, under the Settings tab we have added two new settings – Allow Default Colors and Allow Default Fonts.
Using this setting specific bound and default fonts and colors can be displayed together for a particular template.
Save Design Guidelines
Guidelines are horizontal or a vertical line, which is displayed over the canvas and can help Admin and customers to align elements.
Until now, if the customer added guidelines into their design for alignment then they were not saved for future use. The customer had to manually set again those lines into their design.
Moving forwards we will save those lines whenever customers save the design and come back again to the Designer Studio canvas through any source, the guidelines will be visible just the way they were set when the customer last saved the designs.
The lines will be available on actions such as – Edit Design, Create a new design, Edit from cart, and Edit from the portfolio, and more.
We have done some enhancements in the canvas products – added custom color options for Canvas Edges and Frame and configuring frame specific thickness.
Custom color option for Events – Edges & Frame
Earlier, we didn't have any provision where a customer gets to choose a custom color for Canvas Frame and Edge. Now we have provided the provision, while binding additional options in the ‘Canvas’ tab, in the ‘Event Attributes’ field, we have added the ‘custom color’ option.
- For Canvas Edge and Frame, on the ‘custom_color’ event attribute selection Admin will not have to provide any details further.
- At the Front-Store, when customers click on custom they will see an ‘Advanced Color Palette’ when a color is selected that will be reflected on the Canvas.
Configure frame specific thickness
Earlier, the Admin didn't have the provision to configure frame thickness while binding frames and canvas effect. Now, in Admin Panel while binding additional options in the ‘Canvas’ tab, for ‘Frame’ events, in the ‘Event Attributes‘, for all the fields there will be an additional field – ‘Border Width (Pixel)’ where the Admin can configure the frame specific border width.
When the customer selects the particular Frame option, the respective width border effect will be seen on the canvas.
Canvas Orientation Option
Earlier, for Single Photos Canvas there was no option to change the orientation of the canvas at the front end. Admin was forced to create two separate sizes to provide both sides of orientation.
Now we have provided one button besides the preview button to change the orientation of the canvas. This button will only available for “Single Photos Canvas” with the normal price defining method. For the custom size price defining method, this button will not be available.
Image Sharpening Effect
- We are now adding a new effect – ‘Sharpen’, for sharpening the images under the ‘Adjustments’ tab of Image Property Panel in the Designer Studio. Customers can find this effect when an image is selected, in the Image property panel under Edit > Filters > Adjustment tab.
Mask/Frame Image File in SVG Format
- Earlier, the mask image file could not be uploaded in SVG format but only in standard image format – png, jpeg. Due to this in the print-ready file, only the masked cut-off of the image was captured and not the full image. As a result, the Admin did not have the provision to edit the image or move the image and make any corrections if required.
- Now, addressing the issue we have given the provision to the Admin to upload the SVG file format. While uploading the SVG mask image Admin needs to take care of the SVG mask image that only contains a single SVG path inside. We have also renamed Mask to Frame for the image place holder.
Lazy loading functionality
- We are now bringing the Lazy Load feature to the Designer Studio instead of load more. Lazy load is a feature that enables on-demand loading and is an optimization technique for online content.
- For this development, we have added a new setting named - ‘Enable Lazy Load for All Paginations’ in the Designer Studio Settings.
- Go to,
- If the setting is enabled, lazy loading will be in effect else regular pagination as existing will be effective.
Tooltip help in proofing tool
- In the Proofing tool, we have added help for each tooltip. This will allow the customers to use the tooltips efficiently and add comments accordingly.
Low resolution/empty image placeholder warning message
- Earlier, in Designer Studio the warning message populated when there was a low image resolution and when there was an empty placeholder. Now, we have enhanced this warning message to cater to all the business use-cases.
- The Designer Studio setting – ‘Show warning message if any page has a low resolution or empty image placeholders’ is enhanced.
- Now, we have given a single-selection dropdown with the below options –
- Only Image Resolution – Populate warning message only when there is low image resolution.
- Only Empty Image Placeholder - Populate warning message only when there is an empty image placeholder.
- Both – Populate warning messages for any of the above-mentioned instances.
- None – Not to populate warning messages in any instances.