25 Useful Tutorials Show How to Convert PSD to HTML & CSS Step by Step????Now you have mastered the photoshop technique and designed a perfect PSD Files. Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site.
This tutorial is based on the dark, clean website design for Leaflet, an iPhone app designed for Envato marketplace publishers. Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White. Next we're going to create a spotlight that will help add focus to the top area of our page. Select the Brush Tool (B) and change the Master Diameter to 400px and set the Hardness to 0%. Change your Foreground Color Swatch to "FFFFFF" (white) and create a circle near the top of the canvas using the Brush tool.
Position our first iPhone touching the left guide and around 100px from the top of the canvas.
An easy way to do this is to expand the "iPhone" folder in our layers panel then click on the "SCREEN CONTENTS" folder.
Create another text box to the right and add 2 lines of text (ex: "Download now on the App Store").
Finally, grab the Custom Shape Tool (U) and choose an arrow shape (I'm using a default shape called "Arrow 9").
Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the left guide to the right guide, then change the line's color to "000000" (black).
In the section below the line separator we've just created, we're going to be adding two columns, for screenshots and a list of features. Starting with screenshots, begin by importing your first screenshot by selecting File > Place. Select the layer in the Layers Panel and click the "Add Mask" button twice to add a Vector Mask.
Now select the Rounded Rectangle Tool (U) and change the radius to 6px and create a rectangle over the screenshot with the size of 175x120px. Repeat the above steps for all of your screenshots and give them 35px of space between each other.
To separate our screenshots from the features, draw a 1px line from the top of the first screenshot to the bottom of the last screenshot that is around 55px from the screenshots. Now select the Ellipse Tool (U) and create a circle that is 9px in diameter to the left of the first feature. Next, move the duplicated layer down 28px (the amount of Leading we applied to the feature list). Moving on to the footer portion of our page, we'll once again apply the two-line technique we applied earlier in Step 9 to add some separation.
As you may notice our boxes are uneven and not aligned properly, don't worry, we'll be fixing this in the next step.
To fix our alignment issues, begin by placing the four text boxes we've created above into a folder and name it "Footer".


First, position the first text box 55px from the left guide and the last text box touch the right guide.
Select the Ellipse Tool (U) and create a circle that is 36px in diameter next to our first text box.
Next, right-click on the thumbnail of the Twitter icon in the Layers Panel and click Select Pixels.
Delete the imported Twitter Icon by selecting it in the Layers panel and click or drag it to the Trash icon.
For the rest of the icons shown above, repeat the steps in Step 18 by using other icons or with custom shapes in photoshop. To add a finishing touch to our footer links, lets give them a hit of color to help them stand out. Using the Horizontal Text Tool (T) highlight a part of the text in each text box and change it's color to "83b546".
Eric AlliEric Alli, also known as two2twelve, is a web designer, programmer and mobile developer.
Colors give life and meaning to your design and are important elements of symbolic communication in design. In an effort to post original, useful and interesting content, CreatiWittyBlog tries to satisfy its valued users as well as the God of SEO. Eric Alli of Trilab Media helped design and code the site, so he'll be walking us through the step by step tutorial. For this tutorial I will be using the iPhone graphic from the superb Vector iPhone 4 PSD from Psdtuts+ which can be downloaded for free here.
I'm using a logo I've previously made, you can simply use text or insert your own logo here. Select the Horizontal Type Tool (T) and draw a rectangle between the center guide and the right guide.
Double-click the right side of the layer in the Layers Panel and use the below image for reference.
Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the top of the button to the bottom, then change the line's color to "FFFFFF" (white). Create a small arrow 10px in width inside the circle and change the color to "FFFFFF" (white). Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle that overlaps our download button and is 52px in height and any width greater then 100px. For this we're going to create two separate text boxes since the content within requires different styling. For this, we'll use the two-line technique we applied earlier on the download button to give the separator an "inset" look.
Click on the Align vertical centers button, then click Distribute horizontal centers button from the Move toolbar. Once imported, resize the icon to 28% width and height, position it over our circle, then click enter.
Eric is one of the founders of TriLab Media and is an active contributor to the Envato network with over 900 sales at ThemeForest!


Fill the background with light gray color (#CCCCCC).2 Make a guide in the center of our document. PSD to HTML conversion is an important skill that has been growing in popularity over these years. Whether it is print, web or graphic designing, colors are important to define the theme and essence of your design. Whether you're looking to use a similar design for your own projects or just want to see how it was made, there are plenty of excellent tricks and techniques in this tutorial that you'll be able to pick up on. Here, give the group a recognizable name (I used "iPhone"), set the destination to "Leaflet" (or whatever it is you named your PSD for this tutorial), and click OK.
Align it so the left side of the button touches the center guide and it's 45px below the text. Change the color of this duplicated line to #000000 (black) and change it's opacity to 10%. Change the color of this duplicated line to "FFFFFF" (white) and change it's opacity to 10%.
Resize the screenshot to 80% width and height, then move the screenshot near the left guide and click Enter. In order to make the best use of colors in your web or graphic designing it is imperative to be fluent in using the color in appropriate propositions.
We'll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs. Use the Free Transform option, Edit > Free Transform (Ctrl + T), to transform the object and to bring up the Transform Controls. There are numerous photoshop tuts that let you know how to get the best out of Adobe Photoshop. Following however, are some tutorials that will enhance your skills to use colors with exact blend. If you are tutorial writer or think you also have a tutorial describing the use of colors write us and we would love to showcase it in this post. Using the Rectangular Marquee Tool (M) again, create a box around 10px high that goes across the entire canvas. Create a 1px selection using the Rectangular Marquee Tool on the right of the box, and fill it in with black (#000000). Create another 1px selection at the bottom of the box and fill it in with black (#000000) as well.58 Create a 1px selection on the top edge of the box, and then fill it in with a dark gray color (#999999).
Tnkx for sharing !Saya May 28 2012Black and whites are the most popular background that web designers use. These dark website design samples look more appealing to users to attract them visiting on your site. Very smart indeed!paveya Jun 29 2012very beautiful web designs I have ever seen while i’m searching on web.



Free email address generator software india
Presentation du site web xxl
Text a phone from email att iphone
Promo code for old navy may 2013




Comments to «How to create a dark and sleek web design from photoshop»

  1. SCARPION writes:
    Appropriate guy will adore me unconditionally.
  2. X5_Oglan writes:
    Negative and so we'll show you?how to overcome a Men's Rights Activist And A Feminist Debate WARNING: I will.


2015 Make video presentation adobe premiere pro | Powered by WordPress