<p> Creating a web app admin user interface in Photoshop can seem like a daunting task, but with the right tools and techniques, it is possible to create a sleek and intuitive design. The first step in creating an admin user interface is to identify the key features that will be included in the design. This might include things like menus, search bars, buttons, and forms.</p><p>Once you have identified the key features of your admin user interface, it&#8217;s time to start designing. One of the most important aspects of any web app design is usability. Make sure that your design is intuitive and easy to navigate for users of all skill levels. This might mean using familiar icons and labels for common functions or grouping related functions together.</p><p>Another important aspect of creating an admin user interface in Photoshop is keeping your design consistent across different pages or sections of your web app.</p><h2 class="wp-block-heading">Web App Admin User Interface in Photoshop</h2><p>Web applications are popular thanks to the ubiquity of web browsers. the power to update and maintain web applications without distributing and installing software on potentially thousands of client computers may be a key reason for their popularity. </p><p> A modern and straightforward to use Admin interface is the key to the success of web applications. We are getting to show you ways to make an internet Application Admin user interface in Photoshop. in order that you&#8217;ll easily create your own admin interface for your web applications. outcome This Web Application Admin interface is what we are close to making.</p><p><span style="color: #ff0000;"><strong>Final Result</strong></span> This Web Application Admin User Interface is what we are about to make. You can click on the image to see a full-scale version. </p><figure class="wp-block-image size-large"><a href="http://maxcdn.webappers.com/img/2009/06/admin-interface/final.jpg" target="_blank" rel="noopener noreferrer"><img src="http://blog.visibledev.net/wp-content/uploads/2020/03/final480-1024x576.jpg" alt="Web App Admin User Interface in Photoshop" class="wp-image-1672"/></a></figure><p><span style="color: #ff0000;"><strong>Background</strong></span><strong> Step 1</strong> Create a new document in <a href="http://blog.visibledev.net/category/tutorials/adobe-photoshop/">Photoshop</a> that is 1200×1112px. Fill the background with black (<strong>#000000</strong>). Using a Linear Gradient and a dark gray (<strong>#333333</strong>), click and drag it from the top down. You want your gradient to end about halfway down the document. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/01-1.jpg" alt="" class="wp-image-2081"/></figure></div><p><span style="color: #ff0000;"><strong>Header</strong></span><strong> </strong><strong>Step 2</strong> Using the marquee tool we are going to make a 1200×77px box. To do this click on the marquee tool and change the style settings to Fixed Size. Change the size to 1200×77px and click on the top left corner of the document for a starting point. Fill with <strong>#33CCCC</strong>. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/02-1.jpg" alt="" class="wp-image-2082"/></figure></div><p><strong>Step 3</strong>
Now we are going to add a Gradient Overlay to our header. Click on the first icon from the left on the bottom of the layers palette, and click on Gradient Overlay.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/03.jpg" alt="" class="wp-image-2083"/></figure></div><p><strong>Step 4</strong>
Using the line tool, create a 5px line going across the entire document. This is going to go at the bottom of our header. Change the color to <strong>#CCCCCC</strong>.

Now we are going to create a bevel look to it. Click on the Single Row Marquee Tool, and create a line on the top of our 5px line we just created. Fill that selected area with <strong>#FFFFFF</strong>. Create another line at the bottom and fill with <strong>#999999</strong>

Finally add another Single Row Marquee to the very top of the document using <strong>#009999</strong>.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/04.jpg" alt="" class="wp-image-2084"/></figure></div><p><strong>Step 5</strong> We want to create a 950px box in the middle of the document, which we are going to build our interface around. To do this first click on the background layer then go to <strong>View>Snap</strong> and make sure it is checked. Now click and drag a guide out from the ruler to the middle of the document. When you get to the middle the guide should snap into place. </p><p>Now using the Square Marquee tool create a new layer (<strong>Control + Shift + N</strong>), and create a square that is 950px wide and 1112px tall. Fill with <strong>#FFFFFF</strong>. When you use the transform tool (<strong>Control + T</strong>) there will be anchor that come up on the corners and in the middle, line up the top and bottom middle anchor points with the guide. </p><p>Take that guide that you created and drag it over to the right side of the box we created (it should snap into place). Also, click and drag another guide to the left of the box. Now click and drag the box layer into the trash (last icon on the right at the bottom of the layers palette). </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/05.jpg" alt="" class="wp-image-2085"/></figure></div><p><strong>Step 6</strong> While we are at it, we are going to add some more guides to get the basic layout of our design. Using your square marquee tool create a box 250×1112px so that the left edge is on the left guide. Click and drag a guide out to the right side of the selected area. Holding down shift, move the box over to the left once with the left arrow. </p><p>Put a guide on the right side of the selection. Hold shift again, and move the box over to the right twice. Put a guide on the left side of the selection. Move the box over two more times, holding shift, and put another guide on the right side of the box. Now we are going to make another box that is 950×113px. Put it at the very top and put a guide at the bottom of the box. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/06.jpg" alt="" class="wp-image-2086"/></figure></div><p><strong>Step 7</strong>
Before we go any further we want to start organizing our layers. So create a new folder (third icon from the left at the bottom of the layers palette) and call it “Header”

