How to prepare designs in Photoshop for Barisco

Photoshop is an excellent tool for creating web designs. The reason for this: Photoshop  works in pixels, like the web.

Designs for a full HD Web view.

A full HD web view makes the pages adapt to the full size of the browser or in full screen mode of the browser. This money to create a publication on PC / Mac or on tablets and smartphones.

Full-hd-in-browser-1Full-hd-in-browser-and-in-screen

 

 

Full-hd-in-screen

Pixel dimension setting in Photoshop. 

To design a Full HD view in Photoshop, your dimension should read  1479 x 1080 pixels

Photoshop-canvas-size

Why in this dimensions?

Basically, we assume the height of the screen. A Full HD screen is 1080 pixels high. (Full HD 1920 wide and 1080 pixels high).

When the screen or browser is less than 1080 pixels, we scale the height back. Hence, the size of the page can vary in width.

Since we have chosen a 1479 x 1080 pixels size for the worksheet in Photoshop, we will relatively frequent have the occurrence that the background image must display wider than the set dimensions.

dimention-in-ps

Therefore, It is important to maintain for background images the resolution 1920 x 1080 pixels or wider.

Note:It is possible to apply to the background image  various settings depending on the desired result of positioning being: Envelope, Zoom repeat, original or stretch. For a detailed description see position and size settings> 

The workspace in Barisco. 

In Barisco the page measures standard 1024 pixels wide by 748 pixels high. ( this can be adjusted )

Why?

The iPad is a relatively square screen with the resolution of 1024 x 748 pixels and it is important to ensure that  the layout of a page fits within this format

workspace

The size of the worksheet in Photoshop this same ratio yet calculated back to a height of 1080 pixels. Therefore the desired dimension in Photoshop is 1479 x 1080 pixels.

This has the consequence that the images you place from Photoshop in Barisco are about 45% larger and will be scaled back by the editor.

There are two reasons for  this.

1. When devices are equipped with a retina display the content will remain sharp and

2. when a page has a regular height of 1080 pixels high the same will  above apply

Note: You may be wondering why a default page in Barisco not set at 1479 x 1080 pixels . The reason is simple: when adding other content using the editor – like shapes and text –  it will not be inserted  unnecessarily large in the pages.

The layers in your Photoshop file. 

Barisco maintains the same principle as photoshop:  working with layers.

Each layer can be placed in the editor as a separate image. It is therefore important to keep layers separate in Photoshop so you can import the layers at a later stage. This is especially important when you want to animate layers later on.

Text

It is important that text is placed in your project using the text tool in the editor,  so not from an image out of Photoshop.  You can choose to do differently yet be advised that text in images are not read by SEO tools.  Moreover, you run the risk that images of texts will be somewhat blurry.

Exporting layers in Photoshop  for the web.

If you want to import a layer in Barisco, it is important to be aware of the actual size of the image. Therefore when saving the images use the feature “Save for Web and Device” in Photoshop.

 JPG

If it concerns a  JPG file, the quality of the image tuned down to 50% in most cases. This decreases the weight of the picture significantly and improves the  loading the live page significantly.

JPG

 

PNG 24

If it is a PNG (an image with transparent areas) then the file size will be automatically determined by Photoshop. PNG are generally heavier than JPG, and it is therefore important to keep the transparent area within the PNG  as small as possible and to keep the image as light as possible.  The selected format of the PNG in Photoshop should be PNG 24.

Hence, each layer should therefore be cut out and stored separately. The separate layers / images can then be uploaded in Barisco. 1 in time It is also possible to drag and drop the images one for one from your worksheet eg bridge in the Barisco library.

PNG-24