Tutorial: How to Adapt a Photoshop Template in Lubith


Published on

In this step-by-step tutorial we will show you how to transform a Photoshop template in Lubith and make the proper adjustments for future WordPress theming.

Published in: Business, Art & Photos, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tutorial: How to Adapt a Photoshop Template in Lubith

  1. 1. If you want to learn how a a Photoshop theme can be adjusted in Lubith, watch thisstep-by-step tutorial.In the end, the overall theme will look like this: Click here and learn more!
  2. 2. 1. Open the template inPhotoshop.Now the construction of the layout needs to beestimated. Go to Layers – notice how eachcomponent of the structure is displayed? We haveto extract each element and adjust it in Lubith. So,one thing at a time:SlicingSelect the slice tool from the toolbar. Right click onit. You can notice that it hides two other tools - crooptool and slice select tool. Photoshop mightautomatically draw some slices around your layout,but you will need to resize some of them and makeseveral more along the way.
  3. 3. 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.
  4. 4. Making the background slice:
  5. 5. Save for Web & DevicesAfter that access File –Save for Web &Devices. Set Preset –PNG 24.It is the best image fileformat to make use of forthe web. Each timeselect transparency, incase it should behandled by the images.On the image preview,make sure that the sliceyou wish to export isselected. On the drop-down menu, selectSelected Slices, andthen Save.
  6. 6. Acces your Lubith account.Click on the body of the layout.From Background-UploadImage the image you just savedhas to be uploaded.Click the Repeat Imagehorizontally and verticallycassettes in Image position.From Photoshop, right clickwith the select slice tool theslice you created in thebackground and delete it. It isno longer needed.
  7. 7. 3. The main header, content and footerIn 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.
  8. 8. 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:
  9. 9. When you generate the slices, keep in mind that each portioncontained 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 selectmultiple slices to save, press down Shift then click on each slice.
  10. 10. 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.
  11. 11. 4. The entry header, footer and contentFrom the contentlayers folder, only thepattern, entry header,entry content, entryfooter, and butterflylayers have to be setvisible. Make surethat no other layer inthe main contentarea is visible.- A slice is madecontaining the entryheader. Make surethat you go beyondthe bottom borderwith a few pixels.
  12. 12. - Like in the maincontent, for theentry content also itis sufficient to slice apiece of minimalheight out of theentry content layer inPhotoshop.The image will repeatitself vertically inLubith - in this wayyour posts will notremain withoutbackground, nomatter how lengthythey are.- For the entry footermake a slice similarto the one of theentry header.Change their nameand export the slices.
  13. 13. 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.
  14. 14. PaddingNow you canobserve thatthe text is abit off.From Tools– Paddinghandle thetext insidethe entrycontent field.Center thetext in theentry title.
  15. 15. 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.
  16. 16. For the site’s menubackground, set visiblejust the background layerfrom the buttons layersfolder. 6. ButtonsGenerate a slicecontaining it. Change itsname, save it and uploadit in the site’s menubackground.For each button’sbackground, only thebutton 4 layer is madevisible, from the samelayers folder. Create aslice with it, change itsname and export it.
  17. 17. In Lubith:Set the backgroundtransparent for eachNormal, Over andPressed button.Upload therespective slice foreach of them.Determine centeralignment bothvertically andhorizontally. Do notrepeat them.Move and resize thebuttons using thegreen and orangeknobs, so that theyfit properly.
  18. 18. In Lubith, select the website’s title. From Type- Text Style, La Belle Aurore font is7. Fonts 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.
  19. 19. 8. ColorsIn order to use the same colors as in the Photoshoptemplate, each layer containing text needs to be Go to Lubith, select theselected and then, with the eyedropper tool, click onthe text. website’s title, and paste the values in the Type – Text ColorDo this for the site’s title, for example. The RGB cassettes. Repeat theeyedropper tool will assign the color used for that text.From the Color Panel, copy each of the three RGB process for any elementvalues. containing text.