Lessons

Lesson Info

Customizing Your ProSite

So when we left, we had just uploaded Franks. A beautiful picture, too. His profile. And the cool thing about when you make changes on your profile page right here, I don't have to do anything to save them. You know, you can hunt around all day long for a save, but there's not gonna be one, so that's kind of neat. So our changes air safe, so we can go back to the profile and see what that looks like. See, now we've got Frank's website in here. If we cruise on down on the left hand side, we see Frank's about me statement right here. When Frank gets time, of course he will come in here in add work experience. This work experience is the same section that we looked at when we were looking at my resume. So if you do it here and then you turn on that resume that custom resume page, it pulls the information from here. It's just different past to get to the same fields to enter that stuff. So if we come over here, I think like work experience to this is that same page that we got to when we w...

ere looking at the resume custom page. So here's where you would would add all of that so we can add a language here. We can see Italian and you're like, Stop it with the Italy stuff, please. It's like fluency. Yeah, let's say Frings advanced so we could scoop that up in the list. There we could add some work experience. We could say Creative live. So we're doing this for play right here. Creativelive dot com position. Um, would you say steamed in studio audience guest and we can choose San Francisco. So as you can see, you can get a quite detailed with all of this. There we go. Current position, Let's say, Oh, last year to present and weaken to say, done Just so we have something in there. So all kinds of fun writing opportunities for you down here we can put in Frank's rate and availability. How much would you like to make? Frank couple, huh? I'm thinking at least that much hourly I say at least that much ado least that much part time cause you like to travel? Are you willing to relocate? No. I'll go destination invisible that you know who do you want to see? Only be hands members only registered recruiters. If you set this to the registered recruiters, then anybody else who's tooling around on the hands just won't see your resume, That's all. It's just like hiding this one section to them and we can click Save. We get this nice little feedback are changes were safe successfully. And of course, you can go in here and edit this stuff anytime you want. And how did we get here again? We went to We logged into Frank's account. We went to my portfolio right here in this big old honkin edit profile, but none left. You cannot miss this stuff. All of the information is there. So now we've got a little bit of the work experience that shows up here. So even if you didn't know, even if you've not yet done a pro site, all the information that you can pull over to that process shows up right here on the left hand side and again, you could add your own custom sections here for you know, whatever you think is important for whatever your goal is in posting this stuff and goals could be very different. If you're just posting this for the sheer fun of people enjoying your artwork or your imagery, then you may not worry so much about feeling in all these persnickety little details like we are. But if you're doing this in the goal of getting more clients or getting more work or getting a job things like that, then you would definitely want to come in here and think about this stuff and feel free to update it. Updated often. So now let's go click on Pro Site again. You can bookmark this page if you want to save it. Let's say in your toolbar, right here for quick access, there's a nice beginners. Pdf gives you all kinds of guidance in so far as you know how many images to add two projects. That's how I learned that they want you to add no more than 20 because I read the beginner's guide. So let's click. Edit Pro Site takes a second to load more helpful tips, and when you get sick of seeing these tips, just click that little button right there. So by default, be hands is going to give you this kind of a look is going to create a typographic logo for you. Now, if you didn't have a logo or anything that's not too shabby, you know we're going to do better than that. An illustrator here in a little bit. But that's not too bad. So the way you pick the templates did you come over here and click the Layouts Guide? And we've got precious few templates, but they could be customized, so let's go ahead in use. Basic. So I'll click. Use this layout by selecting this layout. You'll override any existing draft. So if you've been in here, uh, crafting a pro site that you have not yet published live, then when you choose a different layout, that is gonna zero out what you had done, which, honestly, is not that big of a deal, because think about how this is being built. Its pulled all the information on your pro sites pulled from what you enter the projects you upload, so you're not gonna lose that terribly much so I'll slight to continue, and now we can start populating this site. So the first screen that it takes you to is Project, so that's the easiest thing to do is hook up the projects that you've already uploaded. So you do want to upload some projects like we looked at earlier today, So I'm just gonna click at all projects. And there they are. Bam! We're done. Thank you all for coming to this class. Who is really great in that simple. Now we can start the customization party. And again, if you want to rearrange the order in which these projects were appearing, I'll know by now that you can click and drag those little bars around to change that. So now let's come over here to the design panel, and I'm gonna find out what background hex code I used here. So let's just trot down the list. Global styles, things that happened globally across the page. What thought do you want to use? Well, you click font, and you get this nice little poppet menu. Happily, it works, and you have a limited number of fonts that be hands considers our web friendly. We're gonna be downloading some more fonts next. So if we wanted to use oh, let's say trade Boucher for the Global fund, we can do that, and then we can also set a link font. So anything that air links, let's say they're your project names or there any of those custom pages that we looked at then you could change the fund for those. I like having the same fun, but you don't have to you. So I'm gonna go ahead and choose Travis. She Did you see how the links changed right there. Now what will trip you up is you will try like heck to find how to change font size in this pop up right here. It's not in here. It's down here in navigation. That's where the font sizes. I know it's a little weird in it. So let's keep trucking along. Let's go ahead and I'm gonna go ahead and set my background color cause that's going to set the look of the page. Let's click background and I'm gonna click background style. And from this very simple interface, I'm gonna click that little color swatch and then in the hex code over here, we're gonna enter the color that we used over in photo shop and click add. Now we've got that nice, uh, brownish color there. So we click confirm and the super cool thing is that once you pick a color and you use it, it ends up being a little easily accessible swatch down there at the bottom. So if you want to use that color for some other design element, then you don't have to go back to the background area. Click it. Find out what the heck color you pitch because they all end up right here, which is nice. Still, it's click confirm and then click Confirm. And now we've got our background color so we can go ahead and upload our logo now, so that's turned on. If we turn it off, do feel free to experiment with these often on buttons. If it's unclear what element of the page that you're about to change, just turn it off and then you'll see it disappearing. You go. That's the thing that I'm changing right now. So let's go ahead and, uh, click website logo. And here's where I could continue to fine tune the text if I wanted to stick with ah typographic logo. But what I want to do is upload that image that we made, so I'm gonna click the image tab, and here again. Oh, for this one, it says 170 pixels wide. We message chosen the wrong template. So let's come over here. And not for sure it was that one. So, yeah, this kind of stuff will happen. No big deal. Let's do Let's try this one and say, Use this layout and it's going to say everything we have done is gonna be wiped out. But that's not gonna be that bad. OK, see for repetition, we do these things on purpose. So here we are again, starting over. We at all projects. There they are. Poon. See how fastest is now let's come up to design. Let's come down here and check our header image. That's not the right when we want. We want the header right there. There we go. We want a logo, and now let's click on Image. There's the one we want. So let's go ahead and click. Upload image. Navigate to where that file is that we saved and it lives in the logo art, and here it is, right here. So let's go ahead and click open. You get a preview of what it's gonna look like if you if it was narrow enough to center or a line in any way. You could handle that right here. And this is where you said, if somebody clicks on that masthead or that logo, where they going to go? Well, you want them to go to your gallery page unless you've specified some other pages your landing page of your index page, but little well, Let it stay at the gallery page and click Confirm. Now let's go change the background color. So what kind of here to background background style Click the color picker, The color we entered on the other side still there in that knee. I love that it keeps those click. Confirm, click, Confirm. And now look what we've got and we've hardly done any work at all. Now this bar up here is odd. It's just a block of color. Long rectangle. I always turn that off, and if you can't remember where the heck the control is to turn it off, just take your mouse in point. Over here. There it is. Oh, that's that thing. Let's turn that off. It's just a bar of color. You might want it. We don't want it for this particular side. Now let's go back to the font section. Case Little scroll back up were in global style. So this is where we change our fun just like we did a second ago and we chose a nice, friendly one tray. Boucher, the Fonte pick really does reflect upon you. I'm you've seen me in a lot of the things that we've done in this class. When I choose fonts, I tend to go for rounded, airy with lots of nice happy space. It has a friendly commutation because hopefully I'm a friendly person and I want to exude that and the fonts that I use when I pick. So your fonts and the message you know lawyers don't ever use nice, open, rounded, friendly fonds Do they know that? You scary Fonds all Castillo. So now we've changed the farm and let's make sure we set the same font for the links we did. And we can keep cruising down. You can change the dividers if I zoom and can you see the little lines that are appearing here and there those air dividers so you can change those styles if you want to. You right here. Let's keep coming down to navigation. Now, this is where we're gonna be able to start changing some font sizes. So see, here we've got a font size, so don't let that trip you up When you change your global following, you cannot change the size globally because you've got a different aspects of the page going on here. You've got page titles and you've got custom links so you can set that stuff individually. So the fire is being pulled from what we set in the global style. But we want to go up in font size. I'm gonna make it a little bit just so we can see it better on screen larger than I would make it in real life. And we can set the alignment. We can set the line height, which you can think of is kind of like letting and we can even determine what our text color is as well as what color the text becomes when folks roll over a link, which is a nice level of customization. But again, don't feel like you have tow goto all these links to get your page up. So let's go ahead and choose a text color ends. I'm gonna go up and, uh, yellow room. You know what we could do since we don't have ah, color picker right here is we could come back over to photo shop and we could pop open Frank's hitter and we could grab our eyedropper tool Yes, in photo shots, and we could come over here to hiss logo. When we click the color with the eyedropper tool, Photoshopped loads it as the foreground color ship toe. Learn the hex number of that color. All we have to do is click the color chip in up pops the color picker coffee paste to make it match. Don't you feel a little smug when you learn to do stuff like that? You like, Take that software. So now let's come over here in Linz, copy paste that code into our color area and click confirm. And now, when I click, confirm my page titles or my my project titles rather are in that nice, soft kind of hazy, creamy color. So let's go back to that and see what else we've got. If we wanted to change the color on roll over, we could just click roll over and pick another color for that state. I'm not going to go to the the effort of doing that, but it works in exactly the same way. If you want the texture changed a different color. When you roll over it, you can spec that right here. It's really quite amazing. And if you want anything to be bold so now my gallery pages is bold there. So that's how you would do that. If you want to change the ads section dividers, you can. So if you've got a bunch of projects that are perhaps different in theme, you might want to add Ah, section dividers. There just gonna be these little lines like that so you can add more of those. Our list of projects is on. If I didn't want that list of projects to be on on the right hand side over here, all I have to do is turn it off. And if I decided any point in the future that I want that list of projects back on, its a little redundant because you're looking at the list right here. But when it comes in handy is when somebody has clicked to enter a project then, by having that list of projects on the right, they can easily get to other projects without having to hit their browsers back button. So that's why you might want to leave that on begin again. It's up to you. Here's that footer information right here. If you want to customize it, then you can give it a click and you can customize the the text. So here we can go grab our text color, click, confirm. And now, Ah, that's that color down there. So all kinds of things that you can do here. So as I click project covers, I can change the cover size if I want. I can set these projects to be larger. I can make them be taller. But you definitely want to turn on constrain proportions before you do that. So Well, look at that one more time. Change cover images change cover size right here, so make sure turn that on so things don't get walking job. So if you've just got a few projects, you might want to make him a little bit larger. Angle ahead and click confirm. So no end to the customization that you can choose here So let's come over here to pages. So here's when we were talking about earlier, I said that we we have some canned pages, presets, custom pages that we can just turn offer on here. Is that contact page? Here's the about me page and here's the resume. You just turn em on, turn them off if you don't want to, to have them there. And if Frank had a his work posted on another site somewhere that I'd click at a page and from the type I choose Link in that I'd inter a title for it and then you could just enter the URL right there. And it shows up as a link on your side. So all kinds of wonderful things you can do after looking at this header. We could go back over there and Photoshopped and continue to fine tune it, maybe make it a little less tall. So it, uh, you don't have to scroll down to get to Hiss projects, but pretty beautiful here. So let's go back to design. If you want to change the layout of the page itself, you can just click design and then click layout. You can choose to center the website. So if somebody hits your website and they've got their browser window, you know quite wide, maybe they've got a wide screen monitor. Then if you want your website to appear in the center instead of on the left, then you could turn that button on right here and here you can. You can change the margins. So that's when I say these layouts air customizable. They really, really are. So you can change the margins. And as you point your mouse cursor to each of these pieces, you can see the area that they change that would be changed. Did you choose to start messing with it? And if you know code and you really want to get in there and customize it, if we've got a nice lady in our audience, that does, you could come in here and tap the HTML and CSS button, and there is a bit of his disclaimer. It's like once you go here, there's no coming back a little bit like that. So if you want to activate the HTML and CSS so you can get in there and actually change the code by hand, then you'd have Teoh. Uh, click that button right there. But they're just letting you know that you're not gonna be able to go back to this layout tab ever again. If you do that and that you can't get any customer service for that type of thing. If you change something than it breaks, probably have toe have to trash it. Start over, start over with another template and then go by two customizing it. So, yeah, you've been warned. So let's go ahead and change global tights color here. So we're back up here in the global styles will click the little color Swatch, and we've got our color right there. So let's look OK and click Confirm link styles, divider styles. I think we've pretty much talked about all of this, so let's take a look at a preview here so we can click preview, and this is what Frank's website would look like in the browser window. So we've got our list of projects over here. We've got our about me and our resume. Let's click on a resume to see what that looks like and not nicely formatted for us. We go back to the about me, it should be pulling that about me section. But it is not for whatever reason list like that preview one more time. And if we click one of these guys, then we get all of our photos here at a nice big size so people can see them. And again, In my humble opinion, I think this is a fine size for people to determine whether they like your salad work, work or not. You don't have to worry about anybody snatching it up and passing it off as their own. You know, perhaps, if you're a fine artist, let's say you're an illustrator and you do some really detailed drawings instead of posting them at a larger size crop crop to the part that's important in the image and let that speak for itself. Another way to handle. If you had a large image that you really just wanted to have up here on the side, you might chunk it up in the pieces. You know, if it's got a lot of detail and you could easily split it up into quarters, then you could post each quarter as a project image and they'd all be together. So that's that's the way that you can really draw the viewer's eye to the detail portion of the photos. So if you are an illustrator, that's a good thing to do. If you're trying to get jobs for more, illustrations would really show off how you can, you know, make fine details from from scratch so you might divide the image in a photo shop that would be a job, for we could do to light room to cropping so you just crop it and creative ways and then upload several pieces of it. So let's go ahead and scroll down here. I absolutely love that shot. Let's scroll down and find our movie. I'm gonna do a little bit fast here. So our movie that we added is gonna be down here at the bottom. So there's our light room slideshow that we made the other day on RB Hands Pro site page. And again, you could use those reordering tools that you might want to put that slide show at the very top. But what a nice thing to be able to add to your Behan's portfolios So the slide show actually shows up in that project. If you were to go, Teoh, find Frank on be hands and then click on that project. You'd still see that slide show. So this whole pro side is being populated from the projects that you upload. And if you attach a slide show to a project by using the embed code that we looked at, it's going to show up on the project. And when you build your pro site, if when you create that project you say ads on my pro site, it will automatically happen. Or if you haven't yet major pro site, then you can go into that project page and just add all of your projects and they just show right up so you could have a slide show at the top of each project, which would be really neat. So I encourage you to think about making projects a similar thing for, you know, each project. Let's say if you if you love to shoot weddings like this, then you would have a wedding project, and that would be your best of the best of the best wedding shots, with perhaps a nice slide show that you made from light room appearing at the top of that project you know you exported in light room is a movie uploaded to YouTube. Grab the embed code pasted in right here. If you also like to shoot abstracts than you would have another project that's abstracts. And you might have Ah, slideshow that appears at the top of that project. I mean, just imagine the the feeling that people get in the impression when they see your work presented this way and thes things that we've been learning work, no matter what kind of art you create, or if you create up physical items, you can still do all this with the tools that we've looked at. So really need stuff here. Any questions on what we've looked at so far? Yes, man. My question was, when you and you answered, it's sort of about adding a slide show to the top doesn't. Also, when you embed the code, can you slide it up and down in the same fashion? How do you get it up to the to the tent when you when you paste in the embed code, Then the slide show movie appears on the site and you would disc lake it and you get those little blue buttons with the two arrows and you click that button and you can scoot the slide show up using that little poppet window. Yeah, it's I think that would be neat to put your slide shows at the very top. I think that would be a nice thing. So let's take a look at one more thing here. We want to make sure to save the draft, and that keeps it in your be hands account until you're ready to push it live. Okay, so come back to it. Work on it. Think about it. Show it. So you know your significant other and so on and so forth again here So we can add those custom pages and in the settings section that this is where you can go to hook it up to a domain name. But that is gonna You're gonna have to log in to the place where you bought the domain or ask your Web master. Best money I spend a month is on my web master. Let me tell you, um, so you would just plug in this information and you're gonna need to set the I P address to be hands so that when people hit your domain redirects here. So this is where you set that up. Go to settings and change domain. And then when you're ready for the sites like alive, you can click, publish and then publish over here, and that's it. And if for any reason you want to take it down like the publish link and click unpublished that doesn't delete, it just kind of saves. It is a draft again. So all kinds of flexibility with the hand. So I hope you're extremely excited about it. Eva. All the work you've done, the settings that parameters and all of that is that going on your hard drive eyes that what's happening? Okay, they just want to clarify GM four designs. Wanted to know about that. Yeah, great question. No, it's being saved in your be hands account. So that's where did none of this list. Well, the only thing lives on her hard drive right now is that logo header that we made. That's it in the head shot. It may be any images that we've uploaded, you know, as projects, but this site in the design and everything lives inside your Behan's account so pretty neat stuff and enhances is amazing for for inspiration to me. Come back over here, too. Let's go back to the creative cloud app and be hands, and that's gonna make me sign out. There's sign out. Is Frankie back in a bit? Anyway, on this page right here, If you click the Discover tab, you will go down a rabbit hole that you will not get out of for about three hours. But it's fantastic, so you can search and explore. You could search for things that you, you know you want to look at if you're interested in typography, could search for typography. And you get all these amazing portfolios that people have have posted that you can use for inspiration. Let's say you're building a postcard and you want to get You've mastered what I taught you yesterday, and you want to get some more ideas for postcards. People have uploaded amazing, just amazing things for you to look at and get ideas from, so but that's a heck of a postcard right there, right? So if at any point you click one of these portfolios and you want to keep up with their work you just click follow and they show up in your be hands account right here. When they post new things that shows up right here. My activity. See, I now know that Frank edited a project. Frank edited several projects, apparently. So all of those things that those the people's activity that you follow show up here in your feet, which really is a great way to get inspired and do different things. The other one that I wanted to point out, Let me go back a little bit in this Discover tab is creatives to follow. So these are being chosen by the Behan's community, and they change actually, no more. You that's hysterical. But depending upon what you're interested in, you confined creatives to follow. And as you follow more people, they see that that you're following them. They may follow you back. So by following people, that's a great way to get your own portfolio followed. So search for people to follow search for things that inspire you and interact with the community. I think you'll have, ah, a lot of fun, and you'll find a lot of inspiration. The other thing to note is this job list up here. I found out last night that Adobe is on here. So if anybody wants to work in Adobe become an experience designer than they certainly can. So look at this and you get the, you know, where is it you see em in in Seattle is hiring. So if you're looking for work, this is a fantastic way to find it. And on the flip side of that, if you're a company that's looking to hire people, you can post that here, too. You know, if your got a studio and you're looking for an assistant, you could post a job offer right there. Can you adjust the activity? Uh, if you don't want people to know what you're doing, can you adjust the settings of your activities? Yeah, that's a great question. You do. You can do that when you upload, or you can do that when you edit a project. We looked at editing a project with the movie. I think I think I can get there, but we won't actually click the button. So let's say here it is. So just mouse over your project and you can edit it. And in that editing section is Ah, privacy, poppet menus at the very bottom, and you can determine who can see that project so around, definitely.