Lessons

Lesson Info

Adobe Portfolio

now, we've talked a lot about sharing during this workshop, and I think sharing your images is crucial to the process and the purpose of photography. Now you probably share most of your images through some kind of social media, which is which is fine and great. But do you have a website, something that you control that is your property if you don't, or if you have a website that you don't really like or you don't really understand or it's hard to update or it just costs you a lot of money. Keep in mind that Adobe has created a website building application just for you. It's called Adobe Portfolio Now. We talked a little bit about this when we were talking about connections, but I want to go a little bit deeper into it. I'm not gonna teach you everything about Adobe Portfolio, but I am going to teach you the basics so that you understand enough to go in and play with Adobe Portfolio because it is a website builder that you already have access to. If you have a light room, uh, subscripti...

on, you already have a website, and you're already paying for it because you're paying for an adobe subscription, so you might as well at least go in and investigate it. And probably you'll find that you like it enough that you'll probably kill your other website. Whatever website that iss Um, so let me show that to you. Now, Now what I'm looking at right here inside of light room is Thebe portfolio album that I put together. And this is just kind of me looking at images. Um, and I simply click on all of these images, so I just highlight them all by hitting command A and simply dragged them into the adobe portfolio connection. And that's how simple it is to get my images from light room into Adobe Portfolio because light room is tied to the cloud and the cloud is tied to that's right, Adobe portfolio. When I do that, I can either choose a specific project that I've already made and add to it or I can name it. I'm gonna name this General port Folio and hit Continue. So now all of those images have gone into adobe portfolio. But you can see right up here in the corner that the cloud is churning on something and what it's churning on. It doesn't have toe upload the images to the cloud because they're already there. What it's doing is it's telling me that the cloud is working on building a Web page with those images in it. All right, so what are is it working on? If we go to Adobe Portfolio, you can see something that says General portfolio right here, so and notice that you can have the same images in multiple, uh, projects. So this, looking back in the past, has that same image in it. General portfolios right there. It has that same image in it. You can see that these two have the same image, so I can have multiple pages with the same images on them. So let's go view this project by simply clicking view project, and it's going toe open up the Adobe portfolio Web page. But it's not opening up the page itself. It's opening up the back end or the page creator and noticed that this is what my general portfolio looks like. And I could go in and edit this portfolio page by simply hovering over the grid and clicking on this little drop down menu and saying, Manage the images. So I'm going to manage the images. I could add a caption to any of those notice that the caption that's already coming in is already being added. So this and I miss spelled Louisiana. So I'm gonna correct that Notice that these images already have something. The reason they have something in them is because they already had a title to the image. So it's drawing the title from the image and then others that don't I could add it here or I can leave a blank. Then I can come down to the very bottom and there's there's an image here that I don't I did not take this. This is an image from, you know, historical images in my family. So I'm just going to go up to the top right hand corner and click on the X, and that actually removes that image. And then it renegotiates all the other images so that they are in a a perfect grid. Okay, so, uh, just right off the bat, you have the ability to go in and and manage the images that you just put up. There s so I'm gonna click done. And now I'm back to the image. But notice that this is just a kind of a preview of what the images they're gonna look like. And then over on the left hand side is the page editor. So this is where all of your settings are. And this is kind of what I want to review with you is all of these settings and the first thing specifically that we want to dio is we want to go up to the so I like what I've done here. I'm happy with that. So I'm gonna update the live site, so I'm gonna click update, and what that's doing is it's actually publishing it to the site. So when I add a page, it doesn't actually get published, and I can work on it for days and weeks and months until I'm ready and then I can publish it, and all of my changes will be published. So you can either publish every single day after you've done some editing or you can wait and kind of collect all of your changes to the site and then publish it. So now I'm gonna go back to the editor. But if I want to see it, if I want to view my sight, I can simply click on this Jared Platt us link, and it's gonna open up my site. This is what my website looks like. That's the front page. Here's a message about cookies down here. I'm gonna click X on that. Eso This is noticed that I've got all of my social media accounts all set up there. So if I click on projects, it opens up a page of various projects and you can see there's the general portfolio that I've just added. And if I click on it, then I get this general portfolio Web page and it looks beautiful. I like it a lot, and I could then go back and edit these. I can also click on any of these other links. Now, this link here, this blah glink is actually an external link, so I can control this website and not only put images into projects here, but I can also create links that lead out to other places like my WordPress blogged. So let's close this down and let's go back to the editor now in the editor, I want to show you some of the things on the left hand side because this is what you you need to get used Thio. And first off, if you go up to the PF sign right up here in the top, this logo, if you click on it, it will take you to manage your sights and notice that I have Jared Platt got us here, and then I could create a new site. I can make a number of sites and then I can at a different you are lto each of them. I could play around with them. I could chew, pick and choose the sites and the themes. And so what I want to do is I want to show you how to create a brand new website. So I'm going to click on new site. And inside that site, I am going to choose whether it's a full portfolio or whether it's just a one off page. So it's just a welcome page of some sort. So we're going to choose a full portfolio site, and then we're gonna scan through various themes. So I wanna look around for a theme that best suits my sensibility. I think I'm gonna choose this thing here. It's called Marina, or I guess that's what Marina. So I'm clicking on that and you can see that this is generally what that themes gonna look like. All right, So I can see what it's gonna look like on a tablet. I can see what it's gonna look like on a phone. I think it looks good. So I'm gonna go with that theme. I'm gonna use this theme by clicking on the right hand corner up there on the top and it za processing it. Now, notice that as soon as it got to there now it used some of my images and some of my portfolios that I've already got in the cloud. Then I don't have to keep these, but this is kind of what we already have up there. So it's just using it now. Once I have that in order for this to happen, I have to hit, publish. But before I published this, I'm actually going to create some details in the settings of this page. So the first thing we want to do is we want to go to the settings and inside the settings. There's going to be all source of options down here that have to do with S CEO and have to do with, you know, icons and logos and things like that. But first is the domain name. Now I can. If I don't want to spend any money on a domain name, I can also just say I want this to be, uh, Platt photography dot my portfolio. Com and hit apply. And now that I've applied that, my domain is platt photography dot my portfolio dot com, which is fine. It's It's good, but the dot my portfolio com tells people it's not mine. I didn't pay for it. It seems less professional, but if you don't want to spend any money on an extra domain, go for it. That's fine. You could just put your name dot my portfolio dot com, and it'll still look beautiful. It'll still look just like we're gonna make this website, but it just won't have a custom. You, Earl, if you want to customize your URL, you simply go and purchase a domain. Choose whatever domain you want and then connect your domain and adobe will walk you through the connection so it will tell you what you need to put where and it's super easy. It'll take you about five or 10 minutes to do the whole thing by the domain, then connect. Connect the domain and adobe will walk you through that process. Then it usually takes about three or four hours for the domain name to be propagated enough that you can see it happening where you are. Sometimes it takes up to 72 hours for that to happen across the world. But start the process now, create your own domain name and connect it. It's very, very easy, but this is where you do all of that right here in this little settings dialog box. But for now, the website is platt photography dot my portfolio dot com, and I can work on this website for months and months and months until I really love it. And then I can purchase so damning and connect it and tell it that that's the new name for the website, and all of the work that I did will be just fine. It just changes the name of the website, so that's an easy option as well. So don't worry about having to get it right now, you don't have to purchase your domain yet. You could do it for free for a little while. And then when you decide I really like this website, I wanna keep it mind and I want to name it my thing. Go ahead and do that, and that's where you do it. Then you have some options on the home page as to which of your pages you want to be your home page. We're going to call work my home page. And then if for some reason they someone types in a domain name like platt photography dot com or dot my portfolio dot com forward slash uh happiness and that doesn't exist. Then the 404 page not found redirect will take them right to the front page, and that's important. You want to make sure that wherever they go, if they if they if they reached a page that doesn't exist, you want to choose what page they're going to go to, and you could even create a page of this is Hey, you've reached the page that doesn't exist. But here's some information for you. You could create that kind of page or just send them directly to the front page of your website. Here's some stuff about analytics you can put in a Google tracking code. There. You can put in some search optimization information here to describe your website. Put in some key words about your website. Um, meta tags here. If you understand how to use meta tags, you can put a favor icon in here. Um, that's basically the little logo that exists up in the address. U R L address area. You can put that in there, make sure that you only use a 32 pixel by 32 pixel sized logo. You can also kind of create your own icons for things here for, like your social media logos and things like that. Here's social sharing thumbnail you can you can upload that you can play with your site options like for instance, uh, for your lightbox images. So this is when you click on an image and it opens up full size so that you can look at the images. How do you want them to display? Do you want to enable a light box for images on your page. What color do you want? The background. What's the opacity of that background? Um, you can also do some general things like disable right clicking and so that you protect your images. You definitely wanna put that in there? Um, you can have a transition on hover, um, animate between pages on enable extended characters. So if you wanna put some additional type typography in their different fonts and stuff like that, you can you can toggle that on. You can also password protect the entire site. So if you don't want anyone to see your images unless they have permission, you can password the entire site if you'd like. So that zone option you can type in what you want on your cookie banner. Uh, cookie banner is a banner that shows up the first time someone comes to your website because cookies they're gonna be put onto their computer to track what they're doing and give them a better experience so they know where they've been. Um, if if they don't want that, they can avoid that. But you're just telling them with this cookie banner. Hey, we use cookies in orderto you know, help your experience along. So if you if you want a cookie banner, you can click that on there. Um And then, of course, you can restore all of your settings and then your account, you can manage your account here. Okay, so that is all of the settings inside of your site. And now, if I were to go down to the preview button here and click on preview now, I'm going to see the website as it currently exists, and you can see that it's got my name up here. If I click on that name, it takes me back to the main page, which is work. And then there's a contact page. So it's always kind of starts with two pages, some work and a contact page. And really, if you start this thing with just a couple already existing projects inside of your portfolio connection inside of light room, this is what you're gonna end up with on any site that you start. And that way you could literally launch it immediately and have something there. So what we're gonna do is we're gonna work on adjusting the site by going over to let's see. Oh, we want to go back. So down at the bottom, you can see what it's gonna look like on, say, a tablet or on an IPhone. And so that's what it's gonna look like on somebody's IPhone. And then I can either publish the site or I could go back and edit some more, and we're gonna go back and edit a little bit. And I'm just going to introduce you to the areas and kind of give you a taste of how they work and then you're gonna go in and play. So let's start up here in the essentials way up here. Remember, settings was part of the essentials, but also you can change themes and you can play with integrations. So when I go to the integrations panel, you'll see that there's a section for B hands, which is kind of like a linked in for photographers. And so the images that I have shared from light room to be hands are also being shared from B hands into my website here, and it's just simply by turning on this toggle. So if you use be hands and you turn on this toggle, then it will automatically add those, uh, sites or those collections into here. But also, you can go in and you can add your albums from light room in there. So I'm going to click on albums because I want to add some images, some albums into my work. And so I'm going to go into my light room lessons, and I'm just going to click on a couple images. Like, for instance, I'm gonna do this playing with dolls collection because these air some photographs of me taking pictures of my daughter, she kind of stylized Cem dull photographs. So we that's how we played dolls together. And then I'm also going to show some images from, uh, let's see these marketing images, um, from this workshop. So the images that we put in to show you what the workshop was going to be about, So I've chosen two sets of images and I'm going to click Import selected. So right now it's collecting those, and it's putting them into my website, and now you can see it's done. There we go. And so now I have in my work, you can see that some of these come from B hands and some of them come from light room, but now all of them are inside of my work pages. So let's take a look and you can see here's some marketing images and here's some playing with doll images. Eso those two came from light room and thes came from Be hands. All right, so now that I've done some integrations, you can also click on pages and in the pages area. You can create Mawr pages just by clicking on this little plus button. When I click on the plus button, I can create a link. So if I click on that link and I say Blawg and I type in www dot Jared plat dot com, forward slash blogged and I open it in a new window hit. Create link. Now, when I go back to my website and I preview it, you'll see that I have work. Contact Blawg. And if I click on that blawg, it's going to take me to Jared Plant. Calm to my blawg. There you go, so you can create links. You don't just have to work with pages within Adobe Portfolio. You can also create external links. Now let's go back to editing and let's go back to pages and inside of our pages I'm gonna hit this plus button again and show you the other. We can create a custom page, which is just a blank page with nothing on it. Or we can create a welcome page, which is the first page that people will see when they come to your site. Or I can do a light room album so I could just create a page that's based on the light room album. Or I could do a collection, which is a grid of sub pages, which is kind of like what we're seeing here. This is a grid of sub pages right here. Um, so when I'm in pages, I can also grab various So every one of those pages shows up here as a element in the navigation bar. And so when I'm in the pages, I can move them around, and that's going to change their position in the navigation bar. So now the blogged will be before contact. I can also turn them off or on, and there's a little gear box next to each one of them, and if I click on that, it allows me to change quite a few things like I can change the title. I can change the u r l to that page. Eso if I click u r l and I can change contact to contact me like this. And I've just changed the URL, but see how the page name has not changed. But if you were to go to it, it would now say, contact, underscore or dash me. I can also set This is the home page, which is how this is set is the home page. If I click on pages and I go to the gearbox, I have set this as the home page. So that's why when someone goes to Jared plat dot us or in this case, platte photography dot uh, my portfolio dot com It will go immediately to this work page. Now let's go back out to our for front page here and let's work inside of the site wide information. So this is the site what Anything I do here is gonna be done. Site wide, meaning every page is going to get these changes. So if I click on background colors and fonts, I can choose whether this is gonna be a light site or a dark one, so I'm going to choose dark. Then I can choose my fonts, which I like the font that I'm looking at. So I'm fine with that. I can click on this and add a background image if I like, but I really dislike background images toe website, so I'm not gonna add that. But then the image options would be right here. Um, I can include a specific background color so I could change this so that it's blue if I like, which. I have no idea why I would do that. So I'm going to go back to Gray and choose the type of gray. And since I can't figure out exactly what that color was, I can click, undo and undo again and undo again and undo again and undo again. And now I'm back to where it waas Um And now I'm gonna go back to my settings here, and I'm gonna do Web website container Now. The website container is what determines how wide things are tall. Things are things like that. So I want the content to be 100% of the total area and then I can also change the margins on the right and left. So I want 0% margins and I want 100%. That means it's going to be as wide as possible on Ben. My Max with is going to be pixels. So now I've got a pretty wide website that's great for most browsers. And then I'm aligning things to the center. So that's just kind of the Web container overall. And of course, you can change everything page by page after the fact, but this is site wide. Then, of course, you can change your logo or turn it on and off. See, I've Jared Platt is the logo. I can change the navigation by turning on or off, and I could drop down information about it and say, Okay, what is the navigation container going to be? And I can change whether it is centered. It's on the bottom of the of the of the area for the containers. See how there's a line there I can. Right now. It's now it's centered, which is probably much better. Um, I can change the height of that right now. It's fairly thin, but I could change it to 100. So now that that bar is a little bit thicker in the navigation, you can choose to turn off all page titles or collection titles, and you can see how that navigation is either not showing are showing certain page types as well as links. See how the block is disappearing. And then you can also choose whether or not you're going to show social icons. But we haven't chosen our social icon. So if we click on social icons, then we can add all of our social media type, uh, items. So if we have a patriot on a counter, if we have a WordPress blogged or a vimeo account YouTube, you can simply add all of those in there on Do. You can also choose the icon style so you can see how easy it is to start altering some of these things for your website. Thio, meet your needs so all of these items you could turn them on and off, and you can click on them and change some of the settings that have to do with their font type and size and all that kind of stuff. So all of this is site wide, and then we get into whatever page we happen to be on, and in this case, we're in a collection. So this is the work collection. So anything we do here is going to be done to this work collection. So, for instance, I can come up to the page cover and I can go to our layout options. And I could choose how Maney columns we can have. See how I'm changing in this block of items. I'm changing how many images there will be on a given page and the columns I kind of like to. And then I can change the gutters, which I like A like a one or two three is fine. And then I can change the top margin and the bottom margin, which you can't see the bottom margin right now. But you could if I go here, do that. So I'm gonna choose zero pixels on the bottom and the top, so it's closer toe up here, and then I'm going to go back out of here. Now I'm going to go to cover images and the cover images or these things right here. The covers to each of these and I could do different things to them. Like, for instance, I can make the edge is rounded if I like. That looks really ridiculous. But if you wanted to do that but I can also convert them to black and white. And so then when you hover over them, they start turning to color. But they also have, like, a little page that says what they are about. So, quite frankly, the black and white doesn't make sense because I'm just going to roll over and see this white image cover. So everything to do about these page covers is right here in this little drop down menu. And then I also have the collection background. What do you want to do there? I don't want to put something in the background there. Um and then I have the masthead and the masthead. Is this thing up here? So that's this area right here. So in the masthead, I can click on the masthead options, and I can see that I can just the masthead height so that it's not very big. In fact, it disappears. Or I could go to 100% which means the masthead is the full size of the first page, so everything below the fold is the masthead. And so then I would have to click on this to bring up the page. Or I would have to scroll down in order to see so I can have this set up as a masthead that no one sees or Aiken say, Well, I want it to be 50%. And so now the masthead is just the top half of whatever is on the screen, right when you come to the website and then I can have some kind of a title here. I can add Cem additional text below it, and then I can click on the masthead background and the masthead background is the photo that would go on the masthead, and I'm gonna go back to the masthead options and do 100%. So it's the full thing, and then I'm going to go to the masthead background and I'm going toe upload a masthead. So it's It's interesting that some of the things inside of Adobe Portfolio will connect you directly to your light room catalog. And some things won't the masthead in the background, things like that seemed toe Onley work if you upload. So I'm going to go to a folder of images that I exported before we started this lesson. So I'm just gonna upload this image, and that image is going to become the background to the masthead. And it's going to just float up here the very top of the Web page when you come to it. So here it is. It's coming in there. So now what you see is here's the masthead, and as I scroll, that's what happens. It overtakes that image, which is kind of cool. I like that. But I can go to the options and choose various ways to do it so I can fix the position on the image. So now it's always gonna be in the same place. I don't really like that. I wanted to kind of center itself. Um, no repeating. So I don't want it toe be duplicated down below. Um, and I'm asking it to cover Aziz much of the content areas possible so that that looks pretty cool. If you have an image that is getting in the way of your text, you can always also include an overlay So now you see that kind of dark overlay over the top of this, which makes the text a little bit more readable, and you can kind of play with how much you need to do with that. So we could go like this or we could go like that. But I actually tend to think that that probably works just fine. So 38% overlay on that masthead. So now let's go and preview this site and see what it looks like. That's cool. I like it. And as I scroll, see how Jared Platt there disappears, and now I'm into the actual website, looking at various projects. That looks pretty good. I like it a lot. This is what it looks like on an IPhone that is horizontal. Here's a vertical phone, an IPad. I like the site. I think it looks cool. And when I'm in the contact page, Aiken simply come over here to the section that says this page. And this is where I edit all of the information on the contact page, including adding a masthead. So now the masthead is on my contact page to see how that works. All I had to do was turn it on and it's available on my contact form or Aiken drop it down and I can change some of the options on the masthead on this page. I can also go to the page header, and I can choose whether or not I want the page header. So whether I want the contact form showing if I go into the page info area, this is where I get to add a description. So anything I adhere, you can see it gets added right here below the Contact Page title. And then I could go in here and I've got a custom field, one custom field to keywords. So this is where you add your information. And if I go down to the very bottom, you'll see all pages. There's the page container again. And then there's the page header. If I double click or drop that down, you'll see that I have the page title. You'll see that I have page description, but this notice that there are two areas here because this is this page. So the one page that we're looking at and Aiken turn on the page title in descriptions etcetera. But I can go toe every page all at once and turn off headers and it will. It will remove all those headers all at once, or I can turn it back on, and I can also turn off the back to the top button, and that's right down. Actually, I think we need to go to the work page, and if I turn off or on, there's the back to the right up there so you can see that little back to the top button. I can choose to turn that off on every page or turn it on on every page. And then, of course, I could turn it off on just one page rather than on all pages, because I can do that here in this section. So in every editing situation in my portfolio, you're going to be looking at different sets of information so you can see right here at the top is all of your essentials. That's the pages that you have created. You can also create more pages down here with the plus button, and you can choose what kind of pages those will be. You can also go down and work on integrations with light room and with B hands. You can change your theme right here, and all the information will stay the same. It will just alter the themes on all of the pages. You can also set your settings. And this is exactly where you would change your u r l to accustom you girl. And then the next section is everything that is site wide. So all of this stuff is the entire site. Then every single page that you're on, you can work on that one individual page with all of these settings. And then, of course, you can look at all collections here, and it will choose specific details about how you interact with every every collection all at once. Now, if you are creating your own individual page straight from customs, so all by itself and I'm just going to call this a custom page so that we know exactly what we're working on, and I'm gonna put it in the navigation area so that it is a top navigation page. Um, it's not inside of a drop down menu. It is literally a navigation page, so it's gonna be up on the top. I'm gonna hit create. So now you see, I have a custom page and it's up here in the navigation itself. I would go into the pages and grab it and drag it down to the bottom, and that puts it at the very other side of the navigation. And now I can start to build my page, and I can edit this header just by clicking on this drop down and clicking edit page info. And so then I come over here and I would type in. This is a custom page, and then I could add a description. There we go. So now you can see this is a custom page, and this is the text that I put in there. I could write a whole three paragraphs, and it's probably best to write your, uh, copy in some kind of a text editing program, like word or something like that. Um, but this is where you'll enter it, and then you can start building your Web page, and this is where you start adding images. You can add text. If you click on any of these, it creates a area for that information. So if I click on let's say I click on a button. It just creates a button when I click on that button. This is all the editing information about that. But so I'm gonna go in and click on the plus button and add an image. And when I do that, it's asking me toe upload an image. And if I don't have one toe upload like this one, which I do. So I just uploaded that image. But if I want to add another image below it, and I don't have it with me, I can always go toe, light room and click on light room, and it will open up light room inside of the Web. So if I just happened to be on my computer and I'm working and I'm on the Web, but I don't have my catalog with me or I'm on someone else's computer on a computer at work, I can come in here and click and find the image I'm looking for and then import that selected image. And now I've got another image. So I'm just adding images from light room, but not necessarily while I'm in light room, which is really fantastic because it gives me access to my catalog wherever I happened to be. Whenever I'm interested in creating my website and then I can also say, Well, I want to add another image right to the right of this. So I click here say, Let's add one more image and I'm going to choose, say this image. And now it's added to images one here and then it created one left and right, so it has the ability to figure out where you should put your images. I can always click on the plus button here and now I'm gonna be adding something in between this big image and these two small images because I'm clicking on the plus button above. And I could add, say, a video or audio link or I could even add a contact form. There we go. We've got a contact form in the middle of this, and I could say, Well, next to this contact form, I want to add another image. So I'm gonna choose, say, this image and now there we go. We've got a contact form there, an image here, image there. So it's really doing a great job of allowing me to do pretty much whatever I want and it's it's making sure it looks in keeping with the style that I chose for this particular website. So that's just a really brief introduction toe what you could do on Adobe Portfolio. I highly encourage you to just go and play because you can always come back to your portfolio main page and you can see that I've got my custom. U R L page here. Jared Platt, Us. I've just created Platt photography dot my portfolio dot com and I can create another one, and you could just keep creating websites until you feel like Yeah, that's the one I really like. And once you've got that one, then you can go into it, go into edit the site and then just click on update the live site or, in this case, if you want to publish it. If you go here and edit this site, see how it says down here. Publish this site because it hasn't been published before, and by simply clicking on there. It is now publishing the site so the whole world can see it if they know the address to the website, and this is what my website looks like. Right now it's got a work area. It's gotta blawg link. It's got a contact form and it's got a custom page. So as we scroll down, we see all of these different collections of work, and if I click on one of them, it opens up a portrait catalog, and now you get to see a bunch of portrait. And when I get to the bottom, it says, Hey, once you look at those, you might also like some of these. So let's go click on this one and now it's going to show me some images from that portrait session, and if I click on this is a custom page, it's going to take me to the custom page that we just made, and you can see that it's exactly the way we expect it to look because really, you're looking at the page as you design it, So it's kind of a whiz e wig, or what you see is what you get. So I love Adobe Portfolio. I think that is a fantastic tool, and it's completely connected into light room and the creative cloud, because all of your image is already on the creative cloud, so you might as well have a website creator that ties into the things that are already on the cloud and you can make edits and changes directly to your website from light room.