Create a Logo Design Portfolio in 10 Minutes! | Daniel Evans | Skillshare

Create a Logo Design Portfolio in 10 Minutes!

Daniel Evans, Logo Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (32m)
    • 1. Introduction

    • 2. Overview

    • 3. Obtaining Adobe Portolfio & Selecting Theme

    • 4. Preparing Logos

    • 5. Installing the Theme

    • 6. Uploading Logos

    • 7. Setting the Portfolio as Homepage

    • 8. Applying Company Logo

    • 9. About Page

    • 10. Order, Captions & Info Portfolio

    • 11. Tweaking & Testing Contact Form

    • 12. Get a Quote Buttons

    • 13. Social Media

    • 14. Header Image

    • 15. Nav Cleanup

    • 16. Favicon

    • 17. Meta

    • 18. Final Word


About This Class

** PLEASE NOTE:  This is NOT a logo design course. **

Do you want to get your logos online in a professional portfolio website?

Adobe Portfolio is here and it allows you to do exactly that!

With your logo designs to hand, I’m going to show you how, as a Creative Cloud user, you can develop a clean, professional and highly effective logo design portfolio quickly and easily, ready to go LIVE!

Every logo designer should host a portfolio online since it represents their home and hub of their entire business, so it simply cannot be overlooked!


Don’t waste time on complicated solutions which detract from you getting on with your creative logos and don’t feel obliged to have to use third party websites.

You can own your own site, with your own site and you can have it up and running in no time at all!

It’s that easy and I’m going to show you exactly how!

Don't hesitate.  Join us now and we’ll get started! >>>


