Join Justin Seeley for an in-depth discussion in this video How to use a Photoshop comp in your workflow, part of Building a Single-Page Website in Muse.
- [Voiceover] While a Photoshop comp is not necessarily a necessity when it comes to website development it does help to give you a general idea of the look and feel that you want to create inside of a program like Adobe Muse. This is the same way that you would lay out bits and pieces of a business card or a flyer in Photoshop before you take them into InDesign. Creation applications like Photoshop and Illustrator still have a very big place inside of the web development community. They're mostly for generating assets that you put into what I call a content aggregation application, like Adobe Muse or even Dreamweaver for example.
So how do I use a Photoshop comp in my web development workflow when it comes to Adobe Muse? It's actually pretty simple. First thing I do is I create a document that's gonna be roughly the same size as the document that I'm working with inside of Muse. In this case I've created a Photoshop document that's about 1200 pixels wide. Now the height of the document is always going to vary depending on the height of the content that you create in Muse. And since Muse is able to scale infinitely without any problem, vertically you don't have to worry about necessarily the height inside of Photoshop so much as you do the width.
Now I've also created some guidelines on either side, which make the content area in the middle exactly 1000 pixels wide. And you can see here that even some of these don't line up properly. So I use these guides to make sure everything is right in place. So I'll just go right here in the header and just move this over 'til it snaps right there to that guide. So that's what I'm trying to get to. I want everything inside of that, so I have a good idea of what the outside, the browser fill, is going to look like, and then the inside, the actual meat and potatoes, so to speak, of the website, what that's going to look like. That's why I create this extra space outside of it.
Inside of the document I break everything down in terms of content blocks, so I start off with the most common elements, like a header and a footer. So this is my footer down here at the bottom, which is just a couple of different elements laid on top of each other. When I'm creating these blocks I take the elements as I work on them and once they're all created I group them together. So down here at the bottom let's just select both of these layers, hit Cmd + G on the Mac, Ctrl + G on the PC and that'll create a group, then just rename this footer, and there you go. So now you've got a header, you've got a footer, those are the two basic elements that I start with.
Everything else in between is going to be dependent on the content itself. So for this particular website we're building a conference website, so we have this big intro thing here, we have our speakers, we have our sessions, we have our location information, registration, all of that is all done in this comp, and it's all grouped together. That also makes it easy for me to focus on one individual element at a time, and it also easy for me to focus on one individual element at a time when I'm inside of Muse as well. Once I have all of the elements built here in Photoshop I can hand this off to a client a lot easier than I could something that I create in Muse.
For instance I could just save this as a JPEG or a PDF, send it over, say, hey, what do you think about this? They say yay or nay. Once they've approved it then I can get to work inside of Muse working on the actual website itself. To help me do that however I like to use the Photoshop document to help me generate some assets. And I store those assets inside of Creative Cloud libraries. Now if you don't have access to Creative Cloud libraries, if you're not running the latest version of Muse for instance, that's okay, you can still load in the assets that I'm going to create here from the exercise files folder and I'll show you how to do that once we get into Muse.
Adding content into the Creative Cloud libraries is actually pretty easy. Let me bring out the libraries panel in Photoshop. You can see here that right now I'm working with something called my library, which has very few items in it. I wanna create a brand new library though, so I'm gonna go down, create a new library, we're gonna call this library here creative comf for the Creative Conference, and we'll hit create. That's gonna create that library for me and now I can start sticking things in it. So for instance, up here in the header I'm gonna find the logo, which is right here.
And what I'm gonna do is just add that in. You can see these buttons down here at the bottom. I can say add a graphic, when I click on that that's going to add in that graphic and it's gonna maintain the layer name. That's why it's so important to name your layers inside of Photoshop as well. So now let's scroll down here. A couple of things we need to put in here, of course, are the speakers. So let's go here to the speakers section, and we'll just go in and we'll just add these in one at a time. There's Gregory, there's Jimmy, John, Mallory, Ryan, Sara, Sean, and Stephanie.
So all of those people have been added in. You see they come in and they've also got the layer name, which has the dot JPEG extension letting me know what those are coming in as as well and how they will probably be optimized when I send them out of Muse. Now I could also bring out the text elements, but I'm gonna save that for Muse, because Muse will actually create text out of these, so I don't necessarily have to worry about that now. Now I could, if I was working with text inside of Photoshop, add a text style. As you can see here are character style, but I'm not gonna do that either, because I'm just using this text as a placeholder, because text inside of Photoshop looks very different than text inside of a browser.
So I tend to not put any of my Photoshop text styles into my Creative Cloud libraries for now. Once they kind of figure out that conversion and get that stuff all synced up then I might start using it for that, but for now, for the most part, when I'm saving text styles in a Creative Cloud library from Photoshop I'm only doing that for print-based documents. Now for the accordion panel, that's another thing that is inside of Muse, so I don't need that. I've also go, let's see here, this I love NYC, I can create that using a Unicode character, so I don't need that.
And I'm gonna create all of this information down here using items inside of Muse. So really and truly I'm pretty much done. If I want these background elements as images I could do that, but since I'm going to just import the JPEG images into Muse directly and then change their appearance using an opacity effect that's going to make them significantly smaller in file size. Because if I were to save them out of Photoshop with semi-transparency they may come in as a PNG as apposed to a JPEG and that changes the whole ballgame in terms of how fast they load in a browser.
So once I have all of my information loaded up into my Creative Cloud library all I have to do is just dock the libraries panel back over here and I'm ready to continue working. As you can see a Photoshop file has lots of different ways that it can help you lay out, create, plan, and even prepare assets for your web development workflow. If you haven't used Photoshop in a while now might be the time to start looking at it again, especially since we have this new Creative Cloud libraries feature, which is now a big part of Muse.
Staff author Justin Seeley explains how to set up your master page, build a custom navigation bar, and define content blocks on the master page. Then he shows how to import your graphics and text (from sources such as CC Libraries and Microsoft Word) and style all of the content. In chapter 4, Justin shows how to add the "infinite scrolling" behavior that is so emblematic of single-page designs.
- Creating your master page elements
- Building a custom navigation bar
- Setting up content blocks
- Adding CC assets and text
- Styling the content section by section
- Adding menu links