Using the rounded rectangle tool, create a box with a radius of 10px that goes from the left guide to the fourth guide in, and down to the guide that goes across. Fill with <strong>#CCCCCC</strong>.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/07.jpg" alt="" class="wp-image-2087"/></figure></div><p><strong>Step 8</strong> Using the layer styles (first icon at the bottom of the layers palette) click on Inner Shadow. This will give us a dark look on the edges. Next, we are going to add a Bevel and Emboss. This will make our box pop, kind of like we did with border on the header. Finally, we are going to add a Gradient Overlay. This will give us a dark edge on the bottom of our box. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/08-471x1024.jpg" alt="" class="wp-image-2088"/></figure></div><p><strong>Step 9</strong>
Now you can add in your logo, and give it the same Bevel and Emboss as the box. You can do this by dragging the style from the box layer to the logo layer.

To give it an extra embossed look, you can first duplicate your logo with <strong>Control + J</strong>. Control and click on the logo and fill it with <strong>#CCCCCC</strong>. Move that layer down two spaces.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/09.jpg" alt="" class="wp-image-2089"/></figure></div><p><strong>Step 10</strong> We are going to give the box a metal look to it. To do this we are going to create a new layer, then create a box using the marquee tool and fill it with black. The size doesn’t really matter, as long as it is bigger than our box. Make sure your foreground and background colors are black and white, then go to <strong>Filter>Noise>Add Noise</strong>. Change your settings to something like what I have. Using <strong>Control + U</strong> drop the saturation all the way down to -100. Do <strong>Control + D</strong> to deselect the area, then go to <strong>Filter>Blur>Motion Blur</strong>. </p><p>Move the metal we are creating over the original box. Then do <strong>Control + click</strong> on the original box layer, the do <strong>Control + Shift + I</strong> to get the inverse and delete. Change the blend mode to Soft Light. Open up the levels menu with <strong>Control + L</strong> and bring in the left and right arrows towards the edges of the graph. Then drop the Opacity way down until you get something you like. I put mine at 20%. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/10-300x1024.jpg" alt="" class="wp-image-2091"/></figure></div><p><strong>Step 11</strong> Let’s add some navigation. To do this we are first going to add another guide. Using the square marquee tool create a square that is 120px wide and put the left edge on the last guide on the left side of the document. Drag a guide over to the right of the box. </p><p>In that box we are going to take the Rounded Rectangle Tool and create a box in that area, except make sure that to top of the box, including the rounded corners goes above the header. Create a new folder and call it “Nav”. Change the color of the box to <strong>#33CCCC</strong>, and drag the layer into the folder. Move the folder below the header. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/11.jpg" alt="" class="wp-image-2092"/></figure></div><p><strong>Step 12</strong>
The first button is going to be our “Dashboard” button, so create a new folder inside the “Nav” folder, and call it “Dashboard”.

Now we are going to add some layer styles to our button. So lets add an Inner Glow, and Bevel and Emboss. This will really make our button pop.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/12.jpg" alt="" class="wp-image-2093"/></figure></div><p><strong>Step 13</strong>
Let’s add some text to our button. Use the Type Tool, to type out the word “Dashboard”. I am using the font ITC Franklin Gothic Demi at 16pt. Make sure you make your text box the same width as the navigation button and center the text.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/13.jpg" alt="" class="wp-image-2094"/></figure></div><p><strong>Step 14</strong>
Duplicate the text layer with Control + J and change the color to <strong>#CCCCCC</strong>. Move it down two spaces. This will give us a bevel for the navigation words.

Lastly we are going to add a shadow at the top of our button. To do this Control and click on the button layer to get the selection, then create a new layer with <strong>Control + Shift + N</strong>. Now click on the gradient tool and make sure you have the Linear Gradient selected, as well as black as your foreground. Click and drag a gradient from top to bottom until you get something you like.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/14.jpg" alt="" class="wp-image-2095"/></figure></div><p><strong>Step 15</strong>
Right click on the “Dashboard” folder and click on Duplicate Layer Set. Rename the folder “Users”.

