Branding on a Budget With Elements and Affinity

July 25, 2019 posted by



when it comes to creating a branding package for a new business whether you're working with logos and business cards or websites and social media graphics you basically have two choices either you can hire somebody to do everything for you or you can take care of it all yourself if you're working on a budget then handling everything yourself is going to be by far the most cost effective method however if you're not an experienced graphic designer or web designer then you're going to need a little bit of help and that's where invited elements comes in in this course we're going to go through how you can use infighter elements to get a head start on everything you need for a branding package and we're going to cover how you can use the affordable affinity designer to edit all of your graphics in the process by the time we're done we're gonna have a complete branding package with all the essentials of a new business needs for an online presence as well as some print material for a budget of less than $80 so let's go and get started branding on a budget with elements and affinity I'll see you in the first lesson hey I'm kids welcome to branding on a budget with elements and affinity Before we jump into putting together a branding package we're just gonna touch quickly on while we're taking the approach that we are in this course if you've got a new startup business and you needed to put together all of the different graphics that you require if you're needing to put together a logo a website some print graphics some social media graphics if you go to a graphic designer it can be a very expensive endeavor so the alternative of course is to do it yourself however even that can be a very expensive endeavor depending on the process that you use so what we can look at doing is creating an entire branding package using only two things we're going to be using in photo elements which is a website that has a ton of different ready-made graphics that you can use it has ready-made logos ready-made sites all kinds of different things for just about anything that you could possibly require for a new business now to access these all you need to do is just subscribe it's a monthly subscription but even with just a single month subscription you can jump in and you can download as much as you want so everything that you need for your project is available here as you go through the site you'll see that a lot of the different graphics in here say that you're going to need Photoshop to edit them a Photoshop right now requires a monthly subscription and unfortunately it has a minimum of 12 months required for your subscription by the time you've gone through your whole 12 months your graphics for your startup business a long since finished you're not using Photoshop anymore but you've had to pay for it the entire time so what we're going to be doing instead is using affinity designer affinity designer has a fantastic import process both for graphics that are intended to be edited with Photoshop and also graphics that are intended to be edited with adobe illustrator if you were to get both of those products together from adobe then that's going to blow at your budget pretty fast so what you can do is get affinity designer instead and it's a one-time purchase of $49.99 u.s. at the moment and on top of that if you can move quickly enough you can get a lot done within the duration of the free trial I don't mind that this is Australian till this year but US dollars is $49.99 so if we take that $49.99 amount and the $29 for one month oven photo elements then the sum total is only 78 ninety-nine and within that small budget you can create absolutely everything you need for a brand new startup business and will also put you in a position where you're not dependent on any external designers you have the software you need and you have the sauce graphics that you need to make any tweaks and adjustments to the coloring to the styling to anything that you need to do for your business's graphics so what we're going to be doing in this course is taking you through how to find the type of graphics that you need inside of auto elements how to work with affinity designer to edit everything and we're going to take through the whole process of putting together a complete branding package on a budget with elements and affinity so in the next lesson we're going to start by exploring your vital elements a little bit I'll show you how to find your way around the site and how to start finding the type of graphics that you need and we're going to keep that off by finding a logo and for the purposes of this course we're going to imagine that we're creating a branding package for a yoga and fitness gym so that is coming up next I'll see you in the next video hey welcome back to branding on a budget we have elements and affinity in this lesson we're going to be doing a couple of things primarily the purpose of this lesson is to pick out a logo template that we're going to use for our imaginary startup Jim but we're also going to do in the process is have a bit of a tour of invited elements so that you know how to find your way around there's a lot of stuff in here so if you're going to be trying to find specific types of graphics for specific types of purposes then it can be helpful to understand how the site is structured so you know where to look for what you need the front page that you can see here is actually most helpful once you've spent a little bit of time already looking around because once you have it's going to customize what you're seeing on the front page to try to show you things that you're more likely to be interested in so I've already spent some time looking for graphics to do with yoga and fitness for this project so it's showing me more of those same things to get up to that point there's two main ways that you're going to move around the site you've got the browsing menu up here and you've got the search field up here which you can refine down by categories now there's a couple of places that you're going to be looking at more commonly than others for this type of project you're most likely going to be looking in the graphics section the graphic templates section the web template section and when you're starting to add content into your site you're also going to be looking at the photos and as you can see there's a whole bunch of other stuff in here as well we're just focusing for now on what we need for this particular project at first it might seem like the graphics category and the graphics templates category are kind of similar but the difference between the two is the graphic templates are meant for you to take and customize so they're designed to be turned into something else whereas the graphics for the most part are pretty much designed to be used as is so for the first step of our project for example we know we want to find a logo for our business because for our business we definitely want to change it that means we're looking for a graphic template and sure enough under the graphic template menu here you can see we have this logos subcategory before we go into that subcategory I'll just show you the graphics section really quickly so you can get an idea of what I'm talking about so we've got things like illustrations and icons that are really designed to be dropped straight into some work whereas in the graphics template category this is where we've got things that are designed to be changed so we have stationery and business cards and logos and mugs and all those types of things so that should help you with finding around the site a little bit so let's jump into the logos category so we're going to go up to browse go up to graphic templates and then we'll jump into logos and here are a bunch of ready-made logos that we can use so our imaginary start up Jim we're going to call it yoga works that's going to be the business name so we are going to need to have a logo that fits a two-word name we also need something that fits the style we're bringing yoga and general fitness together so we want something that conveys the feeling of fitness and gym work but is also a little lighter and corresponds with the feel of yoga at the same time so one thing that we can do is just browse through the existing logos just have a look through the categories and see what we find we can sort by popular or we can see some fresh logos that are newly added and look through things this way or this is where the search field can come into play so we know we want to search within graphic templates that's where our logos are so inside logos we're just going to search for fitness so now this is bringing up the kind of logos they're kind of templates that we need for our project obviously you can do the same thing for whatever type of business you're an integrated branding package for just get into the right category use the right search term up in the search field and then you can see over on the left here as well we've retained this check mark in the logos category here so it's just showing us logos even though we searched in graphic templates up the top here it just says graphic templates because this is still checked off it's only showing us logos so we can add extra check marks in here if we want to see other things related to fitness in the graphic template category as well so let's have a look through at some of the options that we have here so these are all really cool we need one that fits the look and feel that we want to give for a gym that has a focus on yoga so this is a little bit too this would make me think of a gym that is focused on weight training this isn't quite obviously enough to do with fitness that seems more like diet these again look more like weight training gyms so I'm just going to keep looking through we'll check out the next page it sounds a little bit more like the type of thing that we are looking for it's obviously a fitness logo but it also has a lightness to it that says that it's not necessarily a pure weight training gym I've actually already spent some time going through all the different logos that are available on this site and picking out a really good fit for this project I think it's a great idea to not necessarily just go to the very first logo you see that you like download a few have a look at them a bit more close up and then decide on the one that you like most for your project so for our purposes we're going to be working with this logo here so it's very similar to the one that we pointed out over here it just has a slightly simpler shape so that means it's just going to be a little bit easier to work with we can try to keep the shapes that you need to work with try to keep everything that you need to work with really as simple as possible especially if you're coming to this as a beginner it's just going to make your life a lot easier if there are fewer moving parts that you have to organize so then you can go ahead and just hit this download button here and download the graphic template into a folder that you set up for your project and then you'll be ready to go to start editing in it just as a quick note EPS is probably the better file type to import into infinity designer so if you see that especially then you know that you're definitely good to go so that is going to be our logo for our yoga works website in the next lesson we're going to go through a similar process here we're going to browse through and photo elements and we're going to find a website template so this time we're going to be looking in this section here we're going to find ourselves a website template that fits the shape of our logo template has the right style to match our business and also it looks like it's going to be relatively straightforward to adapt it into the type of website that we want for our project so we're going to go through that in the next lesson I'll see you there hey welcome back to branding on a budget with elements and affinity in this lesson we're going to go through the web templates that you can find on in photo elements and we're going to find one that's a really good fit for both our business our imaginary startup Jim yoga works and also the logo that we already selected so this is the logo that we've picked out to go with our business and we're going to make sure that the website template that we choose fits it both stylistically and physically we're going to make sure that there's actually a space in the template that can accommodate the logo that we've picked out so to do that before we actually start going through the website templates we're going to take a closer look at the logo that we chose in the last lesson so have the zip file that I've downloaded from elements and this contains the logo inside so I'm just going to extract that so go inside the logo template here you're going to have probably the best results if you work with the EPS version rather than the AIA version so we're just going to at least in Windows right click and choose properties and we can see this is the dot a I file right click on this one properties here we can see this is the EPS file so now we're going to go ahead and open this one up and there we go so that's open it up in affinity designer and everything's looking to be in really good form and we can also see that very helpfully this local artist has given us two different layouts for this logo so here we've got the business theme stacked underneath the logo shake and here we have it going across horizontally so that gives us some more options when we actually come to looking at the website templates and making sure that there's enough physical space for this logo to go in if we've got a long narrow space like this we're going to be able to put this version in if we have a shorter space we'll be able to put this version in all right so let's go exploring the web templates once again we can't add up to browse and then choose web templates and we can just start having a look through here things to look for when you're trying to find a web template other things we've already mentioned we want to make sure that it has the kind of feel that you want to get across for your business you want to make sure that it has the physical space available for the logo that you want to put in you also want to make sure that your going to get some type of feet with the color scheme that you're likely to have you so we have a logo here and we know we're going to have two fairly distinct colors so we want a website template that's going to let us show you those two colors off so let's look at this one for example so this one is very nice but it has a kind of a darker theme to it it's also leaning more towards presenting technology products so while we definitely could work with this template and convert it into a site for our yoga gym there would be a bit more work to take this and fully convert it than they would a template that's already sort of designed to be in the fitness space so let's do the same thing that we did before their logo and we're going to use the search field instead so just going to check in fitness and now we're starting to get some templates that are already designed to be used in the fitness industry so you can see we've got a few here that we can choose from but in actual fact the one that jumps out the most is the very first one here because we've got somebody doing yoga in the top section here we can see that we've got light colors so let's take a closer look now this looks a lot more like the type of field that we want for a gym that has a focus on yoga now what we can actually do here is click this live preview button and we can have a closer look at the template a lot of these templates are going to give you multiple demos that you can choose from they try to give you a bunch of different options so you can get a starting point that's closest to where you need to be we'll just have a look at the home page right so I've got a really nice little nation on the slide show up here this is where the logo is going to go and that actually looks like it would be a perfect fit for a shrunk down version of our logo so let's having a look at our logo so we can just imagine this shrunk down to the right size and then slide right in here that will be spot-on it's got a light feel it's definitely already oriented towards yoga and fitness and we should be able to get our color scheme in here so Freddy got these nice aqua rollovers aqua colors throughout here with the the links the buttons and everything so we should definitely be able to get in whatever colors we decide to replace these two with and the layout is not over complicated which means that it shouldn't be an excessive amount of work to convert this into something for our own business I think what we'll probably do later is just work with the homepage I'll show you how to replace everything in here with our own content how to change up the text and how to change up the color scheme all right so that's perfect I'll include links in the notes below this video for this template and I'll include another link for the logo so the two that we're going to be using the green fit logo and the handstand website template in the next lesson we're going to go into this template that we just got for our logo and we're gonna start customizing it and turning it into our own logo so we're going to modify the text that we have along the bottom here you're gonna put in the name of our business we might also choose some different fonts and we're going to change the colors of this logo so we can start creating our own branding colors that will then use throughout all that other graphics as well it's always a really good idea to start with your logo first because everything else is going to work around your logo get your logo right and then everything else can follow from there so we're going to do all of that in the next lesson I'll see you there hey welcome back to branding on a budget with elements and affinity in this lesson we're going to go through and we're going to customize the logo template that we already chose before we're going to add in the business name yoga works we're going to change the colors and we're gonna change the font that's being used here the first thing that we're gonna do after having opened this document up is we're gonna save it again because we're gonna save it into affinities native file format so just go ahead and save it as whatever you want so we'll just just add a little affinity the end of so we can tell it from the other files save that out and the next thing you're gonna want to do is go all the way down to the bottom layer down here in the layers panel on the right and we're actually going to lock this bottom layer there's just a white box that's behind these shapes just goes down here and we don't want to accidentally grab that and move that around when we're trying to grab other things that are in the document so just hit this little lock icon here and now we can no longer drag that back around accidentally next we're not actually going to include a tagline here we don't really need one and to be honest at that size is probably going to be a little too small to be readable and be useful so what we're gonna do is just drag a box around all of those letters and just hit delete to get rid of them and then next up we're gonna change this lettering here and the one thing that you will miss out on when you're just using affinity designer to work with a template like this is you won't have editable text a lot of the time so what we've got here is just individual shapes that are just like the rest of the shapes to make up the logo but that's no big deal we've just got a couple of words all we have to do is just type out the words that we want which is really no different the amount of work that we would need to do anyway we have a choice that make you we can either use the same font that's been used in this original design we have two fonts here and if we have a look inside the files that we unzipped from the original download we can see that there's a documentation file here and that file is going to tell us what the names are if the fonts that are used in the logo so this is our documentation and if we look here we can see that they have specified that this is the link that you can use to go and check out these fonts on google fonts if you see an address like this all you need to do is look at the very end here after the colon you'll see there's this little plus that separates these two words that tells you that the font of a word rather on this side of the plus is one of your font names and on the other is the other side so if you choose you could use these fonts but we're actually going to try to make it look a little different to the original just add as many points of difference as we can by using some different fonts so for the first one we're just going to use a system font make that nice and straightforward so for this first word we're just going to use trebuchet ms' so we're going to type out the first word of our business name which is yoga so this is the text tool here and you want to make sure you choose the artistic text tool here rather than the frame text tool here the frame text tool is more for drawing out say paragraphs of text whereas we just want a single word so it's use this tool and then we'll click and we'll just talk about yoga obviously that's too small to start with so I'm just going to grab this corner and just drag it out so it's bigger so it's about the same size roughly now we won't get that too perfect now because when we change the font it's going to change the size of the letters a little more you can't actually also change the font size up here but when you're doing something visual like this often just clicking and dragging that corner is the easier way so we're going to go down into our list of fonts that we can choose from and we're going to go for trebuchet ms' now we are going to change these colors later but for now we'll just have everything looking the same so what I did there was I grabbed this little eyedropper here I click held it down and then I just move the selector over the color that I want to select now if I want to commit this color to this shape I need to put this color into this little circle here which I do just by clicking all right so now that's our first word is done and now we can kind of line it up a little bit better and make sure it looks like it's roughly the right shape or roughly the right size or height rather so that's pretty good just move that out of the way now I'm going to draw a box around the word green we'll go into layer panel here and just to make things easier I'm gonna press ctrl-g to put all of those into a group and then I'm just going to uncheck this box to hide them now we can put yoga up here we'll fine-tune the positioning after we've done the second word for the second word works we're actually going to use a non system font we're going to use a font called EXO – I already have this installed but I'm going to show you a quick and easy way to get access to using google fonts on your system without having to actually download the front files and install them onto computer so what you want to do is install a program called Sky fonts I'll include a link to this URL and the notes below this video what sky fonts does is it gives your software access to any fonts that you specify with that you need to go through the process of manually installing front so it really just makes the process a lot easier so we're going to do is install sky fonts just click that blue button there that says install sky fonts and it'll take you through the process then once you have it running all you do is just come to this address you click browse google fonts and here you can pick out any fun that's in the Google Fonts library and make it available to your software through sky fonts so we want a font called xo2 so type in EXO Space 2 and here is our font here make sure you don't mistake EXO 200 for this one that's the original EXO font with a weight of 200 we want I guess this is a sequel front we want EXO to so then you don't have to install each one of these weights and variants individually all you have to do is go over here click this drop down check the box marked add entire family and then click Add and that's just going to make that available to your system so then as long as Sky fonts is running in your tray you're going to have access to all of these fonts without that laborious installation process so I'm not going to hit add because I actually have this font already installed on my system so just to make sure we've got a font about the same size I'm just going to copy and paste the word yoga change it so it says works we're gonna go all capital letters and now we're going to change that over to EXO too and I'm just going to change it to black which is the heaviest font weight that we have and just sample the existing color for now and we'll get this fit out of the way and put in works so I'm just going to get these lined with one another and actually I probably reduce the space in between them let's nudge that until it looks like it's properly lined up and I think we'll make it sir the center of the W is lined up under these leaves so that'll look nice and balanced yeah now that looks pretty cool so now we've got our business name in we've chosen the fonts that we're going to work with by all means if you want to experiment with different fonts for this definitely go ahead and do it or you can just use trebuchet ms' on the left and xo2 on the right now we want to change up these colors so that we've got our own unique color scheme and for this I'd like to go with I think we're going to change this to a blue color and this to a green color now that's another little piece of advice when you're choosing colors if you're not sure what to do is just pick a shade of blue it's the safest color that you can go with blue will work and just about anything and there's been all kinds of studies done that show that the color blue tends to elicit feelings of trust and calm so if you're not sure what to do just choose blue so all we have to do now to change these to blue is just click one of these shapes hold shift click the next one keep shift held down and click the next one so now we've got these two shapes and our word here and go change this to first up in the top right here of our color picker make sure you have sliders selected and then we're going to switch this to HSL because we don't want to change anything other than the hue so just to show you what I mean the H here stands for u S stands for saturation and L stands for lightness now if we change the saturation we take it all the way down it goes to gray all the way up it gets really lurid and bright undo that the lightness if we take it all the way down it goes to black all the way up it goes to white so we don't want to change those all we want to do is change this to a similar color just blue so we can just drag this hue slider along until we get a blue that would like so I'm gonna say around about there looks pretty good so that is a hue of 190 if you want to just punch that straight in here you can just punch in that number now we're going to select our other shapes by clicking the first one holding shift clicking the second one for this I'm gonna go with a lot of green so we're gonna move this up in this case this one's probably not going to get quite bright enough it's still going to look a little drab so with this one we are going to boost the lightness up a little so they just bring a little bit more life into our color another little hint when you're working with affinity designer if you want to get a clearer look at what you're working on and you can't quite see because you have these outlines or unselected objects what you can do is hold down space now that's actually going to give you the ability to pan your document around but it has the added bonus that it will hide any selection outlines so releasing space holding down space so that just helps when you're choosing colors so that green is probably still a little too on the blue side I think so I'm just going to keep dragging it up just nudge up the lightness just a little bit there we go I'm happy with those colors and now if you want to just copy and paste these colors straight in what you can also do is switch over to RGB hex in this drop down here so then the hex code for the green that we just chose is six two b-52d you just type that straight in there and the hex code for our blue is 3/8 v4 Cee and I think that alone is just a tiny bit off so I'm just gonna select that nudge it up there just a couple of pixels sometimes if the alignment tools come out a little bit off there's nothing wrong with just eyeballing these things until they seem right alright so there is a logo it's going to save that work and we can go through the same process to adjust this here and then again you can do the same thing down here or you can even just copy this version of your logo paste it down here and then resize everything until it fits so now we've got our logo is ready to go our colors and selected our fonts are selected so now we're all set to take those three things and integrate them into our website template so in the next lesson we're going to take a look and see what size we need to have our logo at to fit into our website template and we'll do an export of this logo so that it'll fit and we're going to look at how you can get these colors and these fonts integrate it into the website template as well so we're going to go through all of those things in the next lesson I'll see you there hey welcome back to branding on a budget with elements and affinity in this lesson we're gonna start customizing the website template that we picked out earlier so we're just looking at the demo again here I just wanted to give you a quick refresher on how it looks because all of these photos are going to be in place in the demo only so don't get a shock when we open up the downloaded version and there's just placeholder images in here we're going to get it looking all nice and pretty when we've finished the customization process so we've got the zip file here that I've downloaded from elements and we're just going to extract it and the site itself is inside this folder named handstand and the file of the main home page that you're going to look at is index so it's going to right click on that and open it up with Google Chrome okay so here is our template as I mentioned we've just got these placeholder images here we're going to replace those with our own images a little bit later but the first thing that we're going to do is get our logo in up here now the way that we're going to go about that is by going back inside the set of files and folders that make up our website we're going to go into this images folder and this is where all the images for your template are contained so basically this can replace them all with new images in order to update the site so we're looking for the logo image and we can guess that it's probably in the logo folder and there we go there's our logo and if we click on it in Windows Explorer we can see that the dimensions of this file are 98 by 64 pixels so what we need to do is replace this image with another image a version of our logo that is also 98 by 64 pixels in size so let's go back into affinity designer we've got our logo here we're going to just select the whole lot and we're going to copy such as ctrl C now we're going to make a new file and we're going to make it 98 wide by 64 hi and now we're just going to paste in those shapes that comprise our logo that we copied from the other file so just paste right now that's massive don't worry about that just scroll out so you can either hit ctrl and the minus key on your keyboard or you can hold down control and scroll out with your mouse wheel until you see the entire shape outlined now all we need to do is just shrink it down now by default when you start shrinking by grabbing this corner you're not going to be keeping the right aspect ratio so just hold down shift and then that'll do it and then you just want to drag this down to resize it until it fits in this space and it controls 0 to make you fit the screen and then we're just going to change around until it fits horizontally and just give it a nice vertical alignment as well so now we can export it just going to go up to file export this one needs to be let's have a look at this in properties needs to be a dot PNG file but right now if we export we're actually going to get this blocked in white background what we really want is a transparent PNG so if this logo needs to be used over the top of a color other than white that background color is going to show through so before we export our PNG we're going to go into document setup and into this color tab here and we're just going to check this box that says transparent background so now that is good to go I will go file export I'm going to choose PNG then we'll export and now we're going to go into the images folder and the logo folder and we're just going to replace this file here so we'll just save it's gonna warn us that we're replacing yes that's what we want to do now if we go back to our preview now we've got our yoga works logo in place the first step that's pretty straightforward the next thing that we want to do is change the fonts that we're using in this template so that we use the fonts that we we have up here I'm gonna try to keep the amount of hands-on work that you need to do is code to an absolute minimum here but we will do just a little bit but don't worry you don't need to be any type of coding expert to do this I'll guide you through all of the steps but to make it a little bit easier for you to do the little bit of code editing that you will need to do go ahead and grab yourself a copy of assam editor just go to assam dot io and download the installer for your your operating system this is just going to really help you along because you get all this sort of color coding of the different types of content it's going to help you tell one type of code from another type of code so grab a copy of that and install it it is important that you're working in chrome here because we're going to use some of the developer tools that are built into chrome to make this customization process as easy as possible the first thing that we're going to do is change the default font that's used all throughout this site to trebuchet the way we're going to do that is by going up to this menu here going to more tools and then opening up developer tools and we're going to use these developer tools to help us find a way around how the site's built and we're also going to use these developer tools so that you don't actually need to add a lot of code hands-on what you can do is just work straight inside these developer tools and just push your changes straight into your website file so I'll show you what I'm talking about so for example right here we have what's called the body element selected and the body element is where all the visible parts of your website are located and we're going to be working with two types of files as we edit this website template we're going to be working with HTML files which in a nutshell contain all of your content so your text and your images and what-have-you we're also going to be editing some CSS files which control the way your site looks so they control your colors and your choice of font and so on so right now we've clicked on the body element in this elements tab in our developer tools and then here we can see font family is set to be the lotto font but we want to change that around but we want to do is change the default font to be trebuchet ms' so what we're going to do we're going to double click inside here to allow us to type in and we'll just type in trebuchet space ms and put a comma and you can see that right away the text to you has changed so we've automatically just changed the way that our text looks all throughout our site and you can see that it's matching this font that we're using here in the word yoga so now that we've made that change there we've activated the sort of live editing that you can do through this tool so if we go back into the style sheet here you can see the change is ramping unicode there so what we can do is right click and go save as and now what we want to do is go into our hand stand folder that contains all our website files and we want to replace the existing default CSS file with the code that we've just changed here so we can actually check on the location of this file by hovering here you can see in the little pop-up here we see handstand slash CSS slash shortcode slash default CSS so go back into the sources folder right-click save as and that tells us where we need to look so inside the handstand folder CSS folder shortcode and then there is a default CSS file so we're going to save that out and replace the existing default dot CSS so now even if we refresh the site the changes to our font stay in place the next thing that we're going to do is change the font of our headings so that it uses the second font that we have here now in order for that to work we're going to need to tell the site to load in the font xo2 trebuchet ms' is a font that's widely available on computers by default but xo2 is not so what we're going to do is go to google fonts we're going to search for xo2 we're going to click this little plus button now that we've done that click this box along the bottom here and then copy this code here now we're going to go back into our file structure for our website we need our index file this is our home page I'm going to right click that and open it up with the atom editor that you just installed now you'll see two tags here that say the word had so you've got this one and this one have these two tags indicate the head section of our website the head section is the invisible section basically the body section is the pay you can see this is a part that you can't see this is where we need to load in our extra font so what we can do is just make a space and paste in the HTML that we just copied from google fonts so now that is going to make the xo2 font available for us back in our preview now we're going to do basically the same process that we just did to change our trebuchet fun so we have a heading here I'm going to right click hit inspect you can see up here we have h1 tags selected that means this is a heading level one now down here we're going to scroll until we see font family so there we go now that shows us that this is the font being used on this heading I'm going to double click to make this editable you're going to add a little single quotation mark type in XO space to add another single quotation mark and a comma and just click outside that space to commit the change and like we do before now that we've activated that live editing we're going to click this file up here and pay attention to the file path where we're going to be able to save out this file which is handstand slash CSS slash shortcode so click on that right click so and then we're going to replace the slider stylesheet save that and overwrite it now we're going to refresh because the exo font hasn't loaded in yet and there we go now we can see that the exo font is being used on our heading here now going to do the same thing for the other headings just going to right click inspect I'm going to scroll down in this window until we find the font family so this is just the same deal again double click Add in EXO to click this button here this is going to be just directly inside the root folder you can see has then slash style right click save as go back up into this top level folder this time it's this style dot CSS file we'll save that overwrite and there again we can see the new font being used on that headline so we'll just keep scrolling through you see that this one's already been affected by the changes that we made here's another headline we're gonna inspect that one this one is an h3 so same thing again XO two this time we've already made and edit to the style dot CSS file so now all we have to do is just right click and choose save and just about all of the headlines so if you see any other text that you want to change then you can just go through that same process again so you might want to change this text as well but we want to go through and change absolutely everything the main thing is that you just see how to go about making these changes when you want to next up we're going to start changing some of the colors so we've got this sort of aqua color here and we want to change it to the blue color from our logo so it's a similar process again but it's going to right-click and inspect and you can see here inside the slider that CSS file we have this color code now we can just change the color code right here but this color this aqua color here is likely used a couple of times in this file so what we're going to do is open up the file in Assam and we're going to do a find and replace to change a few of the colors all at once so we're going to go into the CSS folder back into the short code folder and open up slider inside atom so there's a slider style sheet we know that this is the color code that we want to replace so I'm just going to copy that we're going to hit ctrl F to do a find and replace so if paste in the code we want to get rid of and you can see right away it's perm four of these colors we want to replace it with blue just made a record of the color codes that we want to use so now I'm just going to replace it there and just go replace all now if we go back to our site and refresh now there's our blue and you can see that it's shown up in a couple of other places as well doing that finding replace in the style sheet is one of the ways you can change the colors I'm going to show you another way so we just look at these little blip as these forwards and backwards arrows on the side of our slider here so I'm going to right click and inspect one of those and now down the bottom here you can see the background of these divs has a kind of a opaque looking color here and it has a different type of a color code now the reason for that is so that we can add this number here at the end which controls how transparent the color is so that means it's not going to be very easy for us to just take our blue hex color code and just drop it in there what we can do instead is work a little bit more visually we can click this button here this little square and it's going to give us a color picker and now we can do the same thing we did when we were adjusting our logo in the first place and just change the hue by moving this little slider so we want Alice to be more blue so we're just going to move it into the blue a little further and that's going to change in real time so now we just click away to apply that change so now we could see we have more of a blue color and another thing you'll notice when we come up close here is when we hover we've still got a little bit of a green color however when you look through this code here you can't see where you can control that hover color now sometimes when you are working with a hover something the way something's going to look on a hover you're not going to see it in this panel immediately but you do know that what you're working with here is targeting the element that you wanted to change so to find the hover color we're going to click back into the full file here now we're going to scroll down a little bit until we see the word hover so this is all the styling that's controlling our hover color and here is our background color so now we can do the same thing again we can click the color picker and move that into the blue and then click off to apply that change and now when we hover over it's not green looking anymore it has a blue tone instead now we'll do the same thing again and we've already saved this file once before so now we can just go save and if we refresh our changes persist so we can do the same thing to modify this button here I'll go down a little bit to one that's a bit clearer we're going to right click inspect we can't quite see what's changing is color to green when we hover so we're going to click the link into the full file we're gonna scroll down until we see an a button with hover written under it now we can click the color picker move that into the blue click a way to apply and there we go now we have our blue color and we save we're just going to do one more change there's not going to be quite enough time to show you how to do absolutely every single part of modifying this entire template so what I'm trying to do is give you the tools that you can use to go through and do all of these tasks one at a time to complete the customization yourself and of course once you know how to do this you'll be able to do it to any other template as well so what we're going to do now is change this hover color that we have when we hover over one of these images I'm going to show you this one as well because like with the hovering colors that we just looked at before this one might be a bit tricky if you don't know exactly what to look for so we're going to inspect but there is no sign of the hover background color that we want and if we go in here we're still not seeing any hover color this is the hover code but there's no color in there the reason is this is doing something a little bit tricky if we expand this out we can see these little two dots here and after this is basically creating a little hidden area inside this part of our website they can be manipulated and animated separately to give us this cool little opening effect and here is where we see the background color for that hovering effect so once again we're going to move that into blue and now is a blue hover color see steps to find the color that you want to change our first two just inspect the area that you're trying to modify then if you can't find it try this clicking on the link to the file and looking for a hover color or something else it's fine to just go ahead and play with any of the colors just use color Pickers and just see what results you get because if anything doesn't work you can just refresh your page again before you've saved any of your changes the third thing that you can do is look for these little after elements or you might also see something similar that says before so we've got that hover in there go into our file and save it now if we refresh we can see that we have the blue hover color and so as I mentioned I'm not going to go through changing every single color here so basically the process that you want to do is go through open up each one of these files that you find inside this short code folder open them up inside Assam and do this same find and replace so find this color replace it with this color so you want to do that for all of these files and you want to do that for this style file in the main folder that's going to take care of a good number of your color changes and for anything else just go through the process that we just use just right click so up here for example inspect find the colors that you want to change modify them as you need to and then go through the process of saving out that file so I'm going to go through now and I'm going to finish making the adjustments just to the index page just at the homepage and then when we come back we're gonna start customizing the images as well so just to give you a hint seeing it get stuck this little dot here is not controlled by your colors here pretty much everything else is but this is an image so we're going to replace that and we're going to replace all of these placeholder graphics with photos that we get from elements as well so I'll see you back once you go through and finished changing the colors how you like and then we'll go through and we'll modify all the images as well in the next lesson I'll see you there hey welcome back to branding on a budget with elements and affinity in the last lesson we went through our website template and we replaced some of the colors so that we've got some of the blue from our logo throughout the site in this lesson we're going to go through and place the images as well so that everything is looking really nice so there's a couple of different types of images that we're going to be replacing here one is the photographs so wherever you see this sort of gray image with a set of dimensions that needs to be replaced with the photograph or another suitable illustrative image and these dimensions tell you how large the image is going to need to be in order to replace the one that's already there the other type of image is just a graphic that's used in the sides so for example we have this little underline here which is actually a graphic and if you look at this dot here you can see that that's still that aqua color that we had by default and we've also got this map marker on this map here which is also that old aqua color so we're going to use these two images these two graphics and that to get some of the green from our logo into the site so we'll go through that first then we'll go through how to replace images and when it comes to replacing these images here we're just going to go through a couple of examples we'll just go through replacing this image and this image here because once you've done that all the other images so these ones and all the ones down below the process is going to be identical so I'll just show you how to do it and then from there you should be able to go through and replace any image in any web template that you need to all right so to start with let's replace this image here in order to do that we need to know where this image file is inside our website structure so the trusty developer tools we're going to right click that image and inspect it actually we'll go with this one that just when we should open this up that just shifted the position so one of the things you can do to directly select an item in your website in order to inspect it is choose this little button here which lets you hover over different areas and get a more specific selection of exactly what you're looking for so right there you can see we've got a nice blue highlight over the image that we are trying to identify so we're going to click that that's selected this after pseudo-element and down down here you can see that it's showing us a background image with a URL for an image and it's told us that this is an image icon titled PNG so in our website structure let's go into the image folder the icon folder and then sure enough there's our title PNG so we're going to open that up in affinity designer and now all we need to do is replace this little circle here with one of our new color so still our logo here allowing us to sample this green color what we're gonna do is first up you can see that this background area here is locked and we can't add anything new to it what we're going to do is hit this little button here to add a new layer so we can draw our circle inside of that I'm going to choose this circle tool or ellipse tool on the left and hold down shift to make sure that we get a perfect circle and just drag out the shape now we can make sure that we have the right color selected by getting the color picker dragging it out over the green we'll switch back to our other image you can see right now that's white inside the circle corresponding with this color here so all we need to do is push our sampled color into this little circle here by clicking and now we've got our green circle in place now you can also see that there's still a little bit of the old color showing around the edges we don't want that so what we're going to do is cut out that part of the image to make that happen we're going to need to unlock this layer here by selecting it and clicking on this little padlock icon right now we are in if you need designers vector persona but this PNG that we're working with isn't made of vectors it's made of pixels so to edit that background image that's made of pixels we're going to go into a pixel persona so now this gives us a marquee tool that we can use to select that middle section of our background layer that has the old circle in it now we can just hit delete and there you can see that there's no longer any blue background now we're good to go to just export this image we'll keep it as a PNG and we're just overwrite the title image that's there so now if we go back to our site and we refresh it there we go now we can see that we've got the green that matches our logo in our title image too so now let's go ahead and do the same thing with this little map marker here so I'm going to grab this selector I'm going to move this around until it's right on top of this marker this time this isn't a background image this is an image that's put directly inside the content so this time we can see the image up here this code is telling us to look inside the images folder for a file name map – markup PNG so let's do that so back up into the images folder and there is our map market up PNG we'll have that one up in affinity designer – now there's a couple of ways that we can go about changing the color of this icon we can either redraw it in the new color or we can try to adjust the color of the image that's already there so I'm going to show you both ways and you can decide which one you prefer for little tasks like this first I'll show you how to redraw it so this is locked so once again we're going to make a new layer I'm going to grab the circle tool and this time we're going to start by drawing a circle out perfect circle that's the size of this hollow in the middle now we're going to draw out another circle that fills with about Paige now we're going to hit this convert to curves button and this is going to let us manipulate this shape a little bit more and we're going to grab this node tool so that we can make changes to these little circles here these are the nodes that make up our vectors now we're going to hold shift and we're going to hit the down arrow a couple of times until it's right at the bottom there now this is almost right but it's a little bit too rounded so we're going to convert this node to a sharp point by hitting this little sharp-looking icon that's next to this convert label here so now we're almost there we're just going to drag this edge out so it's directly overlapping our shape and once again we're going to push that green color that we already sampled earlier into this shape by clicking so there's the green now you might be wondering what this circle was for we're going to use this circle to cut out a little hollow inside our green shape let's make that work we're going to actually need to drag this white circle above our green shape now we select them both by holding down shift and clicking both layers now up the top here you can see we have this subtract button what that's going to do is subtract the white shape from the green shape behind it so we'll do that and now there is our marker so we turn that off you can see that it's just the same as it was before now that one is a relatively straightforward reproduction of that shape but sometimes you're going to have shapes that might be a little bit more arduous to recreate and you might want to just keep the graphic exactly how it is and only change the color so let's quickly look at how we can do that so we're going to unlock this background now what we're going to do is add an adjustment layer so I'm going to go to layer say new adjustment and we're going to choose HSL what this is going to let us do is modify the hue saturation and lightness of this existing image now if we start moving this around you can see the color changing it's a little hard to figure out exactly what color this needs to be by eyeballing it so what we're going to do is just draw out a little bit of a reference shape so we know that that's the green that we need to aim at and now we can just keep playing with this slider adjusting the saturation and the lightness until we get it to a match color so there we go that's pretty close it's not going to be as easy to get it to an identical color but it is going to make it a lot easier to just keep the graphic that's already there and work with it so for our purposes thing is we were able to recreate this shape we're just going to export this so once again keeping it as a PNG so that we can just export and overwrite the existing map market up PNG overwrite that and now we'll refresh and there's our green colored map marker so that's all of the graphics that we needed to change now all we have to do is get in and change some of these photographs and this is where it once again elements comes in handy because we're going to need some really good quality photos and you can find a bunch of really good quality photos by going to browse and go into the photos section so there's all kinds of stuff here and obviously what we want is yoga pictures so up in the search bar with photos selected here I'm going to search for yoga and now we want to look for something that's going to fit our top slider here it's going to close that down back at the original version of this template you can see that this works nicely with a fairly light colored image and we also want the ability to have whatever is depicted if you pushed over on the right side so there's room on the left for this text so that's what we're going to look for in these images here so these are not really nice but they're a little bit too colorful for our slider this one might be just right so let's have a look at this one so this could be perfect it's got a white background so we can add some white space so everyone to the left if we need to and push this person over onto the right side and the light color is going to work perfectly for our light themed website so let's go ahead and download that okay so here's the image we've downloaded as with everything else we're going to open it up in affinity designer now the thing about this image is by default it's actually very large it's 8,000 pixels wide by 6,000 high but all we need for our first slider image is something that's 1920 by 780 so what we're going to do is make a new document that's also 1920 by 780 now we're going to go into picks up a sona mode we're going to unlock this background image and we're going to copy it then we're going to paste it into any document you're not seeing anything there because the picture is gigantic so all you have to do is just drag this corner down until the image fits inside the amount of space that we have to work with you can hit ctrl 0 to fit the whole thing to the screen we know that we want the image to be over on the right so just like that and the next thing that we want to check on is where this image is so just like we've been doing so far we're going to use the developer tools and we're going to use the selector to try to select the whole slide now this hasn't quite got the whole slide because it's actually the one above it but you can see here where it says background image is slider 1 dot jpg so that's inside the image slash slider folder so let's just have a quick look inside that to make sure that we are looking in the right place so we're gonna go inside images slider and there we go slider 1 so now we're all set to export our file so we're gonna go file export this time that's a jpg you can see here this is giving us an estimated file size of 184 kilobytes and that's because we've got our quality set to 100 we want to try to keep this file size as low as possible so our site loads nice and fast so if we drop that down to 95 even just that dramatically reduces the file size we can probably get away with about 90 so that's what it's down to 63 so that should be just fine so you know slider folder I'm going to replace slider 1 so now let's have a look and check out our results close that down so we can see it at full size will refresh and that's put our image in you can see here though that this has chopped the end of this image I still have this window shrink down fairly small right now but you can see that if the site goes wider that's when this part of the image shows through but we want to make sure that we're not clipping off that image at any point so we're gonna go back in to affinity to sign it and we're going to maneuver this image around until we're getting the right result so we're going to move it over to the left a bit and we're also going to move it down so that it's not going to be right underneath that text so try that again check our results now that's much better all right so let's have another example this time we're going to replace this image in the background here so I hit f12 to open up developer tools choose a little selector tool and we're going to click right on here so there's no sign of any image around here which means that we are close but we haven't quite got what we're looking for so we're going to actually make sure that everything's expanded here and there we go in here sure enough there's the image that we're looking for so it's image slash about slash about dot jpg so let's go into our file structure and find that image image slash about such about jpg before we go into it if you need to design it let's find another image that's going to work well there so what we're trying to do is give the impression of an actual Jemma session rather than necessarily being in outdoors so we're going to grab this one that should do the job and that's but I think so go ahead and download that and then open it up in affinity designer so here's a new image let's just quickly check on the size that we need to get it down to we need to get it down to five fifty by three twenty-two so we're going to make a new document that's five fifty by three twenty two now like we did before we're gonna unlock this layer we're gonna copy and also just like before the image is far too large to fit in our little canvas so just going to grab this corner and shrink it down hit ctrl zero to fill up the screen we want to make sure that it's as wired as our campus because we can always crop off the top and bottom we want to make sure you don't have any blank spaces so just gonna move that up and now that's good to go and ready to export so file export keep it as a jpg ninety percent quality is probably just fine it's going to give us around a forty kilobyte image we'll export this time we're in the about folder and we're gonna replace the about JPEG image and now if we refresh there we go there's the image that we put in place so you can go through the same process for these other images it's all just exactly the same just have a little look through the code in the inspector find out where the images that you need to replace create a new image at this size and just overwrite the existing image so like we did with the last lesson I'm not going to go through and make you watch me replace every one of these it's going to be the same steps every time but definitely go ahead and change these images out now you can just fill them in with any ones that you like from elements and then you've done that come back for the next lesson in which we're going to start customizing some of the content so I'm going to show you how to get into this text and rewrite it with your own content and then when you've done that that's going to be the last step that you need to do to customize a web template like this so we'll wrap up the image replacement and then for the content stage of customizing our web template I will see you in the next lesson welcome back to your branding on a budget we have elements and affinity in the last couple of lessons we've gone through and we've edited the colors the branding you know we've included our logo and the images in our website template here so it's all starting to look pretty nice and all pretty consistent with what we're trying to do with this project but we still have a whole bunch of placeholder text in here and obviously we want to replace that with our own text so this lesson we're gonna go through and I'll show you how to edit all of the text that you can see in your website here so because we are just working with the homepage in this course go ahead and open up index.html in the asome editor if you haven't already got that open now this is where the atom editor is really going to come in handy so what you want to edit is just the text that shows up on the screen you don't want to edit any of the other HTML that is keeping your page laid out the way that it's supposed to be and the text that you want to edit you can see all this white text here this is the display text that shows up on the screen and everything else that's in a different color this is the HTML that controls your layout and everything else so for the most part all you're going to want to do is edit white text like this there are some exceptions where you might want to make little changes to the HTML outside of just purely editing the text and we're going to cover a couple of examples like that in this video but we're not going to move so far into it that you need to really full-on learn HTML we're also going to look at how you can hide different sections of this site that you're not really using alright so if we look back at our website the first thing that we're going to change is this text here in the case of editing content like this it's actually easier to just look directly at the code and just eyeball it so you know that we've got this text here that says welcome our hand stand often instead of trying to use the the inspector like we've been using it so far that can sort of over complicate things because we've got this color highlighting and atom it's often easier to just look for it manually so we know got welcome our hand stand and right there we have welcome our hand stand so if you see these little less than and greater than signs this signifies where you have HTML in the page and those are the parts that you don't want to touch just for now so being careful to select only the text then we can replace that with our own text so we're going to change that to say welcome to yoga works so we'll save now if we refresh now it says welcome to yoga works next up we're going to change this paragraph of text here this has a couple of little tags in here that are going to change things a little bit so we'll just do the easiest step next which is changing this paragraph so just as a point of interest P stands for paragraph and H stands for heading that might help you to Zone in on which section of white text you want to change so we're just going to add in a paragraph of our own content here so I'll save that again and refresh there we go now we've got our own text there and now finally we're going to change this so it reads we make yoga work for you and we want the yoga work part to be in blue here while the rest isn't black so let's check out how we can do that so I mentioned these span tags just a second ago what this website is actually doing is it's targeting a particular style at any text that's inside these span tags in this heading here so what we can do is put in our own heading so do that and we'll delete what's there and now we're going to wrap yoga work with those span tags so what we want to do is add in a less than sign then we'll type spin and then we'll add a greater than sign and on the other side we're going to close that spin by doing a less than sign and a forward slash then we type spin and then we add a greater than sign so now let's see what we've got right so there we go now this whole section of text is fully edited and that's pretty much ready to go now as you're going through and editing a template like this you'll notice that along the top here we've got several other pages so if we were to open the about Us page then we've got another page that we haven't fully edited yet so if you want you can definitely go through and you can do the same process that we did with the home page you know so find this image and replace it with a new one and customize the content all this stuff you can do that on all of these other pages as well or if you just want to have a single page then you can actually hide this menu and you can hide things like this where we have a read more link but because we're just keeping things to a single page we don't actually have anything that we're linking to that we're trying to send people to to read so in that case what we can actually do is hide some of the content and I'll show you how to do that so start by hiding the menu if we scroll up here you can see this little light grey text here that says main menu start and main menu end so what these things are we see the less than sign the exclamation mark and these dashes these are actually called comments so these are little bits of text that are put into the document that don't show up on the screen but you can also use this commenting system to hide whole sections of content that you don't want to have a peer so this little collection of characters the less than exclamation mark – – that's what starts a comment and then – – greater then ends a comment so we can surround this whole menu system with comments and then it will disappear off the screen at the advantage of doing it this way instead of just deleting all the code is if you come back and you want to re-enable the menu later all you need to do is take away those comments so what we can do is make a new space and then we'll just type out those characters so less then exclamation mark – – you can see that that's already made everything gray but the only problem is the system doesn't know yet where you want in that comment so it down here we're gonna close it off by adding – – greater than sign so save and now if we refresh now the menu is gone so that's a really good step towards making this just a single page website and we can do the same thing with this read more button so we'll go back down to where we reading before and this line here is a link that's been styled to look like a button so once again we can just turn this code into a comment which is often referred to as commenting something out but you don't actually have to manually type those characters all the time in Adam what you can actually do is just put your cursor on the line that you want to comment out then just hold down ctrl and hit forward slash so now that's commented out that whole line meaning that's going to be heated and if we refresh we've still got our text but the read more button is gone now you've probably noticed that this is a slideshow but we've only got a single slide so I'm going to show you how to add a second slide often you're going to have to refer to the instructions that are included with any given template to figure out how to work with a slideshow like this that they might provide in this case it's fairly clear because we can see right here that we've got a class name single slide that's put in there as a hint to let us know that this code is a single slide and we can also see that there's a background image and that background image is what is giving us this image here now if we follow this line all the way down here this shows us where this single slide ends so I'm just going to make a space above and below that just to make that a little more visually clear and now if we want to make a second slide all we have to do is just copy all of this code and just paste it blue so now we've got another slide I don't have an image handy to replace this with but what you do is just put the name of a second slide image in here but what we can do is adding another heading another heading with some other text just so we can tell the difference between these two slides so now it will refresh and if we go to the next slide there we go there's our other heading and some other text all right next up we'll just do another quick example of text editing so we're going to change this About section here and these paragraphs and once again the easiest way is just to look for corresponding text so we know we're looking for something that says about our handstand and there it is so now we can just change that to be about yoga works and then we can put any text in between these paragraph tags that we like so in this case we're just going to add a couple of random sentences as an example of how you can edit text content and obviously you put Braille content in place here we've got another read more button here that we don't want so we just put our cursor on that line and then press control forward slash all right so let's take a look alright so there we go that's not a full paragraph but nonetheless that is the process that you'll follow to edit content like this on a page the next thing I want to show you is how to identify an image and replace it if you don't want it there so for example here we have a testimonial section and you might be wondering what this little placeholder image is for well if we look at the demo we can see here that there is a graphic of a signature so let's say you don't want to make a graphic of a signature every time you post a new testimonial well in that case you might want to replace this image with just some plain text and while we're at it we'll look at another easy way to find the text that you want to edit we can just highlight some text and copy it and then in Assam hit ctrl F and hit enter to go straight to that content so this is a testimonials area and actually while we're at it gift our clients say is probably not exactly what we want this to say so we're going to change that to client testimonials and now we're looking for this image here so we know that there's a couple of paragraphs of text before we reach it and then it says co-founder of company underneath so we're going to scroll down until we see something that matches that and then here we go if you're looking for an image the HTML tag that you will define is IMG if you want to get rid of an image then all you need to do is just delete the whole line that's there or once again we can just comment it out instead so that we can restore it easily if we want to which by the way is just I'm very pressing control forward slash again so now instead we can just write the name of the person and we could just write in some text like this but that's going to look a little funny little cramped and that's because there's no HTML wrapped around that takes to control how it's presented on the page but we can see here that we have h6 tags which is handing you six tags wrapped around this text which looks pretty nice so what we can do instead is just copy this whole line and put that in here and then once again we can just replace that white text now that looks a lot nicer it's got the same fun and it seems more consistent with the styling all right next up we're actually going to get rid of this blog section it looks nice but we just got rid of our Home menu section so that takes away any link to a blog and additionally if you do want to run a blog then you're much better off using something like WordPress instead of using a static HTML page like this so we are going to hide this entire section with the same process that we've used to hide the buttons and the menu so we go back into our code we're going to go control if our blog so there's our blog and then right here you can see that it shows us where the blog area starts with this comment so I'm going to position my cursor at the start of this section and look for the comment that tells me when the sections ended which is here I'm going to hold down shift and then click at the end here now if I hit ctrl forward-slash the whole section has been commented out so let's put the closing set of characters here and the opening set of characters there to do that all automatically for us so now if we save and go back now there's no longer any blog so if there's any section here that you want to get rid of that's how you go about it and then finally we still have this contact button up here but it's pretty important in just about any website for someone to be able to contact you these does currently link to a contact page so as I mentioned if you wanted to you could go through the process of customizing this contact page but what we also have in this template right at the bottom here's a set of contact details and a contact form so what we're going to do is make this contact button jump you straight to this part of the website so let's just highlight some text from here that we can do a find for to help us find the section faster so we go ctrl F recent tweets all right so there is our footer section so let's just scroll until we find where it begins all right so this comment here tells us this is where the footer area begins and now what we can do is add a unique ID to this section then that's going to let us link that contact button to this unique ID all right let's go through how this is done so we're gonna make a space here before that last greater than sign there we're gonna say ID equals put into quotation marks and now we're just going to give it a name so because we're using this as a contact section let's just make this contact section now we want to find this contact button we know it's up the top of the site so we're gonna scroll all the way up there's our menu that we commented out before so we know we're in the right general area and here here's our contact button so this is a link where you see these AE tags here that stands for anchor and in order to change where this link is going you need to change this href attribute here so what we're gonna do is delete the text that's in between the quotation marks and we're going to just replace it with hash contact section so now if we go back to our site and refresh actually we'll go back up to the top so we can check properly that this works if we hit contact BAM that takes us all the way to the bottom and gives people access to the contact details and the contact form alright so that wraps up everything that we need to cover in terms of how you can go about editing a website without it in a logo we've added in branding colors we've added in custom images and we've also looked at how you can modify the content of the site editing the text hiding things that you don't want to use replacing images and modifying links so that wraps up the section of the course that looks at the website now we're going to move on to working with some other assets that you can get from elements so next up we're gonna start looking at creating some graphics for your social media presence so if you want to set up a Facebook page or Twitter page YouTube channel anything like that you're gonna need cover graphics so we're going to go through how you can find a cover graphic template in elements take it into affinity and modify it into something that you can use on your own social media and we're just going to go through the process for a Facebook cover because pretty much once you've made one social media cover you know how to make any social media cover so we'll go through how you can do that in the next lesson I'll see you there hey welcome back to you branding on a budget with elements and affinity in this lesson we're going to go through and create a Facebook cover that you can use in social media the process that we're going to be going through is checking out the graphic template section and finding a template that's going to work for us then we're going to open it up an affinity add-in a custom image and do any modifications that we need to to make it ours and we are focusing on a facebook cover here but the process is going to be the exact same whether you're doing a Facebook cover a Twitter cover a YouTube cover or any other type of social media graphic alright so let's get started we're going to use the search field on elements for this and we're going to specify that we want graphic templates and we're just going to search for Facebook that's really all we need to do all right so right here you can see that we've got a bunch of different facebook covers we've got several in each one of these packs and we've got a lot of different styles that we can choose from so there are a ton of different graphics to work with here now I already went through these and picked out the best one for what we're working on and we're going to go with this one a spar Facebook cover so you can see here that we've got the kind of light style that we're going for with our project and this one in particular is suitable because it has a blue that is already very close to pretty much matching the blue that we have in our logo so we're going to use this set of covers and we're going to put a yoga photo in the background here we're going to swap in our logo here and we're just going to replace this text so download this pack and then extract it then I'll show you which one of the files in site we're going to be working with all right so after you download this pack of facebook covers you're going to see that there are a ton of different covers to work with the one that we're actually going to be using is number nine so go ahead and open that up in affinity designer so here is our facebook cover and affinity so as you can see the blue is already pretty much spot-on this is our logo so there's the blue of our logo and this is the blue of this image so even though we could tweak this to make it a little bit more perfect there's probably a tiny little bit more green in this blue than ours but it's so close is really probably not worth the extra work so we're just going to keep all of these blue background graphics exactly as they are the first thing that we're going to do is replace this logo here with our own so we're going to jump into our logo graphic make sure that all of the components inside your graphic are grouped up that just makes it easier to to just click anywhere on the logo and select it then we're just going to copy ctrl C making sure the logo selected so that when we paste it in it goes into the right spot in this stack of layers we're just going to hit ctrl V to paste in our own logo now it's quite large so I'm just going to drag it over and then we're just going to grab this corner and drag it down until we're at the right size so to make it a little clearer before we keep trying to get the size just right we're going to go into our group here select all of these layers by clicking this layer then holding shift and then clicking the bottom layer and then we're just going to double click this circle here drag this slider up into the corner so that we get white and then we can close that down and now our logo is all white and we can keep on hook up and select the group again and we'll keep on shrinking it down until we get the right size I think now we can probably hide this logo to get it out of the way so we'll just uncheck the box for that laughs no just keep going until it fits in nicely now now that looks pretty good the next thing that we're going to do is replace this text here you've already seen how the text works in affinity designer so there's really not much to this we're going to do is click to select this group of objects double click to get inside it and then we're gonna double click again to get further inside that we're doing that so that we can turn off each one of these individual elements as we replace it so just going to grab the artistic text tool again and we'll just click somewhere near the heading that's already there so we have a reference now I'm just going to type out a heading that we want to have appear on a Facebook graphic so let's say we're going to offer a free yoga lesson so it will say free yoga listen now we want to change up the font and the font size so it's going to choose the move tool to take us outside of the editing mode for that text now up here we're going to choose our xo2 font that we've been using on our headings for everything so far we'll change it to black we might need to reduce the thickness of that once we get it up large enough yeah that's probably a little too bold let's try extra bold protis little bit too thick there we go I think just normal bold white works for that so now let's hide the heading that's already there move this one down into place and you can actually just use your directional keys on your keyboard to nudge any object into the correct location you'll also notice that we have these guides here this is just a reference to help you position things in a document but if you want to get them out of the way if it's making it hard for you to see what you're doing then just hold down control and hit the semi-colon key alright so I'm just gonna nudge this down one a little bit all right now that looks about right next up you saw accidentally selected one of the shapes in the background here to make sure that that can't happen we're going to select this shading group and lock it so now we're just going to go back into this group and the next thing we want to replace is this text here I'm actually just gonna hide that right away because this time we're gonna use the frame text tool and you might remember that I mentioned earlier the frame tech school is good for when you want to draw out paragraphs what I'll let you do is to write a box and make sure that any text it's typed is constrained inside that box so we're just going to draw out a box right here and now we can type in some new text so we'll say so we'll actually first switch over to our trebuchet ms' font that we've been using for regular text and we'll say come in and get a free yoga yoga class on us learn how yuh can work for you now we'll grab the move tool again so I can change this color to white so double click on the color drag up into the corner and now we've got our text there so you can pretty much see what the process here is it's going to be the same thing to replace the the domain here the phone number and the address so I'm just going to go through and do that quickly so given that you already know what the process is for adding in your own text here I'm just going to speed up the next little bit so that you don't get bored watching this happen alright so there we go there's a fresh text there are a couple of little things that I do want to show you about working with this text here one is what happens if you have written all you taste in in small letters here for example and you actually decide that you want them to be all in capital letters you could go in there and retype everything or you could select your text and then you can hit this character button up here to open up the character tab then down the bottom here you have a bunch of different modifiers that you can apply it to your script and one of them is all caps so you can hit that button and now you take this in all caps so got that all good to go we'll just position it the other thing that you might experience is these red squiggly spellcheck lines that can be very irritating if you're just trying to get a good look at your text so if you have this and you know that you're spelling a word correctly you can double click to get inside that text into edit mode then right click on the word and then just hit ignore spelling and then the red squiggly line will go away and you can see you work clearly again I said this is already just about good to go all we need to do is add in a background image all right so here we are in the vital elements and we're going to search in the photos section for a background image that suits our facebook cover and you can see here what the demo of this looks like what we're going to need is something with a permanent part of the image over on the right that's also going to have a kind of a layout or a composition to the image that's going to let us also fill up this section so we have to look pretty carefully at the photos that we choose so we're just going to go into the photo section again and search for yoga once more now a lot of these photos would not actually work for what we want to do for example if you took this image there's not much space around the person that is the central focus of this image so if we took this in here and put this person focused on in this section the actual image would only come to about here so we'd be left with a bunch of space what we want is an image that has a lot of space around the person who is the focal point of the image so I actually went through earlier and picked out a photo we're going to go with this one so as you can see there's a lot of space all around the image so we should be able to position this person on the right side of our cover then end up with a cover shape that's taken about here included a link to this photo in the notes below this video so you can go straight to this photo and download it ok so here is our photo in affinity designer just like we did before we're just going to copy it and we're going to paste it into our cover here we want to make sure we paste it in the right place though so it's behind all of these other areas so you can see there's a placeholder here so that if you're working with Photoshop you could use a smart object we're not working with Photoshop so we're going to take a different approach we're just going to select layout because with that layer selected when we paste our image is going to go above this layer so we're just going to paste in so now we can see part of our image so we know we've pasted it in the right spot and I'm going to show you another way to resize an image and make sure that sits flush on the document instead of scrolling all the way out we're going to look up how wide our document is in setup so you can see here it's 851 pixels wide so now we're going to select that image again we're going to go over to our transform panel and we're going to manually enter the width that we want into this field here and resize that way but we also want the height to be resized proportionally so we're going to click this little button here which looks in the aspect ratio so now if we go into the width field we just punch in 851 and hit enter now that's resized our image for us and we can start moving it into position alright so there we go that fits pretty nicely and we're just about done the only problem here is you can see that this image has a kind of a yellow tint to it obviously we don't want a yellow tint that's not part of our branding colors so what we're going to do is add an adjustment layer that lets us change how this image is tinted and bring it more into a blue tint instead so with the image layer selected go up to layer new adjustment and choose curves now this is a really cool tool that you can use to individually modify the levels of red green or blue in any image first make sure that you have RGB selected here and now in this drop down change it from master over to red and this lets us directly modify the amount of red that there is in this image so now we're just going to put our mouse on this line here and just drag it down and you can see that as I do that there's a clear modification in the color of the image so we want to keep it relatively subtle we want this to have a blue tint so now we'll switch into the blue Channel do the same thing again and just increase the amount of blue so you can play around with that to make it more perfect but already that's brought that into line with the coloring of our Facebook graphic so now that is all good to go and as I said you can do the exact same process for any social media graphic you just jump into elements search in the graphic templates section for Facebook or Twitter or whatever else you want to create a graphic for and then just open it up in affinity and replace the elements with your own so between the work that we did on our website and covering how to make social media graphics we've got the digital portion of our online presence pretty much squared away now we're going to go through and create some print material we're going to be creating two things for print we're going to be doing a business card and we're also going to be doing a promotional flyer so in the next lesson I'm going to take you through grabbing another template from elements and reworking it to create your own business card and we're going to touch on a couple of things that you need to know to make sure that your graphics are ready for print web graphics and print graphics do differ so make sure that when you're done with that business card creation process they're going to come out beautifully when they put to print so I'll see you in the next lesson hey welcome back to branding on a budget we have elements and affinity so far we've already put together everything we need for a digital present for a project for our imaginary yoga gym yoga works now we're going to do a couple of print pieces we're going to do a business card in this lesson and in the next lesson we're going to do a flyer the process is pretty similar to what you've been doing so far what we're gonna do is once again go into the graphic templates and we're just going to search for a fitness business card alright so we've got a bunch here to choose from and it's just a question of which one is going to be the best fit for our logo and for our colors and as with the other things I've already spent some time going through these cards definitely when you're doing something like this grab a few samples and see which one you really like the best when you look closely at it and for our purposes I chose this card I've gone with this one because we have a pretty strong two color logo this is going to let us put the blue on the front here we'll be able to put a white version of our logo here and we'll be able to get both our blue and our green on the back of the business card with this side so grab yourself a copy of this template and then we're going to go ahead and edit it so this is the business card extracted if you go into this main file folder then into main and we're gonna use the EPS and that you can grab both of these and open them up with affinity designer by the way there's a little typo on here this says font obviously it's supposed to be front and this is the back side of the card all right so here's our business card this is the back side and this is the front side we're going to change up this one first there's just one little irregularity here you can actually see a little white coming down the side of this image so I'm just going to drag this shape out so that it's flush with the end there don't get any white gaps coming through now we'll go back to our logo and we're going to sample out our blue color go back in yeah we'll just select this background here and there we go that's blue just like that now this is fairly straightforward there's not what we really need to do here we're actually just going to grab all of this stuff and hide it we don't really need it that much get our logo I'm just going to do what we did before already this is much like we did with with our Facebook cover we're just going to grab everything in here turn it white double click drag up into the corner with that group selected we'll shrink it down to the right size get that centered you notice the little green line pops up there to let us know that this is right in the center of the document now we're just going to grab our text tool and write out the domain name will do that with trebuchet position that a little lower and then we might also actually put a tagline here because there's a bit of space it's like a little empty and we'll just say we make yoga work for you won't change this one up to XO to get both of our fonts in here and now just going to balance out the sizing of the elements that we've got here make this a little bigger it's a little smaller and now I'm going to align everything vertically by holding down shift and clicking to select all of these things and then along the top here you can see we've got this align Center so now everything's aligned with everything else and if we drag it on to the center now it's aligned with the rest of the card as well now I'm just going to move this down a little further all right so it's that simple that side of the business card is ready to go now we'll do the other side so we're going to grab our logo again paste it in shrink it down and put it in position over the top of where the logo is currently get that down to about the same size now actually what we'll do is we'll high in our current logo then we're going to lock this background because I want to select these items here but if I drag right now I'm just going to be moving that background so I'm gonna look it so it can't be moved now we're right to draw a box around these items so we can select them group them and hide them and they can turn our logo back on we'll replace the name do the same thing here highlight these group them hide them and now I'm just going to put my own name in here and I'm actually gonna put the first name separate so that I can have a different color I'm going to set that to xo2 so we're always using these same two fonts keeping our branding consistent now we'll change that to the green now we're just going to copy and paste this lamp for the second name and we'll change that one to blue actually I changed those to bold but I think black is actually going to work better and like I mentioned before when you need to get rid of that squiggly line just hit ignore spelling and accept will get rid of that title well add in a new one we'll do the same thing again we're going to align it on the left here so it's in roughly the same spot then we'll add in whatever title we want to go with boss person and now we can change that to the same color as the rest this text over here by using the color sampler and we're going to shrink that down so it's closer to the size of the rest of the text I'm actually just going to drag it over here so we've got a bit of a reference so it's probably still a little too big compared to that alright so now the title is in there and we have some text that we can copy and paste over here on the right to add in our contact details I've already got phone mail and web here you don't need to replace those all we need to do is give them one of our branding colors so we'll try the blue all right that looks quite good we'll add in our own phone number group and hide so just throw this in here add in our number they can actually probably still be a little bit smaller by the way if you want to zoom in easily just hold down the control key and then scroll with your mouse wheel and control zero to bring it back out to fit the window alright that's looking pretty good and now we're just going to do the same thing for the mail so I'm going to select this phone number and copy and paste it exactly where it is then we're going to hold down shift and hit the down arrow on the keyboard so that we can just nudge it down into the right space so that looks like it's properly aligned double click in there to add an email and then we're gonna do the same thing for the last part get rid of the existing URL group it hide it select the line above here copy paste shift and the down key and you can hold down the spacebar to get a clear review when you're trying to perfect your alignment double click to edit and we'll add in our website it's probably just a smidge too low so I'm just going to hit up on my arrow keys and once again ignore the spelling or if you're going to be typing something multiple times you can actually tell the system to learn the spelling so that you don't have to keep telling it to ignore the spelling over and over again and just kind of switch up the left alignment a little bit too all right so now that's all done both of these are now ready to go it's basically the same editing process as everything that we've done so far so you can see how this is all very approachable there's a lot of stuff here that you really can just do yourself and when it comes to print though there are a couple of things that you need to be aware of the first thing is that any graphic that you do for print needs to be much higher resolution than graphics that you do for the web on the web we want graphics to be small and file size so they can be delivered fast so typically a web graphic will be 72 dots per inch with print graphics file sizes largely irrelevant what we want is as much information in that file as possible so you can get a really good quality print so print graphics are typically around 300 dpi or higher so here's how you check and make sure that your print graphics are right make sure that nothing in the canvas is selected so the document setup button will show up here in the context toolbar and then here you can check on your DPI and this is already set to 300 dpi because this template is designed for print but if you're doing something yourself from scratch just jump in here and make sure that you do set that dpi to 300 the next thing he has to be aware of is that color imprint is different to color on the web and this is because of the way that light works differently with either of these things when you're looking at a monitor you have light being shone out of the monitor directly into your eyes whereas with print light is coming from whatever light source the Sun and electric light it's bouncing off the paper and it's coming into your eyes these two things actually make colors look a little bit different and for that reason there are two different main color formats that are used in each of these types of media when you're working with web you use RGB colors which stands for red green and blue but when you're working with print you need to work with CMYK colors which stands for cyan magenta yellow and the K represents black if you accidentally give a file to a printer and it's still in RGB mode then the colors that you are seeing on your screen are going to look different so when it actually comes out in print so to make sure that this is set up right go into the color tab and you check here to make sure that the color format says CMYK so because this is a print template this is already been set to CMYK and it's good to go but again if you're doing something from scratch just make sure that you set the right color format all right so now both of these are ready to export so go up to file export and now the question is well which of these formats do we use generally speaking most print graphics are going to be fine to export as PDFs and infinity down here you also want to go into this preset and change it to PDF for print so you can save that up and then that'll be good to take to a printer another file format that you might be asked to use is EPS and then the same thing again in the preset change that to EPS for print but generally speaking PDF is going to be just fine all right so that's it it's that straightforward to set yourself up a business card we've taken a nice simple example but of course if you want to go with something more complex it's the same principles apply to these other business card templates you'll just get in there put your own text in select any objects that you want to change the color of and change them up replace photographs if you need to and then you're good to go as long as your export settings are correct so now we have just one more lesson and one more piece of print material to create and that is a promotional flyer so we can imagine that our yoga works gym is all set up it's ready to go and now it just needs a bit of promotion so we're going to go through how you can make a flyer to hand out to people to start spreading the word so gonna go through that in the next lesson I'll see you this hey welcome to the last lesson in branding on a budget with elements and affinity you're gonna do one more piece of print material and that is going to be a flyer so just like we have with pretty much everything so far gonna jump into the drop-down list here and choose graphic templates then we're just going to search for yoga at flyer alright so we've got a few here already but what we want to do is make sure that we're only getting print templates so we'll refine these results a little bit further by checking this box and now we know that everything here is designed to work with the DPI that we talked about before the amount of detail in the image and that's also designed to work with CMYK colors we are going to be working with this flyer here you can see that it already has pretty close to the green and blue colors that we want it's got a good spot for our logo so converting this into a fly for our project should be pretty straightforward let's take a look all right so here is our flyer template in affinity designer and you might be looking at that and your first thought it might be well that looks a little bit more plain than what I thought from the demo and that's only because we haven't had any images added in here and in each of these three spots and that's something we're going to do as part of this process that's actually the only thing that's different between this and this so once we get these images in that's going to look great first up we are going to get our logo up here in the top left most of the process for converting this into a flyer for this project is just going to be the same stuff that you've done in the previous lessons so changing the colors changing the text but we don't wanna spend too much time going over ground that you've already covered pretty thoroughly at this point in time so what we're gonna do here is focus on a couple of things that you haven't quite touched yet and one of those things is you'll notice that we have these lines around the outside these are guides and these are there because of something called bleed whenever you do something for print you need to have a bit of space around the outside where you don't have any critical graphics because it's always possible that around the edge of something for print there might be some imperfections or things might be cut just a little bit off and you don't want anything critical to accidentally get chopped out of your design so when you're working in here make sure that you keep all of your most important graphic elements you inside these lines right so the first thing we do is get our logo in here but you'll notice that this needs a wide logo instead of a more vertical logo so going back to our logo templates again the version of the logo that we've been using so far is this one but you remember that we also had a horizontal version that I said that you'd be able to modify using the same process that we did with this logo so I've gone ahead and done that so we can use this logo and fit it in up here and in this case I've also added a slogan and that one just for your information is xo2 with a bold weight and in the case of this logo we were planning to use it for web and I said at the time that if we had a slogan down here or a tagline it would be too small to really be visible in the top of our website but the same thing doesn't apply here because this is going to be printed out on a piece of paper and that should make it large enough that this is going to be readable so gonna grab this logo copy it before we paste it in you might also notice that over in the layers here we've got two different colored version of our flyer if we uncheck the first one this one already has pretty close to the color scheme that we're using so if you really push for time and you find a flyer like this or a template like this that already has pretty close to your colors then that can be really helpful in a pinch you might just need to go ahead and use it exactly as it is we are going to make some changes though so first up I'm just going to double click until I drill down and I see that this logo is selected I'm just going to hold it in control and scroll in to get a bit of centering on that logo now we're going to paste in ours and we're going to resize it until it fits nicely over the top of this logo just about I think we might make the make it so the words are about the same height so there's a new logo and we can turn off the old one and again we're making sure that we don't place it outside these bleed lines here so now we've got our logo in and then the next thing to do with this stage would be to change up the text so we've got a web address up here and a bit of text down here and we've already gone through a lot of text editing so far you already know how to do it so I'm not going to make you sit through watching me make all these changes if you want to go ahead and make changes to this text now yourself pause the video and then come back and we'll move on to the next step all right so I've gone ahead and changed up the text here just zoom in a little bit so you can see a bit more clearly so I've changed up the URL change the font here on the big word yoga and added in a slogan and changed up this font and this font and add it in custom text information and while I was at it I also changed the colors of these three blocks here those are just changed in the same way that you've already changed I'll cover this with things before so I've just moved past those parts that you've already learnt how to do so I'm just going to show you a couple of things that still need to be done to finish tweaking up this flyer and the first thing we're going to do is select this word yoga at the top here and we actually want to push it out so that it takes up more of the space on the side here but we don't want to make it bigger because if we do it's going to start to become too high instead we can select the text and open up the character panel and now we can do is use this little setting here to add more space in between each of the letters so all we have to do is just hit this little upwards arrow here or if what we can go straight to a larger percentage might actually do is add quite a bit of space we're going to type in 100 percent maybe even 150 and now I love is a nicely spaced out and we don't have quite so much space that's empty on the edges here so now that looks pretty good and I'm going to do the same thing yeah so that I can make these lines light up with the gaps here so I'm gonna select the text just double-clicking to drill down until I get this selected hit the character panel again and I'm just going to do the same thing it's going to find the right percentage to get those lining up maybe 60% a little more 70 percent it's a smidge more 72 percent and that looks about right just tweak the alignment there a little bit that's not quite perfect but you see how the tool works so you can jump in and make that more perfectly aligned and there are a couple more things that I haven't changed the color on this QR code here and these squares here and that's because I want to show you how effects work in affinity designer so if I select this little rounded diamond you see that there's this FX icon showing up here wherever you see this this means there's some active effects on this layer and you can edit them by pressing this button and this shows us that there's currently an outline and it's of this green color here obviously we don't want any other green color we want our own green color so I'm just going to click that color selector use the color picker and just drag it to somewhere that we're using our green and then click the color selector to push that in and now that's the correct green for our branding we can also do the same thing with this little diamond same thing it has FX active we open them up open up this color picker and we want our branding blue so there we go now one is right and this square here has the same thing it also has an outline so we'll do the same thing again open up the effects and select the color that we're really going to be using and now that's all good to go what bother changing up this QR code because there's no point really in trying to edit a QR code that you're not going to be working with alright so now we've got all that font and all our colors in the only thing that we need is to put some images in here so I'm going to show you how to make sure that your images only show through these allocated grey spaces here so first up we're going to use this image up in the main section at the top so I'm going to copy that now we're going to keep double clicking until we have this gray shape selected here so then we have it here we expand that you can see in here it says paste your image so we're going to do that we're going to paste it in and as you can see right now it just fills up the whole flower but we only want it to show in this allocated gray space here so what we're going to do is drag this so that it's nested underneath this image and then this image is actually going to act like a cookie cutter and it's going to clip off any part of the image that's showing outside of the boundary of this shape so gonna drag it down and then to the right you see where that's positioned there make sure you don't accidentally drag the layer on to this layer below like this because then you're going to get a different effect to what you're actually trying to achieve it's down and then pull it off to the right now it's nested inside that shape and we can resize it so it's right with give it a little space to work with and then we can line it up so that it works nicely for our flyer all right so there we go that's looking pretty cool now all we have to do is follow the exact same process for these little three squares here so we've got a couple of other photos as well these are all just come from the photo section on elements so we're going to copy that now we're going to find this square by continually double clicking until we get in there it says paste your image so we're going to paste it in above and then once more drag it down and to the right and there we go now it's locked inside that space obviously it's so we're just going to shrink that down just dragging on those corner handles until it snugly fits in this allocated area Nevers going to go ahead and do the same thing for the next two spaces it's the exact same process alright and there we go so now we've got all three of those images in and that actually completes our flower so this is all ready for print and you can see that it now looks quite different to the original flyer template but it saved us all the effort of having to go through the design process ourselves all we need to do is just come in and replace everything with content that works for our branding and for our message and this is totally print ready so if we check in document setup we can see that we have 300 dpi and we're working with CMYK color so from here you just need to export like we talked about in the last lesson and then your Flyers are ready to go to print and that also wraps up the last lesson of our course so we've gone through and we created everything that we need all the essentials that you need for a brand new business for its web presence and also first and promotional print material so just have one more video to get into the final video of the course we're just going to have a quick recap of what we've gone over and I'll put you on to some other resources that will help you out in future so I hope you'll join me in the final video I'll see you there hey welcome to the final video in branding on a budget with elements and affinities so we've gone through and we've started from scratch and we've created everything that you need for a brand new business we've got a logo together we gave it custom branding colors and fonts we created a website we applied the colors and fonts that we chose for our branding to that website and then we added in all our own images and content we put together a facebook cover and in the process we learned how you can edit graphics like that's great social media covers using elements templates as a base for any type of social media Twitter YouTube whatever you need and then we also learn how to create print graphics making sure that they're the right dpi making sure that the right color profile and put together a business card and a promotional flyer that are all ready to go to print so this shows you what you can do with stuff that you've taken from elements combined with affinity designer without having a whole lot of experience to get you started but if you want to take what you can do even further then it's going to help you out to learn a bit more about affinity designer and also about working with websites so if you want to do that we also have a course called affinity designer QuickStart that will take you through absolutely everything about working with if any designer all the tools how to work with color absolutely everything that you need to know to get across all the important tools an affinity designer and we also have a series of courses called start here so they'll take you through how to work with HTML they'll also take you through how to control the way that websites look through learning CSS typography CSS layout and CSS colors and backgrounds so but tell me some those courses you'll be really well positioned to take any template that you like of invited elements and customize it as you need it so hope you really enjoyed this course and that you saw just how much you can do when you've got some great templates and great graphics to work with and a low cost program like affinity designer so as I mentioned earlier on in the course you can get all of these graphics done and a website everything that we've been through on a budget of under $80 that's a fee that you'd be really hard-pressed to beat in any other way so thanks so much for taking this course and I'll see you in the next one you

4 Comments

4 Replies to “Branding on a Budget With Elements and Affinity”

  1. B Healthy Antigua says:

    what program is best to edit video templates from Envato Elements?

  2. Burry21 says:

    This is amazing! Thank you so much!

  3. Jana J says:

    white fitness?

  4. Love Parmar says:

    TYSM mam! you are great!

Leave a Comment

Your email address will not be published. Required fields are marked *