Web Design & More  - from the Adobe Livestream 04/25/17

Web Design & More – from the Adobe Livestream 04/25/17



is it working did I break anything oh let me see let me see come on come on twitch ketchup please you never tell I can't tell oh wait for the chat ketchup – hey there we go I'm always worried it blew up oh man so thanks Shauna thanks for doing some awesome typography I hope you guys caught that she does some great work I love watching her stuff so yeah very cool stuff good to see who all's here let's see ah I see Daniel I see a goes back column what's up ash okay we always got to do the audio check because I managed to mess everything up from you know in between each week so if the yeah specifically music if the music is too loud let me know and I'll crank it down if it's not loud enough let me know and I'll turn it up so what's up how you guys been we would chat one over here second see ya ah riddler is always here what's up perry minute poncho Oh Riddler's got a question already we haven't started yet weathers got a question what do you got what do you got for me seems good all right we got thumbs up from column then it tough in it really got one thumbs up Ruthie what's up a while today in college very proud I saw some my work at college right on that's cool I like seeing my stuff out in the wild I know really good I know I know I know it's it's uh it's coming okay agar doesn't hear any music if type 1 if you don't hear any music anyone else we got to have a majority rule because I can hear music but that's because my speakers are messed up and I don't know what's on all right well let's see let me bump this up a hair and let's see if that does a trick glad to trick hopefully it does a trick I see a bunch of ones now all right now type a let's see type an e if you hear it right okay ah let's try that that's fine I got two Riddler yep yep that's it I'm in the next couple months I'm shooting for it all right we got a bunch of ease that's what I want to see right go give me an F what's up Daniel Helios how you guys doing it's been a week already and uh what did we do last week what did we do last week let me look to my nobody I remember we talked about remember the end of the stream because we talked about doing t-shirt graphics but I'm going to push that off for next week because I still got some half-baked ideas and if I put them on the screen right now you'll just see me get angry and rage quit and flip my desk and leave so that's usually the way it goes uh remember what we did last week do you guys remember really about some new toys would you buy thanks Perry you're making me blush so there's something wrong me I drank a whole bunch of coffee today and I realized like 90% of it was decaf yeah and it's still working which is scary so maybe they were labeled wrong or maybe it's more likely they're just some Rami uh which you know yeah wheeler got himself a new graphics tablet a Samsung tablet whoo oh nice Riddler all right if you order it from the US side that comes from me so yep I will I'll try to make sure I wash my hands before I pack your order before one of us turns if you ordered from the UK though that ain't me otherwise if it was me you'd see me very tired right now so what did we do last dream I don't remember I'm trying remember see usually I reload the the the stream can't get worked out of my mouth today what's new but I honestly don't remember what we did what did we do what one of my files say we did you know do you guys ever get that reminds us goes blank I get this every time like I'll go to like say a hardware store for something specifically in mind and I'll get to the hardware store and it's like so I don't even know why I'm here it just happened I don't know we worked on OK the Medal of Honor stuff was the week before it's like I do this every Tuesday because I wanted to try to like figure out blob brush we do robots with the blob brush no one's going to help me on that oh man Robo is yeah no Co got it caffeine deficiency poncho maybe that is maybe it's like a reversing I heard sometimes that when you get immune to caffeine it actually makes you sleepy and so maybe because I haven't had enough of it I'm not sedated I don't know who knows ah perry the new hoodie is pretty cool we're gonna get some of those in stock on the US right now they're all UK side for the time being the problem see the problem with like that type of self is it's like cold in UK but out here in California it's like you know no one's wearing a hoodie right now so we might so get some in though and then we'll gear up again when it when it gets or for the for those you plan ahead it's perfect all right so uh tonight I'm going to work on some more pretzels stuff remember that home page we were working on I want to I want to keep working on that because I never got a chance to finish it and Natan Ryan I'll have my head if I don't get it done for them I'm just kidding in fact I wonder they're actually here in California I'm supposed to go meet up with them hopefully if they get some downtime to go see what's up usually you see not you know KN au ght in the chat you seen the classic happy old school buddy of mine they're the other guys behind pretzel as long as we as well as a couple others made monster that's that's the artwork very doing last week I did the made monster I wear out on I can't memory this stuff do you recommend using an iPad pro and Apple pencil as a graphic tablet I have never actually used one rocket I keep getting told it's really cool uh sticky here on the Adobe stream uses it I think I'm pretty I'm like 99.9% sure that's what it uses and he makes some incredible art he even drew in a Stimpy one night that was pretty cool and I dropped my cat hold on so I've heard nothing but good things about it a go I have an iPad but had it out it's like old and I doubt it would work with a pencil they might work with the Rago pencil hmm so let's switch over the screen for Ike totally free overdoing um so yeah so raise your hands press one and spin around your chair if you remember us doing this web design thing there's stuff all over my desk I swear it was it has to be a pro okay yeah my iPad is very amateur so it has a big old crack across the screen which makes things even better so it's fun when you're trying to like play games and you end up with like band-aids all of your finger okay you guys are right on we got some old-school is in here yeah so let's continue this thing and I'm gonna like try the gradient is back yeah do you memory we got that thing going the whole way that was the blend tool thing if you guys want me to show you that again because that's always magic I I love playing with the blend tool in Illustrator and we might actually open it back up in Illustrator and modify it a bit more though last time we we were debating about this one down here you guys remember down here and I'm going to rework this section I want to make it a little more exciting I've got it I've actually got a sketch whole decal evan has a sketch I have a sketch that we're going to work off of yeah and then I have like an illustration to go with another part that we're going to make it it's not very exciting right now but it will be exciting I hope that's the plan we'll try to make it super exciting and yeah just exciting right on really now I'm pretty sure if you want to go download pretzel if you haven't seen pretzel that's where the music is coming from right now and pretzel is a pullet Retina screen here boom it's this little tiny player right now we've got the the streamer mode built which is this little tiny box player it was meant to be small on purpose so you can just kind of move it all over your desktop wherever you need it for streamers to just get it out of the way and not have to worry about it wait we aren't making a go that was the other thing all right I go I'm writing this down style guides okay we had T graphics and style guides and style guide he doesn't surprise me that I forgot it's been a busy week but what does surprise me is that I forgot and then we're doing something else with what we're going to make a style guide for anyways which is pretzel but to that point I do have a bit more to do before we can make a style guide I'm just realizing so um yeah go that will be man you called me out on that one good job [Laughter] so today don't tell no one so this is the precip layer and it plays stream friendly music that is you can turn it on and let it play and it you don't have to worry about monetization or your your video being muted after the fact or anything like that it's totally stream friendly music that gets piped through this sucker and it's the library just keeps growing I think they're at like a thousand something songs now don't quote me but it just keeps growing and growing and they're working on new genres and stuff so for a lot of a lot of streams you know you're pretty much just kind of the vast majority of streams are the music supplied for more music that's available for streamers is mainly EDM right but you know there's a there's a lot of people that would like other genres – I mean I like EDM but I would also like some good old punk rock sometimes right so we're working on stuff like that I'm getting some other other genres in there and so we definitely want to use that as a bullet point on the site but before like I'm I'm gonna ramble for three hours I'm just gonna warn you blue move that out as something we need before the style guide yeah no kiddin Mike wait Mike is that Mike with Mike Oh threw me for a loop is this the same Mike Mike gaming no different Mike okay sorry we get mixed up now I'm totally just confused what happened my brain my brain shut off it does this that is totally me it is Mike so we need to finish this webpage because this is as far as we got I mean we we did spend now come back we did spend a good majority of time play around illustrator with that with the the sound wave looking thing graphic we did and the the developer behind pretzel came up with a good idea that because we were going back and forth on whether or not that sound wave sound wave sound wave design this thing back here should be if we should keep it white in color like the one up top or if we should have it the brand color the one before it is very very split what's the pretzel website so the Pretzel website is going to be the home page for pretzel let me I'm explaining this all terrible so currently when you go to pretzel if you're logged in and you go to pretzel Rox you get the web-based player right I wonder if I was afraid to do this last time if I log out if you if you go to pretzel rocks right now pretzel rocks you'll get the ability to log in I think anybody can go in and download the player now I think we've gotten to the point where anybody can can just hop on and download it if you do download it let me know and let me know what you guys think about it is pretty cool so we're making the new like official homepage for this and I'm trying to get across like some marketing points and whatnot there's actually going to be a premium version as well with some some extra bonuses to there but for the most part the free version does everything you need so yeah they're just you know but we have to show that on the website so the website is going to talk to a few points the main point being just download the thing and listen to some music and have fun because it doesn't matter you know so the first part of this website is to of course download for Windows and some some people would rather just play it in the browser now if you play it in the browser in the future it's not going to have all the settings that a hardcore streamer is going to need so the desktop version is the version uni which is the one I just just showed and also which is the screenshot below here and I thought I might be funny and write actual size underneath here or something so it's a an audio player built just for the stream community it only pipes in a stream free music you play on you tube beam twitch anywhere you want and it just goes right just you just plays there's going to be a lot of bells and whistles built in later but if you want to just get going you know you need music in a pinch and you got you know you want to livestream some games or something and need some background music you just turn on the pretzel player and you don't have to worry about it it's just done so the next part we wanted to talk to you though was about the catalog you know about the growing music catalog and um the the different genres that we're going to grow into and the the current library is pretty killer so even if you're not a streamer and you just want some good music this is a great like low resource player to just fire up on your laptop or on your computer or even on your phone and just listen to some tunes and type them in so I thought this area looked kind of cool but I just the overall square I thought was a little bit boring so I'm going to try to move some parts around and have some overlap and whatnot and to get all the way back to what we were talking about this kind of sound wave looking thing that our developer said that he could make it do a shimmer and go from white to the to the greens so he can code it which is like space magic so we're gonna have him do that so the next part I wanted to talk to though on on down here was going to be I thought I would pull in this page and how many of you guys live stream on a daily basis is there is there anybody else in here that does does live streaming you know even just for fun or for giggles or whatnot aw thanks Jonathan downloading that right right on Perry would there be a way to put like the name of a song and text on like a stream column exactly so that's a couple things coming down the pipe is that there's going to be some overlays and whatnot so you can either currently the if you go to the player if you do have if you do already write to a file you can go to settings and you can have a the now playing label file is that's your text file so you pick your text file you want it to write to if you're currently using overlays and so the your overlay code I don't really know how that part works I've never set one up for my streams but it will call out to that file and grab what's playing and then show it on your stream but also one thing that we might I don't know if we'll tackle it tonight it's on my radar is – we're going to have some canned some in-house lower thirds that show now playing in the album artwork and you know the the artist name and the track name that will animate on your you know on your live stream as your as you're going so that's one of the points that I need to pull into this design right so as you're what's playing is showing either on your your your live stream you can also have it to show up in your chat right there's a lot of other like software's out there that does this and if you can set up I think it takes multiple software's to do it now don't quote me but it shows you know what's playing and what what what the music is in the the chat at the time when a user types in you know what's playing or it just says what's playing in the chat there will be a link okay so say say I'm listening to you're saying the player here and I'm we're listening to approaching Nirvana and in the chat it says now playing approaching Nirvana waiting for the Sun well if somebody clicked on that link it would take them to a web page and that would be this web page where you could see what was playing so you'd see so imagine instead of the top one now playing would be fire would be approaching Nirvana you know it'd be the same as as what you're seeing on the pretzel player you know let's say approaching Nirvana waiting for the Sun and they have the album artwork up top and then below that you could see every other track that's been playing since that streamers been streaming or since that streamers had the player going on their stream so it's going to keep a record of every track of that that's been going so maybe you heard a song like you know 10 20 minutes ago in like what's that song where you can go to the streamers page on pretzel rocks and see okay they were playing you know these are all made up but most of them matadors is a psychobilly band so you can say oh they're playing that song 24 minutes ago okay I want to listen to it and then I'll give you know ways to into it so that's what that's another like I want to pull this whole screenshot into our home page so that's another that's what's going to happen down here and talk about like this the the more kind of stream specific features if you will and so that's that plan and then finally below that I want to do a you know if you're not a live streamer and just want good music you know it's built for that for that as well so that's where this little design comes in can even see that I don't let me switch scenes I can't even see this word is my mouth so I was thinking like a little laptop with with a big old speaker on either side of it and then it would be blasting out patterns to show off like the genres behind it so we might get to the point where you can build that in Illustrator and see how that turns out so yeah so that's that's what's on the radar oh that was a lot to say rosin it should be yeah that's that's the the plan to try to make it into something that will be you know the go-to player for any streamer that just wants to fire it up we're also working on a whole boatload of settings at the moment that if you livestream you'll need like you know you can automatically set all of the volume percentages you want like on the fly so you know say you you don't want you know say freak stream like I'm always like I'm always fumbling with at the beginning of these streams and I'm always like is the audio okay well within the app albeit I'll have like a preset or I'll have a hotkey binded to it that I can just say you know I don't know say my hotkey is ctrl W or something and it automatically sets it to like the audio to the volume like 20% or something you know I mean so I can have all these presets built in and then you can map them key binds that's one of the word I'm looking for you can you can key bind them a bunch of settings anywhere you want so as it's on the radar so before I forget about this this piece right here I'm going to change this to a gradient overlay I got my brand color now as a color overlay and let's try I'm going to copy this I get in the habit of this a lot I don't know if you guys do it but whenever I'm reusing like your color always just just copy the hex code even if I don't need it but it's just habit where I'll just copy the hex value so I have it whenever I'm working on you know something some other layer elsewhere and we're working in Photoshop tonight I built this thing in Photoshop um it'd be cool if I would do this in XD but I haven't gotten around to it yet but yeah so Photoshop tonight so that's what the the Soundwave looked like you know with just a window overlaid so let's use a gradient overlay and let's do to get rid of some of these sliders and we're going to use the brand color so I can just paste in my x value down here which is so nice when you when you open other like drawing programs or photo programs they don't have that it's like I have to go back and you know read okay what were my RGB numbers or whatnot doing a lot of writing stuff down but it's nice when you can just paste in oh that's my value you know so let me make sure these are set to 100% white there and then we can do problem with the shimmer going that way right it's going to go kind of at a 45 so let's drag the angle and pull it down just for the effect will tighten this up for now here we go some of it also I wanted to I wanted to keep going with these slant type brakes I think it helps give the page just makes it a little more dynamic so I wanted to break this area up too and I think for now we just have let's see that is math to there so this one will grab this and I made this with just a shape so okay before I get too far into it though if you guys ever have questions or want to show me something um yeah a minute I would I would pick close window that's great yeah that that wouldn't work but you do it at me right the key line um before I jump in too far though remember if you want to show off anything that you're working on portfolio or artwork or web design to whatnot Twitter is your friend so I will post the the old Twitter link you can always Twitter it at me and we'll pull Twitter up you know from time to time over the stream per usual tweet any art stuffs here I'm sorry on my keyboard so loud think we went over that also if you have any questions I'll be looking at a chat pretty consistently and so we can go over anything that anything that that you might have questions on I'll explain it a little better if I don't explain it well the first time or I might just explain it terribly the whole time but we will get somewhat close I hope I hope let's see XD works good for quick things but you can't do nearly as much effect the next day it's better for pasting in your final designs very yeah John that that makes sense yeah I go DM a design we looked at a lot of designs last week which is pretty cool I love pulling them up seeing what you guys are working on I'll admit I'm kind of selfish I like seeing what you guys do so I was thinking of like maybe hanging one of these off so there's an overlap and doing something like let's zoom in so I can see make sure my pixels are spot-on or as close as my eyeballs will tell me and then I wanted to add some more I think I had some more artwork Nate sent me a whole bunch of stuff and I hope I saved it how about you guys what type of stuff people work on lately that's that's another reason why I want you to tweet it at me because I'm always curious you know are you working on web stuff too or are you working on like t-shirt designs or you know what do you got what do you got for me man where did he I know he had that you know what I can do I can just for a pinch extreme road trip let's see what are the cover art we got revival James flame star do I have that one already no okay I like I kind of like how it's just black and white so I'm going to take a screen grab copy that and paste it right in speaking of which he's got a new EP and I think it's on pretzel I don't know if it's on yet but it's really good so I'm going to make a selection I'm holding Jeff site so I can get a perfect square and I'm going to right click and just hit layer via copy 'cut and then I can get rid of the layer I just pasted in and I have that one so I also want to turn this into a smart object just in case and I think what I wanted to do this was at what 119 ah what is half a 119 that's not that's not a whole number I'm going to open the old calculator see what's closed 119 / 259 so let's do 59 and I wanted to try to make kind of an interesting pattern with these covers where's my guides I feel like I can break the rule on this one and kind of go over this guide I have right now I have a 12 column set up here maybe this one works better if we move it like that maybe let's see oh you know what we got to put in we got to put in the our favorite artwork be a little selfish we find it we find it where is this one here we go boom there we go copy that convert that the smart object as well and then size this one down to 59 I don't know if these kind of outliers hanging off of work but maybe it should be in here like another like block instead this one back in hmm I know it's kind of an interesting shape I'm thinking I don't know what this one is 59 and this is why I turned them all into smart objects because I can blow them back up if needed another thing I'd like to keep I usually keep going to keep on in Photoshop is auto-select layer know if you guys do that you guys keep that going 59 illustrations the vector oh for a card game Wow yeah you got you got your work cut out for you hmm okay Mike that is you I was trying to make sure okay Mike here is the developer I'm like I think that's his room but I don't want to just include what does Swamy Oh thinking about grabbing album covers from the most popular albums per day and have them dynamically populate that area wouldn't that be dope that'd be pretty cool oh man what's up Scott good to see you Scott yeah that'll grind the hotkey ctrl click to select layers yep yep auto slow clear yeah if you notice when you first learn Photoshop I think it's set to group I think which always throws me off so the first thing I do is I go and I turn that to layer for the most part I'll keep it checked and I think it works the same way if you hold ctrl it'll turn it off right so if you need to toggle it on or off and then if you have it unchecked and you hold ctrl it'll turn it on so that's a good little shortcut to remember so that way you know like here it's not letting me select off these two layers right but the minute I hold ctrl it just selected you know whatever I clicked on so keep that in mind move these guys back real quick so I don't know I always got used to just having it always on and then if I if I need it off I'll use I hit ctrl or I usually just get lazy and go up and turn it back off that's not lazy I guess that's just manual so let's see here I want to move some more of these around I gotta find a pattern so Mike do we get um are we so good on the the nice little gradient shimmer it's like I want to grab another cover what else do I got man Nate sent me a whole bunch and I don't remember where I saved them because that's that's how my brain works we might have to just use placeholders and now you remember where they're at actually let me see they could be in the you'll there's a way to like look at oh we did give them to me okay we grabbed that one that one there found it hold up we got covers let me download it having to use wordpress yeah I do use WordPress the first portfolio site on your ism animator and and and intending on working on a portfolio site where press is pretty cool because it's free and it's actually pretty straightforward and that's it's extremely robust so I mean I've used it for quite some time and have have not found a reason to really go elsewhere yet save you there yeah there okay me back to this yep WordPress way back in the day before they even had themes when they first started out in I was like 99 or 2000 now I could've that way right in two thousand thousand one maybe and I like how they how they had gotten like they got blogging down really well and then it was after the fact that people started using it as more of a CMS whoa whoo there's a lot of good art near uh we don't have I'm looking for also color variation so we got ooh this is nice she's that all right ctrl a ctrl C paste that in will convert to smart object and to do that just right click on the layer and select convert to smart object so let's take this one down to 59 as well there you are I want it to be kinda like then I also hold shift a lot you know because I just want to move on 90s nineties our 45s mainly just 90 all right but now I'm covering all my other layers maybe we just kind of let's see there's a bunch of stuff hidden under here well that's kind of cool okay so we accidentally did something which I like we broke this up a little bit let's do the same here kind of bury it up break this one out that maybe that can stay there this is a nice cover just because it's blue convert to smart object control t59 we're looking for the magic number 59 glad I didn't pick another number that would have sounded really bad one more there we go just benign all right we'll move this guy in a place all right that's better we can leave that for now [Applause] Mike this isn't making you sad I hope I hope I'm not designing designing to to unten code friendly kind of move all these into place close enough alright that's looking cool but now we're kind of running over into our text I do need well this is cool what is this big giant circles see one more I think this is one nineteen right didn't we have one nineteen all right that way we can get an overlap going here so now since this is a shape I should be able to grab a point kind of do something like that between you between me maybe something like that for now all right we'll leave it like that for now oh so we can move on and do the rest of it Perry you gotta go where you going get it asleep hey what's up Nate Ryan thought you guys still be stuck in Disneyland so I've decided to give the the homepage another look over tonight and I'm looking at all this awesome cover artwork you sent so we're getting some more in and then we're going to move on to the the West playing page on homepage you guys go let me know what's a good day uh next week all right our music catalog is constantly updating and adding tracks from your favorite artists genres and or just turn the player on and let it do its thing all right let's do some housekeeping here okay that we're going to have to pull in somehow okay so hopefully we put all this in a folder all of the artwork is in see we got smart we did something called catalog all right so now the backgrounds are not in a folder at the moment don't kill me ah but I don't their time here we go okay something like that I'm also wondering if we need a I'm wondering if signup needs to be a button not like not a gentle button but it needs to be a button to sign up is important I know taffy ah I'm still battling a cold aid no this is going to be this is a real thing it will be a real website we're just designing the doing the design things digit to do a tune we used Amazon Prime to send us a Ninja Blender so we can make more Prime members is paying off in it [Laughter] that's pretty cool alright so we've got music laid out and let's with let's give us some breathing room and go ahead move that over all right you can toggle guys on and off by control and then it's semicolon you like that and it's awful fun okay so this next part let's let's grab our crop tool and make this thing talks we're going to need some more real estate so this area got to think got a thing got a lot of layers going on got to think about it thank Photoshop okay I'm gonna save out this thing before I forget now our what's playing page let's see it's actually I think what we want to do is let's copy this ctrl J let's go to edit transform flip horizontal and we're going to drag it down here because I think we're going to do is we're just going to show part of the screenshot right or show the whole thing question is the color palette down here go ahead and change this color up so you know what we're working with here gray for now alright so I'm going to take this whole screenshot and we're going to dump it into its own folder so I can just take the whole thing and drag it let me name this real quick this is going to be what fling and I can actually turn the whole folder into a smart object and that will help because then it's not a giant folder of stuff that I got to mess with okay so let's press ctrl-g and group that so we stay organized we're going to call this the stream what do I call it the live stream or streaming futures you might want to make some icon to this actually so let's you know what I wonder hmm I thought we're going to need this space for some other features down the road like or other features that aren't specific to you know what Mike can I steal your ear overlay I don't suppose you got a you got a screenshot of that that I can I can Mick borrow let's see I'm just thinking so of course this background is going to have to change some can't see the page so I wonder if for now we copy up here that was a vector smart object so let's make a new layer ctrl J and we will bring that down to where my little arrows are this one no no that one all right so it needs to be right above that maybe we do that you then move this so it just peeks out like that it's getting there I'm just I'm slowly thinking it through sometimes that's the hardest part where you're just kind of like a maybe sorta mate maybe all right all thanks Mike I appreciate it so earlier we're talking about the the in-house canned overlays Mike actually designed some that are pretty dope so I'd like to just grab what he's got and we're going to use that in the the mock up we are using the genre icons for us let me fire those up all right let's see let me find customer here let's go and get our type ready for the next point here let's steal from the catalog so here's nothing I need to copy this icon here right so this infinity I are going to actually I can close this out the timing excuse me may I drink that that water to quick are granted to it so whenever you got to make a copy of a smart object especially if it's a vector object or a vector smart object make sure you right-click on it and you say new smart object via copy then what happens is it's it's its own self-contained object that you can edit without without editing the one you just copied if I just press ctrl J right say I press ctrl J I double click my copy now I'm thinking I just made a copy it's no big deal well it's a vector object right so if I then simply double click and open it an illustrator and say you know I'm going to do my edit stuff and I'm an edit thing and let's make it look like we're all stupid sunglasses you know whatever that is it looks like looks like ant eyeballs and I press ctrl s well BAM they both just change right you don't want to do that so let's go back and let's control Z all of our stupid stuff we just did to a perfectly good icon get it back ctrl s right they both go back alright so now let's get rid of that copy and let's do ctrl a new smart object via copy ok so now if I move this up let me go to this up we want it we want to double double click the little little thumbnail icon right so double click that and then say just simply rotate this guy oh look it's an eight woo we may make guess what it's the only eight we didn't affect both of them so get into the habit of always doing it there's been many times where I've not done that and it's just like I want to break things because a whole bunch of different icons on the page changed at once and if you're trying to work fast and you don't get into that habit you know it can really just it can go south really quick so let's uh my keyboard is doing weird stuff again weird okay um so let's go back to illustrator and I'm going to I must not not not do that we're going to go back move this into place now text you don't have to worry about so where's my text here I had that text and this text so I'm gonna make my hold controls like both those layers ctrl J and make copies and then I can go back and select my icon make sure you guys into this industry I'm not covering this up okay now plenty of real estate and then I can now with the blog I can now just dry your whole thing down alright and boom we have we don't have to worry about our copies I think I had had it a line like this right about there because it was it was one column in okay so this might have to what happens if we go right to the edge how does that look that looks stupid like it should overlap I think that looks dumb let's go back and let me also see let me get a reading here and see what I had given myself as far as spacing here about 60 now this will probably change in the code but just for mock-up sake I want to just make sure you know I've got I feel like this can break the the grid a little bit okay so our text here shouldn't be in catalog where'd you go here this one and this one ctrl G save this as call it's my copy then I need to move it into our streaming feature section okay so figure here might be a cool place for some icons do we need a title that's you I don't want to I don't want to duplicate something I already rode player built for the stream mate I don't say bill twice Oh cliff a built-in built-in live stream ready built-in lights it what's up their designs uh Santa oh oh thank you Mike let's see I forget how to download this ok download and where does it go [Laughter] there it is open containing folder all right cool so here's one of the oh I got to get I got to get out from editing that text boom alright so there would be like an overlay so imagine it coming out your window like Boop that's what's playing right I feel like we should we should do I wonder Mike if we do versions for left or right side and then the the streamer can can say I want on the red site or I want our left side or I want to come up from the bottom you know something like that actually this would work well for the bottom or if it would need to flip for the right though maybe now I still work for the right you use same one so let's copy him ctrl a tulsi control a is select all and we'll paste him in here for now just to have them somewhere we'll find a home for them in a minute alright built-in live stream ready we've got a widow problem built-in live stream ready what's the word I'm looking for Thord yep grid 12 column John did I missed a question for me John let me look let me look at the chat one of them is you picked May 3rd and 4th on slack Evan we're in the air oh oh we got it oh I ought to rent a hotel yeah I actually have like some carpet I can sleep on [Laughter] it's like I missed a question by our buddy John where'd you go John or Jarrett racks question I'm trying to animate in Adobe Flash Professional what do I select when pressing file to animate oh man I don't know a little bit about Swan meet who was gone yesterday that was using was that latch was latches and what using flash or not flash but animate latch was on keyframe would be the guy be a guy to ask sugar there was one other person that was working on an animate the key framer and latch would be your guys to ask oh okay thank you John and yeah just drawing me trip me to trash Devin not drawing anything tonight we drew last week we drew some some robot heads but this week we're working on web design for a home page for an music player yes no yet not got a safe let's see check in check and check in oh we got we got to check out Twitter yes there we go Swami Miller works who is whose Melo works I've missed Miller works or is that that's not latch is it let's open the old Twitter's in case anybody's posted something Wow a bunch of notifications okay what do you got then it has Calgary Fringe web design mock-up what's Calgary fringe and under Eid theatre festivals the first Fringe started in Edinburgh Scotland and 47 has grown in one of the biggest arts festivals in the world second large Fringe Festival is in Edmonton Alberta and draws nearly 800,000 attendees a year this looks pretty cool she looks thrilled oh I like how you manipulated the colors for the map that looks cool I like that very nice you know the one thing that's kind of that that's kind of throw me for a loop if you don't mind a quick comment is the button colors and well let's see the submit like I feel like I feel like the submit should be like purple a this is me but to match the brand colors a little bit this looks cool I love the layout I love how it's just vibrant you know fringe artists volunteers merchants and vendors that's pretty cool for it Edmonton Alberta I have a feeling that's like way far away from me but a nice job in it all right very cool uh the infinites got Alvin I tried to draw a very goofy cat a couple days ago and it didn't come out as planned but he shares the same cheekbones as you squirrel oh okay Jonathan now I have to show this off Jonathan is working on some beer labels and he was awesome enough to use a couple of illustrations of mine if you guys had seen him before the right one is the the Panther Jaguar thing that having my website and the left one was from a personal t-shirt design I did years ago but they look better as beer labels appear Baja labelled jonatha that turned out pretty cool very nice working man brew he showed me I don't he'll show it off but he showed me the whole thing and the like he did more than just the labels he did a lot of different packaging samples for for his project here and it all turned out awesome now am I seeing okay Jonathan I can just barely see it but I love how each label at the top I'm seeing you repeating the color of the main label behind the the branding which now I want to see what the back of the bottles look like because that's cool that looks great dude that turned out really cool man yes so that's by Jonathan and let me do before I lose it let me retweet that turned out so good alright we got any more I got a whole bunch of just random stuff at me today it's just been one of those Mondays or we're on Tuesday holy cow it's that bad uh rocket let's see let me open this in a new layer renew TRS interactive I like the picture that looks cool okay so you're going to populate all these with with logos I like where you're headed when the 1 billion users visit our properties every year connect with them today advertise with us join our team yep I like where you're going might want to so I like how you're using the bold colors maybe another treatment you want to use is the I like how these you know big blocks of colors are so I wonder if maybe the the images are the photos that you're overlaying on top of them should be maybe faded back a bit more so we get more of that that saturated color-block coming through which would help and you could just maybe slightly maybe slightly desaturate each one that just help that block of color come through because then you'll have a consistent like just boom boo-boom boo-boom boo-boom which I think would be would would it would really pick it up off the page the other thing is a just simple thing breathing room so cinema spot it I feel like it's really trying to like fight those those left and right edges like it wants to break out of that block so you know giving it some more breathing room some more safety and some more margin so maybe you know it can be like 70 maybe even even 60% that size same with frost gaming so you have a consistent size sizing with the logos but that way it doesn't feel like it's pressing against the the logos next to it so maybe you know maybe where the eye is or the end to where the the brake and the piano is if you brought the site you know scale it down to fit that I think that'd be pretty cool and then you just have to eyeball the frost a gaming one and just see you know that's that's one of the hard part where you know whenever you're laying like goes out for like say like somebody's you know maybe like sponsorship logos or or you're having to show off client logos or something I always find that tough you know to like eyeball each logo and try to get them down there and make sure they look like even though you know the the typography in them were the icons are different sizes or whatnot just to have them kind of look like they're you know they're a consistent size it does take a little bit of finesse and fine-tuning and I have a hard time with it but it's cool I like where you're headed with it it'd be nice to reuse this read somewhere maybe maybe is that well the 1 billion is cool yeah that's the same one I might be seeing a lot of I think it's just that JPEG is really compressed down to yeah I like where you're headed one other thing is your Mar is your your left and right side so see right here like like right you know how this this left side like these like this whole thing comes in a few pixels well I don't know maybe that works I just make sure it's like you know wherever you're here your lines are I feel like the J might be over I could just be an optical illusion that happens like this vertical is vertical like rail here gutter those might all be it might just be just this section throwing me off but I like where you're going with it dude what's looking good very nice uh bruisy all right last one Before we jump in other stuff all right how do I know I can zoom in okay so Brucie is working on energy saving efficient homes redefining the passive home okay very cool what is the passive them you know you might be able to just to lose the I've got a co-worker that that says this a lot and he's right he's like yeah I'll watch out for the box in the box in the box it does you know when you get too many like boxes and boxes and boxes starts to feel very kind of tense right and so I'm thinking you know for for when you're when you're working on you know something like energy efficiency or whatnot you kind of want to like let it breathe you know like let it let it come out of these I like how you have cards but maybe just drop you know drop the grade just leave it on the white background even drop the orange border and just let it let it you know sit flat against the background in some way would help it breathe a little bit more and it would feel more like you know more homey [Laughter] I kind of I like this pink color that would be honest it was cool the only thing I'm looking at is your vertical padding so maybe just a little more breathing room you know so there's a little more space vertical space in between the your content areas especially the view more button you know you can just feel free to just let it you know let it air out let it let it let it have some some room to be easier to you know for someone just a glance through and read yeah like I said though I do like rillette it I do like the you know the orange and the pink kind of kind of goes together um yeah I like where you're headed ooh looks good getting there very nice all right uh we caught up we might be caught up we were caught out all right so let's get back into a tweet your worth to Evan yeah yeah whatever Ben it's it all right so back to this so I don't have anything in mind for this I want to have thinking of having what's the word I'm missing here built-in livestream ready features built-in lot features I don't know that rock printout will holding back all right so we have a say in chat wat wat playing uh streamer what we call this make the life we call it the what's playing page with livestreamer livestreamer let's just say music history for now I'm just getting Ivan I'm not going to lay these bullet points out just yet I'm just trying to get down what we got go it's overlays let's make stuff up branded grill full control settings I made that one two three four five let's do one more and then let's think of one more pop in pop out in notifications good yeah because I can't I can't touch type let me design I can touch type like parts I've never been able to how to showcase your stuff oh yeah oh that's what that sorry we've been calling it the West playing page you have I think ready to go is all – didn't it not that will tap you the wordsmith we got to get tab you look at this but I thought there could be like a hover state over these like a tooltip that says more you know about it a little bit or this might jump us to a page that has the full features do want to do that do we need to do that I don't know if this is going to stay but I'm gonna put it up there for now so it's kind of I feel like it's that usually a button let's copy this button it's not our primary button it's a secondary so we'll use this one and we'll make a copy and that's gonna mess it up I forgot how I even did this I need to draw out a new one so I had the radius up to like 200 or something and then I can copy so I want to copy this one I can right-click on the shape and do copy shape attributes and I can paste it to another shape letting paste shape attributes alright and I'm going to go ahead and just remove Lego premium Mac ctrl J just copy that layer text and control V to paste in our sign up and we'll just simply move that over there we go okay we're getting there one two three four five man we need a six we have to it's the rule of thirds rule of thirds let's see Oh thinking can we say something like easily hooks into well integrates into a lot of stuff how would you say that man I can't think part of the creative process is help me people let's see full control settings let's just say usually integrates your existing stream software okay that's a lot of word that word zone integrates into easily easily integrates into stream software okay let's see if we can lay this part out one two three four five six is about sixty pixels just uh so we need to all right I'm going to pull this section out for now I don't know if I'm going to need that icon up there not let's change the color on this just quickly so we can see it we're going to use this as just a reference and we'll do a we'll do two column I think two column might be good so if we can fit two column what's there wit look like here for fifteen do the math so for 15 – a gutter let's say the gutter is thirty equals I go to equals 1/9 ground 192 for our mock-up here copy this first one let's see what 192 looks like about that so another little trick I like to do is just making blocks it's kind of like you know when you're wireframing we didn't do any like low fidelity wireframe we just jump straight in and started designing but you know usually you want to grid out and make a lot of like you know just kind of block it out what you want where you want copy and content well not so let's say you know let's say one of these is their is their bullet I know if it's going to work we might need more real estate and then you know that's our next bullet and we're just kind of already seeing that it's not going to fit so let's think how we want to do this is because if screen shot is awfully big I don't want to shrink it down anymore I need room for that if we did something different we will hide it for now so we Center this part then we get more room for our bullets okay so now if we take this whole area we don't want we want that we want to leave an outer kind of column there so it's 950 so if we do 950 – and then we have let's say 30 pixel gutters – – 60 right and then divide that by three we're left with 296 so let's drag out a few more blocks 296 all right let's give you a fill so I can see this block all right pull Jay and drag the next one – it's going to be over here so Jay and then we will Center this one all right so then something like that and actually we don't need these to be that tall I don't think right so add some text trap pasted over the block I think this can be smaller scoop 16 changes color say these bag just so we can see it we're doing all right all right Jonathan I'll talk to you later [Laughter] mmm watch Network don't get trouble didn't totally like magic would you put all copyright free music there all copyright free music there oh you mean it as a feature well I feel like we talked about that up here I'm noticing that our our squiggles is peeking through alright let's see can this stuff kind of Center that alright this gradients going to cause me problems that I will deal with it later ok so let's go back to here and let's do our bullets let's make these text areas that I'm going to instead of just clicking I'm going to drag out a text area well paste it in there and then we can go ahead and adjust our line it–so around 16 point I don't know I like to set it probably around 24 and make sure I don't get anything else turned on okay so now I can control J and then ctrl T and just make a couple copies so we have our our our text our bullets all right and then load the next one in chat in chat what am now looking at we've given ourselves some more room on just wording so in in chat what's playing maybe this is what's playing call-outs and landing page maybe that's a feature like that and then our way know that that was sorry this is just in chat okay so in chat what's playing call-outs and here to clear their family let's plan call-outs and this one is livestreamer what playing music history page which is what we're seeing and then we go to here and this will be ready to go ready to go animated screen overlays and Mike made user killer ready to go animated stream overlays [Laughter] and let's see oh what am i doing I already made the gutter so I don't know why I went and did this these can go to the edge because these boxes are going to disappear in a minute all right so now I can just copy you know what before you get maybe we should try to do some icons so alright what's playing call-out so maybe a chat icon right so let's do a chat icon and we already have some existing icons here so let's grab where'd the yellow go did I hide it button copy logo header streaming features is there it is okay so we're going to reuse this icon I wonder if it should be like a like that so now I can double click this and let's quickly just draw some icons well probably have to refine these for sure alright I'm going to pay attention to my lion consistency I have it set to 1.5 and it was in chat what's playing so maybe real quick we could just do like a chat bubble right and we'll use shape builder and this is where this is where a Photoshop and illustrator go hand in hand when you're working on the SVG stuff or the vector stuff so let's go ahead and I just recently changed all this around my palettes were all screwed up so maybe we do this control shift em and then let's shape build that and it was at 1.5 we might have to bring it down and then say we do a let's just do a music note a really ghetto looking you'd note will sample that and I didn't finish Hicks I want to copy want the same angle turn on outline let's go control why I might I think I did the angle the wrong way average we love to average right just kind of eyeball this just for the time being and we'll just kind of visually Center it up all right if I save it it should just appear let's see if it's too big now I actually went alright so we bump this up in chat what's playing cause now the line width is a little too thick for this earrings are smaller so let's try let's try let's just try one pixel which means we have to move our circles over slightly save that I'm not like joining anything or you know making it a complete shape yet because I'll probably edit these easy more all right mm-hmm like it this is easy music as a license i monetize i stream rap yes ah thank you John John I appreciate it what kind of wine oh it's not wine it's a sparkling natural mental mineral water you know what's great about these bottles is that they're green and they're really fun when you got a green screen set up and you totally are oblivious to the fact then it just looks like you got this weird-lookin label oh man yeah i love i like sparkling water i didn't used to like it I used to absolutely hate it couldn't get used to it because it wasn't like it didn't taste like sprite you know so didn't have any sugar in it but then I don't know I just finally over the years got used to it and like it doesn't have a four on here call okay so we have the let's let's do this can you remember right click oh wait I'm not on it yeah right click new smart object via copy so we have another copy so this will make it easier to edit this sucker alright so livestreamer what's playing music history page hmm let me show you guys a little secret first let me check the Twitter's okay uh Oh Camille okay what do you got oh this is interesting space digital I love that effect on the letters I have no idea what it says but it looks awesome it might be a you know the only the only tough thing about it is that I don't know hire you well I guess this would have to be an image right now I love this effect but you're going to lose out on the search engine stuff because I don't know if I don't know if you make that can you hide I guess you could do some shenanigans where the type is in the in the code ah see remember we were talking about you know making logos look the same you know being around the same size and having a whole bunch them together here's here's an example and it turned out awesome wait who's that guy plexus stuff what's plexus curated tag metadata for the troll yep and I know an icon for that D Street yep yep so Photoshop is different than then illustrator I wouldn't say better they're two very different softwares so before we get into that though I like what you got going here dude but yeah the only things that Xperia – readability might be tough and getting this into code where a search engine can read it might be tough but visually it's looking cool maybe the only I would tweak is like give give this paragraph text a little bit more line-height yeah I love the color palette I love this this looks gorgeous the mountains looks really good it's looking pretty cool and that was like Camile yep not the final outcome yet but idea is they're very nice dude okay so Photoshop and illustrator one is not better than the other depending on why I guess depending on what you're doing you're doing logos illustrators better if you're manipulating photos photo shops better for instance illustrator is vector so we're building these icons and vector and what's cool about photo shops is saving them as vectors so if we need to go and edit them in illustrator or export them out for the developer because these icons will be what's called SVG files in the the final code and SVG is a scalable vector graphic which means that the vector file that a browser can read and that way it can it can scale it you know up or down and not not lose any sharpness which is perfect for like retina displays and scaling stuff down for phones and scaling stuff up for desktop you're not these icons are always going to be crisp so that's why we're keeping them as vector files now stuff like this screenshot I don't know this often check of Mike's but I'm pretty sure they're give me an image so you know this this is a graphic that is much better served in Photoshop well no I guess okay we could take this out and build this whole thing illustrator like to cover great cover art in the the Avatar art and uh my prints will just stop playing Nate what happened sorry back up or maybe I hit something so like I think this effect here I think we're going to do this as an SVG right Mike wasn't that what we were talking about but these little icons or SVG's so there's situations where like especially when working on web design where these two programs work andaman now like this logo here this was designed and built totally in Illustrator and it still it should be an SVG as well so let me close these out so if I double-click oh I didn't have auto so Clara if I double-click the pretzel logo it's a vector smart object right so if I double-click it's going to open it in here and the same color as the the artboard so so now in here you know if I needed to export this out or say I don't know we did something dumb and we had to change it to that you know I can just save it and it'll up it'll update in Photoshop but retain that vector quality so we don't want to do this let's go back okay so save that will close it back out and then it should be back to there right so that comes in handy when you're trying to export stuff for the web wave should SVG since we can easily animate colors in it and make it easier to deal with responsive design mmm D Street yeah that's something that has always been good with Photoshop is that Photoshop and illustrator you know as far as doing stuff like this it's always been able to handle it which has been pretty cool like making SVG files oh somehow this MOOC so it over the years it's always been you know when when web technologies changed here and there for the most part you've always been able to jump into Photoshop and like make files that work for it you know I'm saying it's been pretty cool uh you know the only thing I don't know if there was ever there was one plugin that I always needed over the years was to make an ICO file that add I had to use a plugin for that and an ICO file as an icon file for for like web stuff it's it's the the icon nowadays I think you can use anything like the Twitter icon up here on the left that I don't know if that is an IC o—- file anymore but back in the day there was an ICO file that was the only I remember that you couldn't export was an ICO file but yes we are getting there s e-g in JavaScript to animate elements for alerts a few times works pretty dang great with MUC see favicon that's it you're right d Street ICO file of the favicon alt shift key I might have Nate you know me okay so livestreamer what's playing music history page oh and I was going to show you the trick so have you guys ever seen this site the noun project this site comes in super handy if you just stuck trying to figure out something for an icon I usually I'll use now the the noun project whenever I'm trying to just figure out like I'll get some random icons thrown at me sometimes and I don't know you know where to even start and there'll be some good ideas here so like for here you know what is a what some history icons look like you know okay so we have clocks a medieval helmet a lot of clocks actually that's an idea we could do what is that you know the going back in history with the same music icon in the middle that would work for us files and whatnot the what is that the the Coliseum column a mace I guess that's some bad history castles more historical you know stuff a torch but this is a great side if you just stuck in trying to figure out you know just trying to get ideas specifically for icon or iconography or smaller illustration stuff like that these shields are pretty cool I mean they don't work for us but you know for all we're looking looking for but I love how those turned out so you have a noun project comes in handy yeah and then I don't know if we punch him use a history own or something something where if my ideas already in their music history what we got so yeah this seems to say history and accordion I like the idea of using this this outside like clockwise or counterclockwise spinner like that but with will put a music note in the middle I think that'll work okay so yeah now in project is a great resource if you get stuck and need need some good ideas for icons so since I made a copy of this one I can go ahead and just double click it and we just need to get rid of the outside here and we'll do a circle and let's Center that up I better group this together I'm a group this and I'm a sinner this up too all right so maybe the arrow is over here let's draw arrow head and I like the outline style so let's keep that 12 C ctrl F o will flip this control why go to outline so you can see where our points are at maybe like that one thing I have kind of figured out when doing your ozo is that it looks weird sometimes sometimes you have to just slightly rotate them when you're making when you're making icons like that so they have like so you have an equal like empty space on either side it's such an odd thing but sometimes just slightly rotating it helps and we're going to reuse the point here maybe you know we won't have to rotate it though if we bring this up to you we just we just use the point up here right so but then we need to take back tract is this this is pretty cool that's a cool cover fabrication all right so control Y alright so now we can simply if we don't want to really mess things up too bad you know we're just making enough so we have some icons to start with I'm just going to add a point on this circle right there and then if we use the direct select eye arrow which is the filled in one I can select the pass in between right and we just kind of break it I'm going to lock this for a sec because I need to get that point on that arrow so I'm going to I'm going to average it control J and select both an average just in case and then control J and that gives us the arrow point and then now we can we can see a little bit better will kind of bring it back in and let's save it out and it might be a little bit bigger than we need it ah no it's not bad there we go okay so we have our what's playing music history page icon though it doesn't really say page I don't know if it has to let's leave that for now okay killer ready to go animated stream overlay so I think I have a simple idea for that as well let's copy this and new Smart Objects via copy so we move a new copy over and that's another cool thing of Photoshop does you see the little the little little pink guides it tells me that this icon is 37 pixels left of the box next to it and the icon next to that is also 37 pixels left of the box next to it so it helps me keep things uniform which is nice alright so let's double click this and there overlays maybe we just do something like unlock all if we just do something kind of simple see let's go rectangle arts let's drag this out and we'll bump live corners up a bit all right we want to just kind of show off maybe we just do something as simple as that and then maybe a play button polygon tool click once and say three sides radius 20 okay size it down so I don't know if the play button I mean my mind went straight to a play button but let's see what makes more sense for an overlay I mean we could have I want to keep it simple I don't really want to draw somebody right now another thing we could try it's just another idea let's play it out see what looks like that object blend let's go to blend options first we're going to go to specified steps we'll start with 8 object blend make it we need more object blend blend options let's go to is preview go to 12 okay might be too busy but I want to try it okay now I'm take control C control F object range bring front select both object clipping mask make okay save that real quick just I'm not finished but I want to see it was too busy save that might be too busy let's simplify this down let's just do maybe we just do like oh that might like too much like an envelope okay I think we got to just go simple I'll make this let's see we'll scale it down slightly maybe that I don't know yet I'm still thinking of a good way to do this do you happen to know how to add a free-standing container so I can embed my demo reel here is my site how here doesn't much I want to add to demo reel to the right of the text with my name um I would answer that bad have no idea where your site is Doug Thomas my stream personally is there every Tuesday at 4:00 yep every Tuesday like clockwork let's see oh pixel cast Oh was that what that was a now nitrite that you needed no Travis Travis just had a baby like uh five days ago that's Travis had to he had to take an extended leave of absence from the the Adobe streams because he was getting you know work was getting getting crazy and he had a baby on the way which his baby arrived on what they was at that was uh on last Thursday so he's got a new little one in the house and I wonder how I wonder how his new son's older sister's taking it yes let's see yep column yep he did arrive on 4/20 oh man but if you guys get a chance you should go to Twitter and tweet at Travis and it's Travis the designer tell them congratulations if you haven't already that he's a a dad again and from what I hear his wife and family are doing well so he's good to go I am on till 7:00 so I'm on for another hour and I'm almost out of sparkling water okay so let's keep grooving let's grab all of these icons and text it's not that one it's down here we're going to pump these up a bit I'm going to keep the icon a dark color like that maybe I do control G and group these so I have my my bullets in your own grouping so I can find them later alright and then I can actually we should be able to just to hide these these boxes for now okay now I'm going to do control J and copy our bullets well no I'm not going to I'm a copy the inside wasn't but what I got to do is I don't know I don't know if there's a shortcut to that 1 2 3 2 4 I do need to copy all these icons I don't want to you know I don't want to mess up the icons above them so I'm a new smart object via copy I'm going to get rid of the old one so don't get confused this one too new smart object Rita copy so now I can edit these and not have to worry about messing up with of the ones above it new smart objects API alright let's look at our reference sheet we had branded web address and this one might look funny so let's Center it alright so here what could we do here we could do the typical HTTP we could just write URL we could do a globe we could do what could we do what could we do should we go to noun project and just see what noun projects do when address just see what comes up an address book yeah a lot of Globes a link link might be we want to say branded let's see so we have a lot of globes say internet and web location pin it's an interesting link right there what can we do what can we do branded web address maybe maybe we change the feature so we don't have to make an icon I'm kidding because this is real world stuff that you'll get that will get thrown your way if you end up doing web design for a living you will run into a lot of situations like these where you have to figure out some interesting icon sometimes let's let's look up branded probably to give me a cow but bringing all the stickers a good idea kind of like the sticker last spark weird the sticker go the sticker is a good idea because it's like you're putting your you're putting your sticker on it you know you're putting your brand on stamp is a good idea kind of like this the sticker concept these are nice icons he's really good so a sticker tag my shoes have to do with I like the sticker maybe we make a sticker and then we use a and we just modify and write out the URL having a hard time thinking about this one vanity URL using www I think I think that that's a good idea so alright so maybe we change the wording – that's a good call out Mike should we say custom vanity URL and on here I will get rid of this let's let's copy this circle though I'm not fall because we want the same side paste it in here I'm gonna I'm gonna lock it though gonna make a new ellipse over it we have some consistency right object unlock all I like the round sticker so let's do let's fill this shape let's cut a chunk out of it maybe maybe that much and we'll pass find or divide okay will ungroup this and then I think I just kind of design myself into a whole but what we'll do is we'll we'll eyeball it for now you know what I should have done let's do that again let's just do a 45 angle it's easier to easier to figure out so 45 then we just turn the whole circle divide and group make this a stroke now if I hold shift there that was easier move you into place and then we're going to get stuck with these corners let's see if we can just quickly fix that all right and then we'll have let's find a good font let's say we use a monserrat to dub dub we're just going to simply trace one of these letters so we can keep the line consistency turn this control T to lock this hmm that's going to be a very very bold yrw troll c-curl F the letter O all right make a copy all right object unlock all get rid of you so we're going to have to let's do a line extension because this one we are going to have the outline and then cut it to fit you might have this one we might I want to keep the same group those and we can align them hmmm this one's going to be tricky maybe fudge it just a bit all right well let's save it out we can at least see if it's going to work it's update come on Photoshop update save and I think we're good it's too complicated what's up sweetie [Laughter] you're taking my artwork XD how's it going see your rants on Twitter earlier [Laughter] illustrators a blast Fleck I will find the dog what is he making I'm working on a web design for the pretzel player which is this little guy it's a real real live stream ready music Claire hold on one sec I got to double-check some all right dad let the dog out sir how swim practice going to court okay so this isn't working it's too busy see it just there's the double use you're like there's too many going on we could we could fudge it a little bit more maybe just knock the let's knock the line way down to didn't see we're starting to lose nah it's just not working let me double check though that it is set oh well there's my problem okay these should be set to a hundred percent so I'm gonna have to go back and manually blow all these back up so what I'm doing now is sometimes to get a clean representation of your icons in Photoshop you got to make sure that they're pasted in at a hundred percent and I must have just dropped those other ones in so now I'm going to I'm going to get a read of this so this is 44 okay so about 44 44 pixels is what this icon should be okay so I'm gonna double click this we're going to fix this real quick all right so now go to your artboard tool and let's bump this up to 44 got that so now my line with Mike I might have to go back to 1.5 yep okay so the sizing back up but we need go to 2 sometimes Photoshop doesn't want to update so if you simply just move it a pixel there we go okay so let's do that on the next one should have caught this earlier I didn't see it our board tool up there won most of this to turn to 2 pixels office not let me save that yeah I can go to is it under there edit or it's document setup document setup well no I forget how to do it used to be able to like just punch in oh it's up here okay so I can say 4444 there we go alright I'm close that out so this one let's go ahead and do the same there 44:44 save ctrl W this one I go and edit because you know I'm not going to use it but 44:54 it might actually look better now that it's going to be a hundred percent though and maybe not I close that out this one four four four also when your another thing remember is that when you're when you're using SVG's it doesn't matter where they are on the artboard for the most part it's always going to be centered in Photoshop so see how the position didn't move it just scaled it it doesn't matter like I can I can drag this thing like over here and save it and it's not going to move position in Photoshop it's just going to you know the scale little just now if I if I make two of them right where if I have like a point over here then it will move right it's going to try to Center what this whole thing is so fit update come on save alright see it updated see then it move because there's another element in there now so I get rid of this and say it should move it back once it updates like that okay so getting closer this vanity URL is not working um maybe we use lipstick yeah I like to sticker though because it says branded what else could we use for URL what says like web address that's not text can you guys think of anything um this is tough cookie uh I guess worst case scenario you do something abstract ideas a globe yeah if I do a globe though I'll just get rid of the sticker part mouse pointer that's a good idea John's in here I'm trying to get John on one of these streams every tell John you got a yellow screen cursor is a good idea see John now the trick is can I try to quickly freehand the cursor it's kind of close sorta well should be a pointer it should it be a hand I think another problem we've got is our our little sticker over that might be too big let's do a smaller overlap that might be too small though it might just be one big muddy line maybe the cursor is filled in and filled in it looks terrible I just mean my drawing my drawing of the Kersal that doesn't look good that's good enough for now make it smaller I don't think that updated that's a little better I guess that'll work for now all right this one make it let's go ahead and just our board so just so you guys know usually you don't make icons this fact we're doing this quick just to get essentially placeholders on there and refine them down so I'm sorry if they look horrible that's kind of the nature of the beast and group a lot of stuff is working progress okay so this one was didn't update this was full one two three full control settings okay so settings might be fully customizable and accurate did this not scale up 4444 there it goes okay some I don't know why it does that sometimes it just doesn't want to like it takes a minute so settings rectangle right rectangle live corners another rectangle all right fill it feel it live corners here we go got ourselves a toggle switch control tqf rotate Update there we go fully customizable accurate stream settings need some more breathing room that's how about that for quick on-the-fly settings icon that'll work uh oh we could just use we reason gear we have a gear or the gear go not in there okay so I have a gear already maybe we just use the gear icon and that is under oh you guys want to see we look at I let me look at some nails so we can see argh so this is when we were playing around with what the UI is going to look like for advanced settings right so currently what you have in the pretzel player see there's our gear icon you've got quick settings and this is going to be your spot where you know you've got to change stuff on the fly so you need to you know you don't want music to autoplay when you load up the app you need the app to always be on top of everything else right Oh flex you did say cog yeah I'm thinking plus we've already got it you know it might be a good good one to use yeah 3d that could be an interesting you got me thinking you got me thinking let's see so this is quick setting now there's going to be a whole slew of specific you know types of settings you can get into right and so we were working on what that looks like so you'd be able to imagine having you know when you and this is this should be full-size about full size right so when you click on the COG you would have a button that takes you to all settings if you click that button it would span out and then you would get the full list of settings right it becomes kind of like a overlay for the most part and so there's going to be a ton of settings under here and this is all stuff if you if you work on UI and UX and whatnot you know this is the type of stuff you're going to be looking at so and we were trying to figure out what what an error state might look like you know to try to tell you user like you know say you unplug your speakers and now the app can't find a an output device right so what would that look like between the two the two settings and so we had done like this big been working on what that looks like this is just a really small snapshot of stuff then there's like flyout menus you know what do you flyout menus look like you know this is the search and stuff and you know there's all these little little details you got to figure out that can make your mind go numb sometimes but it's fun it's fun stuff all right so we open this so I could grab the gear because that should be an SVG I can double click it or copy you but I don't think I opened the other one yet so go back to our home page copy this guy and we made we made a copy already so it shouldn't be affecting him so put on our cog we got to change our artboard to be bigger and shoot I made this outlines already I already expanded it all right let's see if this holds up it might be too thick this goes back to line consistency it might be too thick and why did I paste it in that one I meant the paste of in Nederland I did have it open already okay there you go and is kind of thick uh let's just do we're going to makeshift it real quick alright so drew line give us some color see what – looks like alright yeah see how it's thicker so that's a to write do some more math first we're going to see if we can just fix this with offset path for for now I have to go back and just remake the whole thing so C 3 is too much 2.5 it's about 2.6 all right so object path offset path ring of negative preview go negative point six zero point four point four eight point four okay and group oh yeah it didn't it doesn't look good let's at least see if it's close yeah see okay now it's thinner all right well let's remake this thing real quick and what I like to do is just simply think the way I did it before was I just made a brush so this too here's it here's a quick way to do this okay so you have your basically making one side of your gear ctrl c ctrl f oh there's a lot of different ways to do this I don't know why I've always done it this way but whatever join this okay get rid of you oh look out it really messed up the the incisor it's open our brushes drag you in and you are a pattern brush okay okay okay get rid of you now watch the magic it's so magical you line this first line line go back to our brushes and we'll BAM the gear got some breaks in it it'll work alright control C control f this is basic – we got ourselves a cog back and the line consistency should be whoa what'd I do so s stay back all right that works this one is easily integrates into streaming software I feel like that should be like easily we can to create this thing wait Nate didn't you know when you wanted to to try Oh yep will do Mike what's up David all right column is nice having you bud I know I think we're you're actually late that looks like a nuclear symbol a bit that yeah I did I feel like Nate mentioned something else here Nate where to go you said something about or know somebody said oh that's what it was you mentioned curated music that's right man that's going to be lets say fully tagging curated music library Tec we can we can use we'll use a tag icon what is now projects a tech um tags or you know it's something that is choice like that's different choice like it's choice you know like it's uh it's been you need and you just curate could you try and add tropical remix type music into pretzel tropical remix type maybe like the switch button you had tropical weight huh put or dot wait flex where are you which one you dime out curate we should have a guy pushing books not much coming up for curate it's like if it's it's hand-picked right maybe a hand what does hand-picked look like you give me fruit hand-picked maybe it's the the old rock-and-roll like picking your nose that'll work no problem flick I'm easily confused anyways maybe have three dots in the middle so the three dots were using four more instead of settings it would be it would read more oh that's an interesting idea hair pick I'm at a loss I don't know this is a tough one how do you say curated kid be hand-picked be chosen it would be categorized yes what would it yeah what's it safer for category arrow and organized it's been maybe we want to show hand selected yeah maybe this might be too busy but I'm terrible drawing hands on the fly well my dog is losing it may have to go let him in so hmm also the outline style I don't know if we can we're going to give it a shot burner Marie that's a bargain at who knows what we give them nubs of course I'm gonna have to redraw all this because it's looking pretty goofy but that doesn't look like a thumb oh let's see if it's like that like that maybe have man you I'd be too big update its update control ass fully tagged and cure a Musa it's like you picking your record there you go yep it's scratching all right hold on I'm gonna go get this dumb dog really on 20 minutes left all right what are you doing wait please hey Sean I got to show off her dog so I mash off mine oh he's a puffers this is Finn look over here oh you're gonna fall okay look over there what's that okay you can go bark at the neighbors hey run away [Laughter] okay so I think we got enough icons here let's try all of the icons with a I can close that out with a white overlay to match the text just to see if that looks better so I can simply just select one okay give it a white overlay it actually looks kind of cool all right so copy I'm a copy that layer style then I'm going to select all the other layers and I can paste at once paste layer style yeah I think the white works better I think the two-tone was a little bit heavy let's see what do you guys think you like to just match in the text color better or did you like the 2-tone better the median salary of a graphic designer I think it really depends on location flex I say I think I agree with your flex I prefer the the white style hahaha spirit it really depends on location it depends on if you're freelance or in-house there's a lot of details that go into it there's there's a few websites so that you can look just yeah for the most part of you just google it it'll come up you know you can even type it type in the location you're at you know what's the median salary of a graphic designer in wherever you live and yeah and that'll work so yeah so yeah I'm thinking I like this too let's bump this up a little bit we get rid of this now we don't need it this one comes down feel like showing that off is pretty cool oh that's already there I need to scale this down let's get in there I don't know if this is too busy or not the record covers maybe if I find a better like layout it'll maybe there's too many just hanging off edges is one of those sleep on it things where you come back and look at it later you know I can't decide oh I missed one where are you mm-hmm just garyun sighs completely I have one hidden back here cut that one out maybe there just needs to be more of a pattern to it so I like how this side breaks out I don't know I'm having a tough time with this put it all back yeah I don't know I'm out I'm having a hard time I just do graphic design as a hobby it's so hard to do it as a job you need to be really really good like the Evan Eckerd neither there's so many of the Aflac I'll tell you about that story later it's uh what's the term things are in motion I'm gonna copy this for now and move it into this empty space um yeah one giant record cover I don't know I'm have to come back and look at it with with fresh eyeballs in the morning I think okay so we got this far I control Z too many times than the gradient got lost so I had a thing down here you know let's go ahead and get the footer in just just so we have it because that's something that we can just get in I wanted to I was going to call out a section for premium maybe that lives under features okay real quick before I jump into that will do the footer next okay so streaming features we have bullets let's move this up well I like the breathing of brandy more space let's move this down for now grab you and few control-j trying to keep our layers organized we know where they're at look drag guys okay so guilty group that control G make this another button what did you go but oh yeah let's have a link to go to all features because then there we'd have premium features call that on that page to move that back up alright that's getting better alright so now we want to do the let's just do that let's get footer out of the way footer your footer can be interesting we will make this its own weight so I talking paper up okay so let's do grab our shape tool and the footer let's make it this color and we'll drag it on the footer will be so they so just kind of psychological will keep it straight this is a straight you know horizontal line computer grids we need I want to have like a footer that is pretty you know explanatory footer wish I could spell is not three hours in footer so let's do something like this and I had like download right and let's look at features premium and make this font smaller pretzel player that we will bump up to 18 download features premium or anything else excited okay so ctrl J another list going say about us let's see about us would have what what about us have we have about about my creaky team what do you call it brand brand ethic then make a new one and do to help fork FAQ we're just putting stuff in here now terms that open our guides up one two three four or five this is us two hundred and hundred forty nine dang it lost count I bet she even had let's do another wine alt 0 1 6 9 yeah I guess directed out 17 pretzel all rights reserved reserved happy love you built with happiness and love I don't know will not go down to like 14 if we reuse the icon let's go grab the icon up that's on trailer where are you you're right there grab the icon roll w so I can copy that and I just paste it right it's something move on me alright scrab all this and make sure we are where we're supposed to be mmm we got a footer Brun alright the this regular yeah alright whoa alright we got like eight minutes left I I learned on Dreamweaver David I learned on Dreamweaver in a long time ago that's that's how I learned how to code for the most part it was it was copying source code of sites that I liked and try to figure out how they worked and then I use I would use Dreamweavers WYSIWYG to see what as I was hand coding to see what it was actually making and that's kind of how I learned and then once I got more proficient at just hand coding you know things got a lot easier after that but everybody's got to learn something out right so I tell you we need like social icons over here hmm you know what I need to really keep a just a PSD file of social icons now what we're going to do is I'm going to steal them off another web design I had going to go to the 9 live site let me drop these in and then we're going to look at Twitter one more time and then we wrap to wrap it up because we got a raid to do so there's icons here I'm just grabbing uh ah dang those aren't we'll just grab these for now that'll remind me later that I need to add those in um we have it's really just this stuff right do we have we have twitch we have Instagram to remember Instagram what do we gotta Nate I know we got we got medium what to find a medium icon alright but I got these in here for now so we know all right so we got pretty far man these things take time having to draw all the little icons whatnot and they're not they're just kind of raw right so this was part two we put a pretty big dent in it I want to do this other illustration and time flies we have fun uh Evan how aren't you verified yet on Twitter I look at I died their verification process have you seen the gift of the monkey just like you got his hand on his head he's like banging on a laptop I kind of feel like that's what the verification team's like I'm not trying to be mean but you know I'll be like looking around and there's like somebody on Twitter with like two followers very flies it's like wah how I'm not mad but it's just it's mind bottling oh they're now watching the stream now I'm black black balls from the whole thing but whatever oh man okay so I have the the raid information the target for the night let me look real quick anybody else in it something through Twitter I need to look at oh I found this earlier on the web I thought this is pretty funny [Laughter] that's pretty funny if you're it yeah it it said enough don't ever do that so again it was great having you all next week I hope to have my half-baked work and work in process t-shirt ideas ready to actually sit down and we can do some some full-blown designs I have another I have another mask a logo to that I've been kicking around that I need to I can kind of show this off a little bit I need to vector this dude up this little this little panda bear today we can do that at some point but yeah we got stuff but we need to we need to get the t-shirt stuff out of the way and for for for a go we got to do we're going to sit down and do a brand guide or at least pick part of episode to do a brand guide I'm glad you like it on you I'm proud of that little panda for a secret project yep okay I'll um well yeah I guess we should get ready to raid imma look at this one more time if I have this last section I think we're pretty close to being good to go and I'm sure I'm sure mike has a whole bunch of comics for me good stuff Oh to do all right let me make sure I got this okay so yep title guides we got dialed guys to do we're going to be rating tonight a is that say what does that say Swami what darkness art darkness art okay so Swami in a minute is also going to paste how he just did he's going to paste the the raidCall that we're all going to copy and the rate is the best part okay first of all I thank everybody for tuned for showing up coming out staying late some of you guys stay up so late John will tune in from work I mean you guys really are awesome that you come out and watch the the episodes I'll be here next

4 thoughts on “Web Design & More – from the Adobe Livestream 04/25/17”

  1. Hey Evan, is there any shortcut to fit width only instead of whole artwork? I am used to using Ctrl+0 but while working on mockups it gets annoying to manually zoom and fit to width.

Leave a Reply

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