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.
- [Instructor] 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 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 going to 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 and use. 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 1,000 pixels wide. 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 till 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 command g on the Mac, control g on the PC, and that'll create a group. And 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 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 save just this as a jpeg or a pdf, send it over, say, hey, what do you think about this? They say yea 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 up the library's panel in Photoshop. You can see here that right now, I'm working on something called my library, which has very few items in it. I want to create a brand new library though, so I'm going to go down, create a new library. We're going to call this library here Creative Conf for the Creative Conference.
And we'll hit create. That's going to create that library for me, and now I can start sticking things in it. So for instance, up here in the header, I'm going to find the logo, which is right here. And what I'm going to 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 going to maintain the layer name. That's why so important to name your layers inside of Photoshop as well. So now let's scroll down here. Couple of things we need to put in here, of course, are the speakers.
So let's go hear 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, Sarah, 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 .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 going to 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, or character style. But I'm not going to do that either because I'm just using this text as a place holder because text inside of Photoshop looks very different than text inside of a browser. So I tend not to 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 got, let's see here, there's I love NYC. I can create that using a Unicode character, so I don't need that. And I'm going to 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 opposed to a jpeg, and that changes the whole ball game 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 library's 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