How to Create a Website Layout with Photoshop CC from Wireframe скачать в хорошем качестве

How to Create a Website Layout with Photoshop CC from Wireframe

► *Start Free 7 Day Photoshop Trial: https://prf.hn/l/VxB8QjJ/ DISCLAIMER: links marked with * are affiliate links In this Photoshop tutorial I'm showing you how to create a website layout with Adobe Photoshop CC 2015 from a wireframe I made in a previous video using Balsamiq Mockups. We're using the wireframe as template for the website. Let's open the wireframe image. Go to file - open and find the wireframe PNG file. You can make it bigger by choosing the magnifying tool. Then go to Layer - New - Layer. You can name it background. Choose the Paint Bucket Tool and the color white. Make sure the background layer is selected and paint it white. The wireframe picture we're using as a guide is under the background layer and we can see it by setting the background layer invisible in the Layers tab from the icon that looks like an eye. To help you place the elements, use rulers. Set them visible by clicking View - Rulers. Drag rulers onto the image to create a grid for the banner, menu, content areas, some elements like images and footer of the page. Remember to save the project. Go to file - Save as and save it as a Photoshop file. Give the background a gradient color by choosing the background color layer and choosing the Gradient tool from the left menu. You can choose the type of the and the colors. Apply the gradient by right-clicking, moving the mouse and clicking again over the background layer. Add the banner background with the rectangle tool using the rulers as a guide for the size and placement. Add a banner image. Click File - Place embedded, choose the image and click Place. You can change the size of the image by holding down shift and dragging one of the corners of the image. The scale will stay the same. Press enter. Add the title by clicking the T icon in the menu on the left and drag the text area onto the banner. Write the title and change the font, size, alignment and style in the text menu above. Use the Move tool to change the placement of the title. Add a background for the navigation with the Rectangle tool. Add the navigation links with the text tool. You can also underline one of the links to make it seem like it's selected. If you need to select an element, you can press down ctrl and click on the element and it becomes selected. You can make text look like a link by changing the color and underlining it in the Character tab. Add a text box and go to type - paste lorem ipsum in the menu above to add placeholder text. You can hide the rulers by pressing Ctrl H. Save the website layout as an image by going to the File menu and choosing Export - Save for web - PNG-8 and click save. I'll also make a brochure design video using Adobe InDesign with this same theme, it will be a brochure for an (imaginary) art exhibition. ADOBE OFFERS ► *Start Free 7 Day InDesign Trial https://prf.hn/l/W4xJB42/ ► *Students Save over 60% on Adobe Creative Cloud https://prf.hn/l/6lPWQqA/ ► *Start Free 7 Day Creative Cloud Trial https://prf.hn/l/p3jWaQ9/ MUSIC • Acoustic Guitar 1 by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...) Artist: http://audionautix.com/ #Photoshop #PhotoshopTutorial #WebDesign