Holding down <strong>Shift</strong>, move the button over 13 spaces. This should put it just off the original button.

Change both the text layers to say “Users” and change the background to <strong>#CCCCCC</strong>.

Repeat this with “Pages” and “Settings”. So you should end up with four buttons total.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/15.jpg" alt="" class="wp-image-2096"/></figure></div><p><strong>Step 16</strong>
Now we are going to add the login information at the right of our webpage.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/16.jpg" alt="" class="wp-image-2097"/></figure></div><p><span style="color: #ff0000;"><strong>Sidebar</strong></span><strong>Step 17</strong> Now it is time to start on the sidebar. First lets start off by taking the Rounded Rectangular Tool, click and drag a square the same width as the logo box and a height something like what I have (it doesn’t have to be a certain height because we are going to mask it off). Make sure the top is resting on the horizontal guide. Fill it with <strong>#FFFFFF</strong> for now. Click on the layer mask (Second icon from the left on the layers palette). </p><p>Click on the square marquee tool and create a square 250×35px and put it on the far left and horizontal guides. Get the inverse selection with <strong>Control + Shift + I</strong> and fill the area with black. This should get rid of the area we don’t need. We are going to add the headline, so using the Type Tool, type out “System Messages”. Move the text to the far left guide then holding down shift, move it over to the right one space. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/17.jpg" alt="" class="wp-image-2098"/></figure></div><p><strong>Step 18</strong>
We are going to add some layer styles to our sidebar head, but before we do that we want to create a new folder and call it “System Messages”.

Now go into the layer styles and add a Bevel and Emboss, also we are going to give it a Gradient overlay.

Go ahead and change the color of the box to <strong>#333333</strong>. Holding down <strong>Shift</strong>, move the box down three times.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/18.jpg" alt="" class="wp-image-2099"/></figure></div><p><strong>Step 19</strong>
Using the Square Marquee tool, create a square, 250×435px. Line it up at the far left and horizontal guides. Create a new layer with <strong>Control + Shift + N</strong> and fill it with <strong>#CCCCCC</strong>.

Add a Bevel and Emboss and holding shift, move the box down seven spaces.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/19.jpg" alt="" class="wp-image-2100"/></figure></div><p><strong>Step 20</strong>
Repeat step 17, change the headline to “To Do List” and put the layers into a new folder called “To Do List”.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/20.jpg" alt="" class="wp-image-2101"/></figure></div><p><strong>Step 21</strong>
We are going to repeat step 19, except the box is going to line up with the left guide and the bottom of the “To Do List” head. Change the height to 340px and move the box down five spaces from that spot.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/21.jpg" alt="" class="wp-image-2102"/></figure></div><p><strong>Step 22</strong>
Now we can start creating the information inside the first sidebar. Let’s start off by grabbing the talk bubble icon. <a href="http://maxcdn.webappers.com/img/2009/06/admin-interface/icons.png" target="_blank" rel="noopener noreferrer">I’ve created a transparent PNG of all the icons so you can use them</a>. Duplicate the “System Messages” headline and change the color to <strong>#333333</strong>. and change it to “Recent Messages”. Put your talk bubble next to the text and line up the icon with the left guide. Hold down shift and move it over one spot.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/22.jpg" alt="" class="wp-image-2103"/></figure></div><p><strong>Step 23</strong> Let’s go in and add a break under the “Recent Messages”. To do this, click on the Line Tool and create a 1px line in between the inner two sidebar guides. Now grab the red “x” icon and set it one <strong>Shift + space</strong> over from the left side of the sidebar. Add some dummy text: “Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.” </p><p>Change the font to Verdana, font size to 10pt and the color to <strong>#333333</strong>. To underline it (because these will be links) highlight the text and open up the text options with <strong>Control + T</strong>, then select the underline option. Put the icon and dummy copy into a folder called “Message 1”. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/23.jpg" alt="" class="wp-image-2104"/></figure></div><p><strong>Step 24</strong>
Repeat step 23, and put the layers in a folder called “Message 2”.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/24.jpg" alt="" class="wp-image-2105"/></figure></div><p><strong>Step 25</strong>
To add the message form we are first going to create a headline. Duplicate the “Recent Messages” folder and replace the talk bubble icon with the talk bubble and the green “+” icon. Hold down shift and move it down fifteen spaces.

