You can name this folder whatever you like (make it nice and obvious), as this directory will never actually be uploaded to a server - but its contents will. Your website (including all HTML files, images, scripts, CSS files and anything else which appears in or runs on the site) resides in a single folder. Time to create your website directoryĪs we edge ever closer to completing the design phase and start using Dreamweaver, we need to make some simple preparations. In brief then, if you need to Crop rather than reduce the canvas size, first flatten the document so that everything stays where it should. However, if you crop a layered document, any effects that you crop into will re-render themselves the the edge of the document, thus changing the appearance of your visual. You could use the Crop tool, but I find there’s less margin for error by specifying the pixel heights and widths in Canvas Size… Also, if you reduce the canvas size on a layered document, any effects that have been applied like drop shadows will remain exactly where they are, even if they are no longer on the pasteboard. Then I flatten it, and use the Canvas Size option to crop it. When slicing up a Photoshop file I first make a copy of the original document. Reduce Canvas Size on layered documents rather than Cropping them I like keeping to nice round numbers, but you can use what works best for your design - just make sure you make a note of the individual image sizes for later use. Eventually these sliced images will fit into ‘ DIV tags’ (container boxes) which will be exactly the same size - to the pixel. It’s important to make sure that the slices are pixel-perfect.
This article explains what anti-aliasing is as shown in the blown up area of figure 1. I’ve also removed the menu tabs - I’ll recreate these separately. The only text which remains (in the header) is text created as an image which is a permanent part of the design and won’t be recreated in HTML. The layout above shows just what’ll appear in the background of the website. By ‘fluid’ elements, I mean elements that will change page by page, resulting in different positioning and size. This will vary depending on the design, but generally if the website has a menu bar across the top, a header above, a main area for content and a footer, four blocks will do ( figure 1).įigure 1 - The Photoshop slices made clearerĪbove you’ll see that I’ve removed all the elements which will be ‘fluid’ and kept just the background design. When working on a new website design, I tend to slice up the background into four main blocks.
#Web slices sites how to
How to Slice up a Photoshop Visual into Background Images Flatten the background image and crop to pixel-perfect sizes Work out what the main blocks will be If you’re considering a new online project, simply look no further.Taking the layered Photoshop file, the main slices (the header, footer, navigation panel and main content tile) will be cropped and saved to a new images directory in the new website folder. We could not recommend Justin and Thin Slice Digital enough.
Jonathan Finneran - Derryglad Folk & Heritage Museum We’ve been so impressed we would highly recommend them to any other tourism attraction businesses looking to modernise their online offering. All timeframes were met and any support queries or issues have been dealt with very efficiently within a matter of hours. We’ve been really impressed with Justin and Thin Slice Digital for their knowledge, attention to detail, and management of the build.Daniel Curley - Rathcroghan Visitor Centre I would strongly recommend Thin Slice Digital and its service to our colleagues in the tourism industry.
This would not have been achieved without Thin Slice Digital and its dedicated and friendly service. …We now have an exceptionally attractive and fully functional website to meet all of our needs as a tourism enterprise, which also performs very keenly in attracting new interest and visitors to our services.We would recommend Thin Slice Digital to anyone who wishes to avail of a professional, specialised and consumer-driven platform. …Thanks to Thin Slice Digital, the outcome was a user-centred and SEO optimised website that was tailored to the needs of Viking Tours and its tourism affiliates.
0 kommentar(er)
