…Alright, in this stage of our development…process, we now have a fairly complete wireframe.…We've got our text styled, we've got everything in…place, lined up exactly like we need it to be.…Now it's time to start adding those subtle elements for the UI that make this a more…complete looking wireframe, before we can then take it…to the next level in a full on mock-up.…And so, what we're looking to create, is basically what I have over here…in this version, where you'll see I've added some UI components to various areas.…

Like a back to top link, some social media icons, and then…also the slider left and right controls on the portfolio images as well.…So, the question becomes, how do we start to add this stuff in?…Well, ultimately it's going to come down to which type…of UI system you choose to use in your designs.…So, if you chose something like Flat UI, you could just drag…in elements from the PSD file that comes with Flat UI Pro.…You could also try to recreate the pieces…if you didn't, you just downloaded the free version.…

Resume Transcript Auto-Scroll

Author

Released

3/17/2014

The web design landscape is constantly changing, but Photoshop is still a classic. Designers use it to create UI elements, web graphics, wireframes, and functional mockups. Designs that transition beautifully and easily to production. Join staff author Justin Seeley as he reveals how Photoshop is used in the modern web design workflow. Together, you'll create a mockup for a creative company that contains responsive templates, a fully developed color and font theme, and a UI kit full of buttons, navigation bars, check boxes, and other ready-to-use interface elements. He also shows how to optimize web graphics, create image sprites, and integrate other apps like Illustrator and Muse in your web design workflow. Follow along, and learn how to design better web deliverables for your next project.