Also, duplicate the line break and move it one <strong>shift + space</strong> down from the bottom of the “Created New Message” head.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/25.jpg" alt="" class="wp-image-2106"/></figure></div><p><strong>Step 26</strong>
Now to add the form, create a new folder called “Message Form”. Using the type tool Write out “Subject:”. I’m using ITC Franklin Gothic Demi at 13pt.

Create a 229×30px box using the square marquee tool and fill with <strong>#FFFFFF</strong>.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/26.jpg" alt="" class="wp-image-2107"/></figure></div><p><strong>Step 27</strong>
Now we are going to give the box a bevel. To do this we are going to duplicate the white box with <strong>Control + J</strong>. Control and click on the layer, then fill with <strong>#333333</strong>.

Now make sure you have the marquee tool clicked, and move down and right one space each. Then delete the selected area.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/27.jpg" alt="" class="wp-image-2108"/></figure></div><p><strong>Step 28</strong>
Repeat steps 26 &; 27 except the white box is going to be 229×100px and instead of “Subject:” it is going to say “Message:”.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/28.jpg" alt="" class="wp-image-2109"/></figure></div><p> Step 29 Now we are going to create the “Send” button. Duplicate the “Users” folder from the navigation buttons, and bring it down five spaces below our form. Click and drag the shadow layer and the light gray text layers from the navigation into the trash can. Change the color of the button to <strong>#333333</strong> and the text to <strong>#33CCCC</strong>. Change the text to say “Send”. </p><p>Add a layer mask to the button. Now take your marquee tool and create a box so the bottom of the box is at the bottom of the message form. Move the marquee box down five spaces and fill with black. Move the text down four spaces. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/29.jpg" alt="" class="wp-image-2110"/></figure></div><p><strong>Step 30</strong>
Repeat steps 17-19, except change the box size to 250×336px.

Now for the bottom sidebar, we want to duplicate the two message folders and bring them into our “To Do List” folder. Shift and move the text down four times. Unclick the underline options on the text and replace the “x” icons with the “check” icons.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/30.jpg" alt="" class="wp-image-2111"/></figure></div><p><strong>Step 31</strong>
We are going to add the “To Do” and “Done” tabs at the top of this part of the sidebar. Duplicate the “Send” button folder and change the name to “To Do”. Go into that folder and find the actual button. We are going to go to rotate it 180 degrees.

Bring the tab down to our sidebar and move it down five spaces and rest it on the second guide from the left.
</p><figure class="wp-block-image"><img src="http://maxcdn.webappers.com/img/2009/06/admin-interface/31.jpg" alt=""/></figure><p><strong>Step 32</strong>
Duplicate the “To Do” folder and rename it “Done”. Change the color to #33CCCC and the text to #333333. Hold Shift and move the “Done” button nine times.

Duplicate one of your line breaks and move it so it is resting on the bottom of the tabs.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/32.jpg" alt="" class="wp-image-2112"/></figure></div><p><strong>Step 33</strong>
Duplicate the “Create New Message” folder and rename it “Add New Item”. Change the text to “Add New Item” also. Make sure you duplicate the line break also. Hold down shift and hold this headline down fourteen times.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/33.jpg" alt="" class="wp-image-2113"/></figure></div><p><strong>Step 34</strong>
Duplicate the message part of the form and the send button. Bring them into our “To Do List” folder (minus the “Message:”). Hold down shift and move down two spaces from the line break. Change the button from “Send” to “Add”.

That will do it for our sidebar.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/34.jpg" alt="" class="wp-image-2114"/></figure></div><p><span style="color: #ff0000;"><strong>Main</strong></span><strong>Step 35</strong>
Repeat steps17-19, except instead of a width of 250px make it 670px. Change the headline to “New Form”.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/35.jpg" alt="" class="wp-image-2078"/></figure></div><p><strong>Step 36</strong>
Now add the form to our main section. To do this we are going to repeat steps 26 &; 27. The size of the Subject part of the form is going to be 630×30px. Hold down shift and move the box down five times.

Above the box we are going to create a headline called “Subject” by duplicating the “Subject” from the sidebar.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/36.jpg" alt="" class="wp-image-2077"/></figure></div><p><strong>Step 37</strong>
We are going to add another box for the “Message”. Again, repeat steps 26 &; 27. This box will be 630×260px. Duplicate the “Message:” from the sidebar.

