Photoshop products are better known for displaying information visually. The onset of web as prominent form of product marketing has rendered Photoshop unusable, at least in their raw form. They’re either too static, for dynamic web pages, or takes too much time in editing. For this, front-end web developers are adopting to using to coding the images to Html and CSS.
Reasons why this works for web content display.
The two formats are versatile, feature-rich and compatible across multiple browsers. For its part, Hypertext Markup Language is flexible and can integrated into most of the leading CMS. Cascading Style Sheets, which are part of Html, help to enhance the site formatting. With Css, you can incorporate features like rounded corners, gradient variations and shadow effects into content. Alternatively, you can break the psd files into manageable bits and use Html to order individual pieces. Css helps add a touch of style. The small tidbits are the slice psd files.
Issues that manifest by using Photoshop displays on web pages.
Photoshop products are usually saved as a psd extension. Before these files can be made use of on the web, however, they require detailed editing and at times even an overhaul in design. As a result, proficiency in Photoshop use and availability of third party editing softwares is a must. Still, the final products may not be compatible across multiple browser platforms.
Additionally, editing softwares are priced fairly high. Now, couple this with the delay that comes with complex editing process and browser compatibility issues, and the need to find a way of converting Photoshop formats to Html and Css code becomes compelling. To your advantage, the listed instructions below guides you to do this with ease. Read on.
How to convert Photoshop documents to hard coded Html and Css.
Converting Photoshop images to Css and Html codes isn’t a costly affair. For starters, you’ll require to have a grasp of Html tags and the basic principles that drives Css. Then, deconstruct your psd images and use Css basics to replicate the images into a code. This includes, rendering image shadows through Css property windows.
Do this for each particular aspect of your image. Save the final work as a web page. This appends an Html extension to the file. If you’re short on time, though, you can seek the services of proficient webmasters who’d just be as perfect. You’ll only need to cnovert your psd files to a zip file and send them over.
In summary, with the web soaring on as the main marketing tool for large viewership, formatting the content rightly is utmost important. While Photoshop visual images could have been a great marketing tool years ago, it’s been rendered ineffectual in an online world that savors freshness of content, usability and share ability. You don’t have to discard your Psd files though, with a basic knowledge as outlined above, you can make your old files just as fresh.
Using Adobe Photoshop to design the layout and mock-up of a clean,beautiful & pixel-perfect site from scratch is quite easy. You basically use Photoshop Shape and Text – plus a few other Photoshop tools – for this.
I used`PhotoshopCS5 on Windows, but you can also use any latest version you have. The other resources you need include Icons from streamlineicons.com; and Lato and Honey-Script fonts.
Let us get started!
First, change 2 settings:
(i) Global-lighting: go`to Layer > Layer Style > Global Light and change Angle to 90. Click OK.
(ii) Snap to PIxels: always make sure the Snap to PIxel option is checked before starting a new project to get pixel-perfect shapes.
For Photoshop CS5, activate Rectangle-Tool by`pressing U, then clicking Geometry Options arrow on the option bar and then checking Snap-to-Pixels.
For PhotoshopCS6, go`to Edit>Preferences>General, then check Snap-Vector-Tools and Transforms to Pixel-Grid.
How to Set Up the Site Document:
Go to File > New or hit Ctrl+N to create new file.
Set canvas to 1500x2500px.Resolution:72 & Color-Mode to RGB.
Then define your work-area by addition of guides to canvas. Go to View > New Guide.
First guide: set Orientation to Vertical & position to 210px.
Second guide: Orientation-Vertical; position-1290px.
To have an outlined & centered space for your work area, press Ctrl+R to show rulers, then drag 2 extra vertical guides & placethem 10px from innerside of the other 2 guides you added before.
Groups and Layers Organization:
Right-click on first group & select Group Properties from the menu. Rename group to Header and choose color e.g. red.
The same procedure is done to also create the other groups i.e. Billboard; Body & Footer.
Select the Header group & then press U to activate Rectangle Tool. Then draw 1500x100px-rectangle. Fill it with color #f4c995. Reduce opacity to 30%. You can then add your desired logo.
Select Billboard group; then draw 1500x600px-rectangle using Rectangle Tool. Fill it with color #eca151 & rename it Billboard_Base.
To add images to Billboard section, go to File > Place & select the image. Rename to Base_Image & place it right above the Billboard_Base layer.
Designing the Services Section:
To create service-icons, create new group & rename it Services. Draw 820x4px-rectangle & fill it with color #575451. Align to center.
Use Ellipse Tool to draw 3 circles (160by160px each).Fill them with color #575451 & align them horizontally and vertically, grouping each of them on its own-group. Rename groups to S1, S2, S3.
Then activate move tool-V & select the circles layers. Click onDistribute Horizontal Centers icon so as to get an equal space between them.
Then place your own favorite icons inside them. I used the amazing icons-by-streamlineicons.com; or you may buy yours or download free samples.
I am going to use two groups – Call_To_Action & Sign_Up_Btn – inside the Body group to illustrate what can come in this group.
Create new`group inside the Body group. Name it Call_To_Action.
Rectangle: 1500x460px; Color:#e7f7f7.
Place an image of your liking on top ofrectangle & align it. Add your Call_To_Action caption.
Draw 220x50px-rounded-rectangle & rename the shape-layer to Sign_Up_Btn. Fill it with color #eca151.
Right-click the Sign_Up_Btn layer; choose Blending Option from the appearing menu. Add text to button.
Select Footer group from layers panel. Draw 1500x415px-rectangle. Use color #393939.
Place your logo in the document center then select Horizontal Type Tool by pressing T. Add navigation menu as well as copyright text.
Finally, ensure that all layers & groups are organized. Use CrapTool from toolbar to crop the document and remove unwanted whitespace.
And HURRAY you have your site design!