1. Introduction: welcome to the course. It's my hope that the forthcoming information will enable you to excel as a designer. If you're succeeding in your skills, it means I'm succeeding as a teacher. If you have any questions, please don't hesitate to start a discussion, and I'll do my very best to help I post new courses on a regular basis. So if you want to stay up the date, please be sure to click. Follow next to my using them by clicking follow. You'll get priority announcements when I launch new courses when I share, Resource is and when I launch contests. 2. Overview: Hi, My name's Don Elevens. I'm a professional log or designer. Do you want to get your log or designs online in a professional port for your website, The door be port, fall yours here, and that allows you to do exactly that with your log or designs Toe hand. I'm gonna show you how as a creative cloud user, you can develop a clean, professional and highly effective log or design port for your quickly and easily ready to go live every log or designer should horse deport fall your online since it represents the hormone hope off the entire business. So let's go ahead and explore a door be portfolio to establish your log or design website. 3. Obtaining Adobe Portolfio & Selecting Theme: So here we are at the door, be dot com. Obviously, this is where you can acquire the creative cloud suite. I'm actually logged in a present, so I can't say the options that you might see on. Of course, I already have Creative cloud, but you will say the options on their for creative cloud, as you can see acting down Lord various APS that I haven't downloaded already. So once you have creative cloud, it's installed on your computer system. You can download applications were the website, or you can do it via the console, which is in the form of a drop down on the Mac. It's a top right and clicking upon that, a window like this appears with all the list off the applications. If a school down, I can find the one that we're looking for, which is portfolio as insight already installed to have got the launch icon There, you'll have the install button, obviously, so go ahead and press that on the software will install. Now, this is basically just a registration. I think it gives you access to the website. When I press launch, it takes me to the WIP site and I'm given two options, either a gallery of work or splash page. Now the Splash Page, as it suggests, is ideal for creating a single page website. But the gallery is ideal for log or designers for sure, casing many bodies of work. So I'm gonna go ahead and select gallery of Work on, and we're going to select a theme So off. Ludwig Hagen, Marina Andreas Lucas Martyr MUS series. Now, quickly looking at those I'm going to select cities. This looks a cleaner still like the grid. It's simple. I don't like pictures that are neighboring each other without a seem. So this is the one that I'm going to choose. It looks pretty consistent and its design. So now it's preparing the theme. So we just have to wait until that's done, and now we can start uploading our work 4. Preparing Logos: So here I am in Illustrator and these nine Law Gore's represent the pieces that I want to put into my portfolio before I do that before I open. Lord, I need to prepare them, however, and what I want to do is I'm going to put a square backing on each just saw that displays proportionately to the rest of everything else. Each log was going to sit on the same square, so it's gonna look consistent. So I'm gonna go ahead and do that one of selected the rectangle to holding shift to keep a skway. I want to pull that out. I want to go to object Korean send to back. I want a copy of this across. Use an old on shift for the next local. I'm gonna do that again. I don't want to select all three of those squares. I'm gonna pull a copy of that down for the next rule of law goals and I want to do it again for the last rule of law goals. Once done, I want to select the first local. Well, I got the align panel beneath align objects. I'm gonna click horizontal line center and then I'm going to click Vertical Align Center. I want to do the same for each one. So with fact, don't. Just in the last one here, I'm going to take each one. Starting with the first I'm gonna go to copy new. I want to paste this end to a new document and I'm gonna export this before I deal. However, I'm going to increase it in size like so. Because it's vector shouldn't make any difference if we increase it. So I'm going to go on export export as And I'm just gonna name this local by your regions. So with the prefix log Oh, I know what needs to be applauded. And obviously I have the details of what local that is it bio regions. So clicking export. I'm gonna do the same for each one going to the next and a copy. I'm just really this I'm pacing that in enlarging it. What exact size this is enlarged to Because the software will do it on the website. It will reduce it to the size that all the rest are. So I'm gonna go to file export when export as once again I'm gonna call s local wicked. Needless to say, I'm gonna do exactly the same for this log or here on the rest of them. So let's just finish off this export as local 90 want. Okay, so following that procedure for all nine law Gore's I'll then have a complete set of law goes, which will be displayed on the website on here. You can see those exported images on my desktop ready for upload. 5. Installing the Theme: when we launched Adobe Portfolio. It opens a browser and brings up this site. Written, click Create new site written Click gallery of work, which is more appropriate for log or design portfolio websites because it gives us a grid of images. So clicking upon this were presented with a range of themes. Now, looking at these themes, I think there was two which were appropriate, and it's this one here called my Series on Sawdust. Now the other ones 10 have like nice grids, but they don't have gaps between each picture will look, which looks a little bit inappropriate. So I want to go for this. One has gaps between the images, and I think it actually looks like a log or design port for your website. And so I'm gonna go ahead and select sawdust on its busy being prepared. 6. Uploading Logos: So here we are in the adore be port Fall your interface. You may have noticed on the last screen shot in the last lecture that there was a box here with law goes inside of it. This was actually something that has bean imported from B hands. Adobe took over B hans and anything that you upload their in your count seems to be dragged in here and the door be portfolio. Now, in many cases, that won't be what you actually want it certainly not what I want for the demonstration. And so I went ahead and delete that that So we're starting from a clean slate now a sickly enslaved. But there's actually a convenience here were given to pay just to start out with which is work. This is the main page, which is currently blank on were given a contact page which has a form on it. So if a click pages and integration to the left one click contact here and here we have our form contends three fields name, email, address and message. And this is basically all we need for the client or prospect. Contact us to inquire about log or design prices and whether we can take on the project. That's good enough. We could leave this as it is. So our next force, the primary focus, is getting our work on the website, and we want our work to be on the main page. We don't want to make the visitor jump through hoops to get the our work. We want it to be in their face. We want them to see the quality. We want em lick, lick, contact, unfailing this form. So without further ado, let's just go ahead and upload those images that we prepared an illustrator to do this. Let's click pages and integrations. Let's aren't another page clicking page on the about page pop up. Let's give this a name by clicking in Just going to simply call this law goes on, I'm gonna click create Page. With that done off, these options are gonna select four or grit like so, and I want to click upload files and I'm gonna begin toe upload my fails that I created in door be illustrator, and when I select the first file name and I'm gonna hold shift and I'm gonna click the bottom saw that select all. I'm gonna click open, and all of these images will now be imported into the page like So Now you'll see I have a tall of nine Law goes here, which is led toe having five in a row at the top on four beneath. So I'm gonna be productive, and I'm just gonna go ahead and introduce another local. So I have two rolls of five here. So this is the process you're going to use if you want ads, Law. Gorse your portfolio in the future. So Clinton top left and gone to al it grid, then a top, right. I'm going to click on to Fort Wars, then upload files. I'm gonna locate the file again on my computer. I'm gonna click open on, you'll see that log or is salads to the collection. 7. Setting the Portfolio as Homepage: So now that we have, our law goes up, LOL it. You'll see that uploaded to a page called Law Cause and not the Main page saw. We now want to make this the main page saw that one visit as any of the site they see. The law goes immediately. We want to grab their attention. We want a shore, our work, and we want them to click the contact form. So to make this the main page, we're going to go the pages option on gonna show you how the site is at the moment. Like licking. View your site on, you'll see it's Blunk. We have the work page here on the law goes page, which is separate and we don't want this. And so we're going to go back. We're going to click on pages and integrations to the left on you'll see the list of pages here to the right of law goes, I want to click this arrow and I want to click sect as homepage. I want to click change homepage to confirm we're fact on. If I now launch the site by clicking update Life site at the bottom, you'll now say that all of those law goes are now on the main page. So this is exactly what we want to capture the attention of the prospect. 8. Applying Company Logo: So obviously your website wouldn't be yours unless it's branded with your log or design sort of. Put in your Lord or design that the top left we go toe edit Andi with local container selected. We click image on and down. Here we can click, upload image. We can locate our log or file one selected. We click open Click Done. So now you can see that your log or design has bean inserted. So now the sites, together with its law, Gore's omelet bronze has came to life. 9. About Page: to instill confidence and the prospect who visits your website, you need to give them some information about yourself. Many people warned by blindly, so it's best that you dedicate a bit of time. Writing a couple of paragraphs doesn't have to be. Q. Indeed, ill. You can just describe what you're good at, what your skills are, what your passions are and things like that, and obviously in mentioned the business on the log walls you've designed in the past. What helps considerably in making a connection is a photograph of yourself. Now I do realize that people don't want to put photographs off themselves out on the Internet, but they're always around this. Firstly, it isn't compulsory, but ah would suggest that you do present something now. You can get cartoons developed of yourself and then use this as a way of kind of connecting with your audience. It isn't real. A such bullet more real than the clients or prospect guessing what you look like. How a person looks shouldn't make much difference it all. But if you do present something, it does tends to make the connection. So that's something the bear in mind. Anyways, let's go ahead and create that about pitch. So we're going to go to pages on the left. I'm going to click the plus icon a bottom right When I click Page, I'm going to call this simply about I want to click, create Pitch with a Stone and represented with those options once again. Now all they want to do is click attacks here. I don't the end of the text appear now already prepared a document with my details on it, and I've caught sort in the clipboard. Now I'm just going to paste in my details, like so, using the cable chocolate command and V on the Mac to paste. Soon there's my information. One highlight that all. And I know just the paragraph C agony, just defense and the phone sizes and colors. I'm just gonna keep it as it is. It's a nice, great much is the site. It's a default gray. So I'm gonna click the line left so it brings it over towards the left hand side. So next I'm gonna go down here until a plus appears. That allows May to insert another module, and it's gonna be an image module on. We locate the picture of myself on my computer were gonna click open and that will insert it in the bottom off the tax. Here. Next on, go down and click another module, this time with inserts and text. I'm just gonna insert my name here, perhaps of the title Local designer that don't wanna click update live site. I'm gonna wait until the process is I'm gonna click. View your site Here we have the man page with the law goes here we have the navigation to the left with the about law goals and contact clicking about to preview the page that was just made on there. We have it information pertaining to the designer which instils confidence in the prospect . 10. Order, Captions & Info Portfolio: So now that the portfolio is established, we might want to make some tweaks. Most importantly, we're going toe want toe add captions. If we take a look at the site as it is, you see that these are just playing images. One feature, however, is if we click the image, we get the larger version off it. So that's why it was important to make high res images in Illustrator because we get the large output here. Now there's no information here. So what we're gonna do is we're gonna add captions. Captions are just names given Teoh each log or design. Now, when you mouse over, it's gonna sure the caption. So this is like another aesthetic. It makes it look nice and makes it look professional. So what's go ahead and do that? Clicking Lee at the top left we go to add it. Great. And here we have options that aren't captions. Beneath each log or design we can all saw drag and drop to put the law goes into a different order, like so saying, put them in any order that you wish. So let's go ahead and a Sinek option bio regions. So we get the company name like so and I could have some further details of still west. So 91 seconds for the next one four teak? I think so. And I do this for each one and others little or as much information as I want, obviously, to an extent, if I click done yet and see how this is going to appear So clicking up the live site once again, we're going to see how these captions appear on the live site. So if a mouse over this now, you'll see that less appears of the bottom. Likewise, if I do it here, I got the caption at the bottom. So if I click in tow by your regions, you see that it's also at the bottom down here. So that just gives about a look to the site, and it gives a little bit more information. 11. Tweaking & Testing Contact Form: our contact page is of pinnacle importance. It's this page, obviously, which are prospect is going to use to get in touch with us. This is the link between prospect Onda work, so we need and sure that it optimal on. We need to ensure that it working above all. So having went to the contact page and the page is here, I'm now going to add it. A field. This isn't as important as checking the submission of the information, but nonetheless, I want to do this first. I don't want to click to the right here that down with our own will select Add a label on and I'm going to type in. Tell me more about your local design requirements, and this makes it less generic. It does relate. It's to the log or design industry. It's a little bit more friendly than just about or tell us more. So with that done, I'm gonna test this to see if it's working. Name, email address and tell me more about your log or design requirements. Is mawr than enough for now? If we want to discuss the project and further detail will do that by reply to the clients will ask for more information if necessary. Then we'll go back and forth about the project. So let's click Update Life site and let's see how this looks clicking. View your site. Let's click in Teoh Contact so he would have the form. I will enter my details to test the form, and I'm gonna submit this and this information is sent to the email address associated with the creative cloud account. And sure enough, that email has Bean received sought. The contact form is working fine. So we've established contact between the prospect on ourselves. If you wish to set a different email address in your contact for me, simply quarter the edits customize uninformed options you can stipulate on alternative email address here. 12. Get a Quote Buttons: So we're going to insert a get a quart button To do this, we go to the left hand side. Customized design. We click button on, you'll see your button is inserted here, which is edit this button. So if I click the pencil top left, click a button here. Elling, edit the text in capitals, I'm gonna type get a quote, exclamation Mark andan are all the arrow was important because it has a psychological effect. It drives them forwards a prompts them to do something. So with that done, I'm gonna go to normal tap and liking. Select the color here. Now, this is the background color off the button. Now, I don't want this to be black as it originally is. I wanted to be a strike in color, like green a green Also prompt action to go. And so I'm gonna just this cool apple and bringing up here a nice, bright green. I'm gonna click done. And here we have the get a quart button. Now, before let's finalize, I'm gonna go in and I'm going to change the link. Gonna go ahead and put in once again and you'll see it says linked to here. I'm gonna click the drop down and I'm gonna select contact when a click done once again. And now that is the button complete. Naturally, I want this on the other page just to and the other page is about. So I'm gonna go over to the about pitch in that and I'm going to school down. I want to go the button again on the left hand side, someone to go to the options at it button. Once again, I'm gonna type and get a court exclamation mark forward are all once again, I want to go the normal tap. I want to change the color of this. Didn't take note of the hack scored of the other ones. So I'm just gonna select any green or at least one that matches as close as possible to the other one. For now, I need to go to link to on contact, as before undone. So there we have another Get a court button. If we preview this by going update live site, we should be able to test the button and all its glory clicking view site Gonna click, Get 1/4. This is the men pitch and it leads me to the contact form. So it's got the about page and test the one over there and again leads making contact form . So that's working beautifully. Now, being a designer, it's best things are perfect. I'm gonna go back with this button here. Click edit button on. I'm gonna click Normal. Andi, I want to click the color again on I'm going to drag over this hex cord. Right click Copy. I want to click done. I don't want to go to the other page. The about page. I'm gonna go down on the button. Top left. I want to click Edit edit button Normal. I'm gonna click that color on day. I want to drag out in here and I'm going to use control and V All right, click on Pieced And I want a pace that hacks in I wanna press return So we have consistency with the Get the court Green buttons. So no matter what page the client of prospectors on the sea, that big green button in their face, no matter what page they are on 13. Social Media: if you have your social media established, such as a YouTube, Twitter and Instagram to name but a few, it's worth putting on the social icons at the bottom of the page. And you can do this by gonna the left. By selecting the A pencil on going to social icons. We can click each every click the icon on the car going click aren't link on weaken paste and each there's Twitter, Be Hans Linked and Facebook Instagram Dribble on Google. Plus I will a piston here, my Twitter. Thanks. So I want to click done and you'll see that the Twitter icon appears down here. And I can do this for the other social media platforms of a saw wish ever Click Update. Live site. Just let it Lord and I want to click. View your site. You'll say that the Twitter logo is at the bottom of the life site. I'm gonna click upon that, aren't you? Are not feel end up at my Twitter page, so that's a social media icons again. That's one of the primary features worth putting in there. Now, if you've got a lot of information on social media platforms, it does help to give credibility if the prospect was to click in them. But on the flipside, they're also clicking away from the Get a quart button, so you need to bear this in mind. If we don't have much on your social media platform, it's probably not worth risking driving the prospect away. Ultimately, we want the prospect to be clicking on the Get a quart bottle. 14. Header Image: while still recommend that all sites of this nature are kept clean and simple. We can't go a little bit further with the door be portfolio. There's lots more weak and introduce by means of the modules if we click plus, once again, you say we have image taxed four or grade light room video audio I m Band button social icons Contact form. Now, with the image capability alone, this Orton's a hell of a lot more design potential. For example, we could place a header on this page in place of this garish tax appear in a similar fashion. We could also do the same for the about page. So it's an example. Let's go ahead and do that clicking the plus, then image. I'm going to select the pre made header image that I made in Illustrator and I'm gonna open this. You see, this is now placed in the document like so now one click Edit on Gotta reorder page content on. Click this image and drag it up with the top before the grill of law. Gore's clicking Save new order. You'll see it appear appear. No, it's already looking better this design say it looks a bit more vibrant on its in line with the general brand. You'll see the colors here, the log or reflected on the font, which says, Log or design, which is all important. Now we're still left with this garish text appear, they get rid of this. We can go to our edit pain. We can click this page here on weakened click page header to disable it. You'll say that turns off. We can also do the same for all pages by clicking the same for Page hander here. This will disable, obviously on all pages. For now, I'm just gonna leave it at this pitch disabled. So now that tax is gone and we're just left without nice aesthetic header. So clicking up the new site, I want to see this life. I'm going appreciate it for what it is on. That there is looking like a nice, clean professional log or design portfolio 15. Nav Cleanup: now always looking well, if I look at this navigation section here, it's got work at the top half a klick work offshore. You what this is. It's the default homepage before we set law. Gore's as the homepage, so I want read of this. It's actually called a gallery because it hosts all the pages or images within it. So I want to delete gallery names being displayed. So I'm going to click upon the navigation option on the pencil, and I'm going to go down to customize on next gallery titles. I'm given the option of sweatshirt off here, which I'm going to do. I'm gonna click done like so, and I want to go back to the locals Pidge, which is my main page on You'll say that we no longer have that we have nice, clean navigation. Alice, defying the way it is with law, goes first. The about US page on the contact, segregated with a little bit of a gap between just saw that it stands out 16. Favicon: You can also assign an I see your file your site, which displays a small picture before the U. R L and the address bar. This gives a nice professional touch, and it also helps people identify your sight amongst the bookmarks. To do this, go to settings. Five. Icy or click Replace image and you can select a little square image off your local design symbol like so and then click open. And this will create the icy or image on your behalf. And it will put it before the U. R L in the address bar clicking done. This will secure that. Now this will be a parent. It's not something I ensure you at the Mormon. Once this has published, you will be able to see that little graphic next to the address. So with that done, you've achieved the more professional touch 17. Meta: So now let's take a look. How weaken and the meta data the method it is going to ensure that your website is compatible with search engines Saw that the data can be read to irrelevant degree. Answer that in a tract traffic. So let's go ahead and set that we're going to go on the settings by clicking the cog, and we're gonna go a search optimization. Here we have the website title changes to your company name if need be, I'm gonna keep mine as it is in the matter. Description is gonna do description of the company with the keywords Fact that in that just to keep it short, I'm gonna and a professional log or design. Now, obviously, it could be a little bit more creative with that. But I'm not going new just for the sake. This example. Meta keywords. I'm going to end all the obvious, such as law, Gle, log or design log or designer company, local business, local and branding. So that covers the jest of that laws of the men keywords associated with such a business. Next, we want to ensure that allow search engines the index. My site is checked Ah would suggest that you do do an initial submission to Google. At least don't depend upon the door. Be to put your side out there. So that done. Click done. So that's marks completion off the meta data. 18. Final Word: well done for reaching the end of the course. I hope the information has proven valuable in extending your skills. As a designer, I post new courses on a regular basis, So if you want to stay up to date, please be sure. Click follow next to my user name by clicking follow. You'll get priority announcements when I launch new courses when I share Resource is on when I launch contests.