Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[Tutorial] How to use the Slice tool for web pages & elements

#1
How to use the Slice tool for web pages & elements
In this tutorial, I am going to be outlining the process of slicing. What you will learn:
- How to slice elements you want.
- How to export your design in HTML.
- How to get element's working.

1. Design your website!
First of all, you need to create a design in photoshop. This can be a full web page or just some elements. I have chosen some elements I quickly designed earlier today.

2. Slicing your design.
Now, you need to slice your design into sections. I recommend slicing each different section, as this makes it much easier later on whilst editing.
The slice tool is found when you Right Click the crop tool.
To slice elements, simple drag the tool over the section you want, as if you were placing a shape.
[Image: 885a43516066446155b0b6f4409829f8.png]
Here is what my design looked like once I had sliced all my elements. http://speedcap.net/sharing/files/73/ad/...4736a4.png

3. Getting your design ready.
Once your design has been sliced, you need to get the code. To do this, goto: "File --> 'Save for Web'"
Check all the slices are correct. Choose a pre-set export, I would recommend  PNG-24 for the best quality.
Once you have correctly configured your export, it should look something along the lines of this: http://speedcap.net/sharing/files/64/4b/...d4e25d.png
Once done, click "Preview" - This will open a page on your internet browser with the exported design & the code you need to make this happen.
Check it looks correct, and move on.

4. Export it!
Back on photoshop, click "Save". You need to give it a name, then make sure the format say "HTML and Images", Create a new folder with any name, open it and click save again.
This will create a folder called images and create the HTML file, if you open the html document, you webpage is done!

Then go on to edit in the elements for your design!
[Image: forumonic-bar.png]...............[Image: xige-logo-png-blue-sml.png]
Latest snapshots: Postbit Design - Multi Login Modal (1) - Responsive Pollbar
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [Tutorial] Mega Amp Install and tutorial SpookyZalost 0 1,382 August 31st, 2018 at 1:18 PM
Last Post: SpookyZalost
  [Tutorial] How to use the Slice tool for web pages & elements Harry K. 0 2,811 November 27th, 2014 at 6:17 PM
Last Post: Harry K.



Users browsing this thread: 1 Guest(s)

Makestation Theme/Design Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2020
Forum design by Makestation Team © 2020
Saturn-Moon.com - a modern day time capsule | Makestation Ajax Chat Hosting