Rasterize the layer (click Layer > Rasterize > Layer, from the Menu, or right-click on the layer and select Rasterize Layer). Now the rounded rectangle should look like this (click on the image to view it full size):ī) Duplicate the rectangle created before or create a new one and fill it with the color #3ac6ea. Gradient Overlay (#ffffff to transparent) Create the rounded rectangle.Īfter creating the rectangle, apply these layer styles to the rectangle’s layer: Set the rectangle size to 500 x 240 pixels and the radius to 20 pixels. Apply the pattern (add a Pattern Overlay style) to the background layer with these parameters:Īfter applying these settings the background should look like this (click on the image to view it full size):Ī) Select the Rounded Rectangle Tool. Open it in Photoshop and then click Edit > Define Pattern, from the Menu. Download this image to use as a pattern for the background. Setting up the document and background:Ĭreate a new project with a resolution of 800 x 600 pixels.Ĭreate a new layer to use as background and fill it with the color #eeeeee. ![]() In the second part, which I’ll publish soon, I’ll code the design in HTML and CSS for making it a fully functional login page. Here is the final result (click on the image to view it full size): You can download the PSD file at the end of this article. ![]() This is the first part of the tutorial and I will show you step by step how to design the login form in Photoshop. In this tutorial I’m going to show you how to create a clean Web 2.0 login form.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |