Click here and learn more!

If you want to learn how a a Photoshop theme can be adjusted in Lubith, watch this step-by-step tutorial.

In the end, the overall theme will look like this:

1. Open the template in Photoshop.

Now the construction of the layout needs to be estimated. Go to Layers – notice how each component of the structure is displayed? We have to extract each element and adjust it in Lubith. So, one thing at a time:

Slicing

Select the slice tool from the toolbar. Right click on it. You can notice that it hides two other tools - croop tool and slice select tool. Photoshop might automatically draw some slices around your layout, but you will need to resize some of them and make several more along the way.

2. First, the background

The background is in fact made up of a smaller image that repeats itself. By using the eye icon from Layers, set the visibility of the layers - click on the icon and set visible only the background layer. There, only the background remains.

A fragment needs to be chosen from the background - do this in the top left corner. Double click on that slice, using the slice select tool. Rename it “background”, click Ok.

Making the background slice:

Save for Web & Devices

After that access File – Save for Web & Devices. Set Preset – PNG 24.

It is the best image file format to make use of for the web. Each time select transparency, in case it should be handled by the images.

On the image preview, make sure that the slice you wish to export is selected. On the drop-down menu, select Selected Slices, and then Save.

Acces your Lubith account.

Click on the body of the layout. From Background-Upload Image the image you just saved has to be uploaded.

Click the Repeat Image horizontally and vertically cassettes in Image position.

From Photoshop, right click with the select slice tool the slice you created in the background and delete it. It is no longer needed.

3. The main header, content and footer

In order for the proper slices to be created, enclosing each component of the theme, several layers need to be made visible, and others, concealed, like this:

- from the main header layers folder, set visible the woman, tape, pattern and header layers;

- conceal the entire buttons layers folder;

- set visible the entire main footer layers folder;

- from the sidebar layers folder, set visible the background layer alone;

- the entry background and content background layers need to be made visible from the content layers folder;

- conceal any other layer.

A slice with each element has to be generated. Make a slice enclosing the main header, main content and main

footer, with the select slice tool, as follows:

When you generate the slices, keep in mind that each portion contained by them need to come with a few pixels gap on each side, beyond their margins.

- The header slice needs to go at the bottom over the main content portion, enough to include the top margins of the content, entry and sidebar backgrounds, with their round corners.

- For the main content it is enough to cut out a portion of minimal height – in Lubith, the image will be repeated vertically so that the main content stretches out dynamically according to the amount of data of each page of your site.

In this way, your pages will not remain without background, no matter how much information is stored by them. Plus, they will load more rapidly.

- The bottom margins of the main footer together with their round corners need to be contained by the main footer slice.

Change their name and export them like you did with the background slice. To select multiple slices to save, press down Shift then click on each slice.

Go to Lubith.

Click on the main container. Go to Background and set it transparent.

- Select the main header. Go to Background – Clear image and then Upload Image. Select from your computer the main-header.png.

Go to Background – Image Position. The header should be centered horizontally and with vertical alignment at the bottom. Do not repeat the image.

- Select the main container. Into its background, upload the main-content.png image. It should be horizontally centered, aligned vertically at the top and vertically repeatable.

- Click on the main footer. Upload the main-footer.png file to its background. Determine its horizontal alignment at the center, vertical alignment at the top. The image must not repeat itself.

4. The entry header, footer and content

From the content layers folder, only the pattern, entry header, entry content, entry footer, and butterfly layers have to be set visible. Make sure that no other layer in the main content area is visible.

- A slice is made containing the entry header. Make sure that you go beyond the bottom border with a few pixels.

- Like in the main content, for the entry content also it is sufficient to slice a piece of minimal height out of the entry content layer in Photoshop.

The image will repeat itself vertically in Lubith - in this way your posts will not remain without background, no matter how lengthy they are.

- For the entry footer make a slice similar to the one of the entry header.

Change their name and export the slices.

In Lubith:

The Meta data and Post Utility are removed from Tools -> Add/ Remove.

- Click on the entry header and upload the entry-header.png to its background. Center it horizontally and align it vertically at the bottom. The image should repeat.

- To the entry content’s background, upload the entry-content.png slice . It has to be horizontally centered and vertically aligned at the top. Repeat it vertically.

- Upload the entry-footer.png image to the entry footer’s background in Lubith. Set vertical alignment at the top and center the image horizontally.

In order to make the elements to fit right, drag the green and orange knobs, move and resize the elements until there is a correct display of backgrounds.

Padding

Now you can observe that the text is a bit off.

From Tools – Padding handle the text inside the entry content field. Center the text in the entry title.

5. The widget container, header, content and footer

From the sidebar layers folder, make visible only the header, content, footer and ball layers.

Retake the stages for the entry header, content and footer. The small orange ball hast to be enclosed in the footer. Modify the name and save the slices.

In Lubith, select each segment of the widget at a time and upload the images. Specify the same kind of alignment as applied in the entry section. Repeat vertically just the widget-content.png image. Arrange padding.

6. ButtonsFor the site’s menu background, set visible just the background layer from the buttons layers folder.

Generate a slice containing it. Change its name, save it and upload it in the site’s menu background.

For each button’s background, only the button 4 layer is made visible, from the same layers folder. Create a slice with it, change its name and export it.

In Lubith:Set the background transparent for each Normal, Over and Pressed button. Upload the respective slice for each of them.

Determine center alignment both vertically and horizontally. Do not repeat them.

Move and resize the buttons using the green and orange knobs, so that they fit properly.

7. FontsIn Lubith, select the website’s title. From Type- Text Style, La Belle Aurore font is employed.

The same thing is made for the entry title and subtitle and widget title (the website’s description is concealed using the Add/Remove tool).

From Type – Text Style – Properties, resize the fonts.

Drag the titles with the orange knob and place them fittingly. Set padding if necessary.

For the buttons the font used is Amatic SC. Resize the font. Center the text.

For entry content and widget content, the font employed is Voltaire. Change the size and center the text.

8. ColorsIn order to use the same colors as in the Photoshop template, each layer containing text needs to be selected and then, with the eyedropper tool, click on the text.

Do this for the site’s title, for example. The eyedropper tool will assign the color used for that text. From the Color Panel, copy each of the three RGB values.

Go to Lubith, select the website’s title, and paste the values in the Type – Text Color RGB cassettes. Repeat the process for any element containing text.

AND YOU'RE DONE!

NOW YOU UNDERSTAND HOW A A PHOTOSHOP TEMPLATE IS ADAPTED IN LUBITH. IF YOU WISH, FURTHER CHANGES CAN BE GENERATED.

ASIDE FROM THAT, YOU CAN EASILY UPLOAD AND ADAPT PSD RESOURCES LIKE LOGOS, BUTTONS, HEADERS ETC. BY EMPLOYING THE PROCEDURES FROM THIS TUTORIAL.