Duplicate the “Send” button from the side bar and line it up with the right side of the box.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/37.jpg" alt="" class="wp-image-2076"/></figure></div><p><strong>Step 38</strong>
Repeat steps 17-19 to get the header and table. The table will be 670×336px.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/38.jpg" alt="" class="wp-image-2075"/></figure></div><p><strong>Step 39</strong>
Now we are going to duplicate the “Add” button from the bottom side bar and bring it over to our “Tables” box. Change the text so it says “Apply”. Line up the button at the bottom right, then hold shift and move the button up one and to the left twice.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/39.jpg" alt="" class="wp-image-2074"/></figure></div><p><strong>Step 40</strong>
Create a new folder called “Names” and we are going to add the first line of the table.

First we are going to add a check box. To do this we are going to repeat steps 26 &; 27, except the box is going to be 12×12px.

Hold down shift and move the check box from the top left corner, over three spaces and down two.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/40.jpg" alt="" class="wp-image-2073"/></figure></div><p><strong>Step 41</strong> Now put any name you want. I’m going to set mine at 15pt with Verdana as the font. Hold down shift and move it over three spaces from the check box. Take the “+” icon and the “x” icon and bring the into our “Tables” folder. Add “Edit” to the “+” icon and “Delete” to the “x” icon. Change the color of the text to <strong>#666666</strong>. Move that whole group over three spaces from the right, holding shift. </p><p>Add the e-mail address in the middle of the name and “Add” with a bold <strong>#CC3333</strong> Verdana. Add a break below the name line. This is going to be the same size as the form in the “New Form” box. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/41.jpg" alt="" class="wp-image-2072"/></figure></div><p><strong>Step 42</strong>
Duplicate the “Name” folder five more times, spreading them out so the last one ends one space above the tabs.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/42.jpg" alt="" class="wp-image-2071"/></figure></div><p><strong>Step 43</strong>
Click on the very top layer, then click on the fourth icon from the left at the bottom of the layers palette. Open up the Photo Filter and change the filter to Sepia.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/43.jpg" alt="" class="wp-image-2070"/></figure></div><p><strong>Step 44</strong>
To create the footer, we are simply going to duplicate the “Header” folder and drag everything to the trash except for the <strong>#CC3333</strong> and white bars. Rotate that folder 180 degrees and bring it all the way down to the bottom of our document.

Add your footer information in the bottom left corner.
</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/44.jpg" alt="" class="wp-image-2069"/></figure></div><p><strong>Step 45</strong> To give the website a grungy look we are going to go and download a texture from Zen Textures (http://www.unsigneddesign.com/film/4.jpg). Bring the texture into our document ad size it so it fits the entire area. Change the blend mode to Soft Light, and drop the opacity down to 50%. Hold down control and click on the background and header for each sidebar and main section, navigation and the green header. </p><p>Get the inverse selection with <strong>Control + Shift + I</strong> and delete. Control and Click on the box around the logo and fill the mask on the texture with black. This will get rid of the texture on that box. Finally we want to get rid of the texture in the gaps between the headers and the <strong>#CCCCCC</strong> background. </p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/45-470x1024.jpg" alt="" class="wp-image-2068"/></figure></div><p><span style="color: #ff0000;"><strong>Final Result</strong></span>
If you followed throgh the tutorial, you should end up with something like this.
</p><div class="wp-block-image"><figure class="aligncenter"><a href="http://www.webappers.com/img/2009/06/admin-interface/final.jpg" target="_blank" rel="noopener noreferrer"><img src="http://www.webappers.com/img/2009/06/admin-interface/final480.jpg" alt=""/></a></figure></div><p> Hope you enjoy this tutorial. Please feel free to leave a comment and tell us your opinion. Would you like more Photoshop tutorials like this? Don&#8217;t forget to check <a href="http://www.webappers.com" target="_blank" rel="noreferrer noopener nofollow">webappers&#8217;s website</a> for more tutorials like this.</p><div class="wp-block-button is-style-fill" style="text-align:center;"><a class="wp-block-button__link has-text-color has-very-light-gray-color has-background" href="http://www.webappers.com/download/CMSInterface.psd" style="background-color:#2da3ac" target="_blank" rel="noreferrer noopener"> Download</a></div><hr class="wp-block-separator has-css-opacity is-style-wide"/><p>In conclusion, creating a web app admin user interface in Photoshop is an achievable task. Through the use of layers, shapes, and colors, you can create a visually appealing design with relative ease. Don’t be intimidated by the size of the project; break it down into smaller tasks and work your way through them one step at a time. Additionally, refer to tutorials and other resources to ensure you are using the correct tools and techniques.</p><p>Source: <a href="https://www.webappers.com/2009/07/05/create-a-web-app-admin-user-interface-in-photoshop/" target="_blank" aria-label="webappers (opens in a new tab)" rel="noreferrer noopener nofollow" class="rank-math-link">webappers</a></p>