Transcript

00:00 let's get the ball rolling I love that
00:18 back we are back right yes there's episode six right yeah I believe it it's
00:27 been fun thing like that yeah we're starting to get the hang of this thing I think hope so yeah hope so
00:33 you do anything find it fun or interesting this week five this week that sometimes
00:39 we have the holidays though you know no
00:45 no real drama there Sykes you know I think is yeah last week it was Easter it was good yeah how do you uh I worked my
00:54 tail off this week I hit a lot of 3 a.m. mornings the kids didn't have school
01:00 this week so I didn't need to worry about waking up at
06:00 to get them up and ready for school so I worked my tail
01:07 off this week so yeah that was good it was really really really good making progress on you know the website
01:14 launch hopefully by the end of this month that's the goal don't know there's still a lot to go but hopefully we'll
01:21 we'll get we'll get her done I'm excited about it it's looking really good he's good to hear good luck yeah so in
01:28 today's episode everybody we're going to be talking about images now we're gonna do kind of a two part series on images
01:35 we're gonna split this up instead of try to cram it all into one episode we're gonna do two different episodes so today
01:43 we're gonna be talking about kind of images and general formats kind of where
01:48 to find images and stock images and and then icons and the importance of those
01:53 things yeah so so what do you want to start off with how about formats start
02:00 about the various formats and whatnot yeah let's give it a go cool um I know
02:05 personally I don't know buddy who Joe Pitts used to be in big big big dmg fan
02:11 yeah all right in every single image or light light on my web site had to be
02:16 high quality PNG I was very particular
02:22 its Mohammed kundli because but I think I've kind of seen the light and been
02:30 more progressive about using different image formats um you know specifically
02:36 moving everything towards you know Pete a JPEG moving everything towards JPEGs because basically the file size is a
02:44 smaller I don't need lossless I don't need transparency all the features of you
02:52 know that and I said about pngs I could make my site significantly smaller faster you know
02:58 yep eggs definitely so what what Greg's talking about everybody is you know if you look at an image and you kind of
03:05 look at the extension most of the time the extension is gonna say what type of file it is right and what Greg was
03:10 talking about is something called an image form I call the PNG and what that means is it's a completely uncompressed
03:16 image right I don't remember what PNG stands for but um I do portable Network
03:28 graphics there we go okay so it is completely uncompressed um one thing
03:34 nice about PNG is it does support transparencies so if you do require transparency on an image a PNG is
03:40 definitely the way to go but for the everyday image like a jpg or you know um
03:46 well like a banner image or images that are just you know in straight-up images on your site you don't really need to
03:52 worry about transparency so you know that's why the JPEG format is very very
03:59 popular because it it is compressed right and depending on
04:05 obviously depending on the compression level the quality of that image you know
04:11 can definitely be degraded however there are a lot of apps out there you know
04:16 check out episode four right we did a episode on our favorite apps for web
04:22 designers and we talked a lot about image apps and image optimization apps so we might breeze through some of that
04:30 in in East couple episodes but if you want more in-depth talks about image
04:36 compression and what apps we recommend definitely check out episode 4 on our recommended Mac apps so that was a good
04:44 episode but getting back to it JPEG is a compressed format and there's a lot of
04:49 great apps that let you compress those images so that you virtually can't tell what the human eye that that image has
04:56 been really compressed and the quality now of JPEGs are pretty high don't you
05:01 agree Gregg absolutely it's kind of amazing how it's progressed all the you
05:10 know the sharpness of the cameras and the ability for the compression to still
05:17 meet that high quality with the file sizes up and you can achieve yep it's
05:23 really nice really nice anything one thing I had to say please well it is to
05:28 image file formats one is your your TIFF file format alright dot T iff and the
05:35 dot BMP file format but battement or not I really web safe formats
05:41 yes stick would stick with the JPEGs stick with the p.m. cheese and be pretty
05:47 good yep pretty good now there's a couple new image formats that are kind of loosely based off JPEGs right one is called a
05:53 progressive jpg which is interesting not all browsers support it yet so you might
05:59 want to shy away from them but if you want to play around with it they're interesting so if you ever go to a website and you see an image that kind
06:08 of starts off looking pixelated and as the the page downloads it gets more and
06:13 more detailed that's something called a cook a progressive jpg it's very interesting
06:18 format I honestly haven't really played around with them much but it is very
06:24 cool and interesting another one is called web P which is something that Google's been pushing I don't I don't
06:31 really recall all of the benefits of web PE I think it's similar to the progressive jpg but it also from what I
06:39 understand suggests that it has better compression than a JPEG but again I
06:46 think only Chrome right now supports web P so you know though again those are new
06:51 formats but they're interesting to look at maybe keeping them in the your back your head but um you know unless you
06:57 really know your stuff you probably might want to stay away from those have you played with any of those Gregg
07:04 and then it's gonna be very interesting to watch it just reminds me of the mpeg-
47:10 kind of debacle between all the different browsers that have had a few years back to the licensing Mozilla was
07:17 pushing Augie one video aaaghh he that's right of him and log AVI and you know
07:24 h.264 is be imported by like Google and Apple and thankfully thankfully they've
07:30 worked it all out and the licensing has been has been loosened so that everybody can
07:36 benefit but you have a feeling it's gonna be the same kind of messed yeah yep done up is definitely cool and then
07:44 you definitely pick me off on on progressive jpgs so thank you for that that was that gonna be I'm gonna enjoy
07:50 watching how that develops yeah yeah now that one I think I think that one has the most legs it looks the most
07:55 promising to me and it's also I think the most open things that Google tends to put out there aren't necessarily the
08:02 most open and I don't know about you but I don't trust Google fully so um yeah
08:08 like I know it's just an image format but you know still I don't know yeah it's definitely gonna have a big impact
08:15 I mean images are absolutely everywhere right he's just a keep part of everybody's sight is you know images
08:21 even if it's just a break up break up text and make it more readable yep midges are her dominant images are
08:29 definitely I think the most important thing on a web page because without images people people need eye candy and
08:36 without images on your page and and good relative images I think a site like if
08:44 you look at a lot of themes on rapidweaver or any any basically anything that you want to look at and
08:50 you know anything that's selling a nice either a theme or a web design tool
08:56 right all of them have stellar images because they want to make sure that that
09:01 thing looks as good and as clean as possible and one one trick of that is
09:06 having high quality images right so that's definitely true making sure that
09:11 you have really good images on your web page makes a huge difference now all of
09:17 the image formats that we've been talking about so far are bitmap based images meaning that every
09:24 image is basically a grid of pixels and those pixels are have a color value
09:30 assigned to every single pixel right you can't scale that image up and have
09:36 it still look great obviously you can scale the image down and still have it look good but you can't scale it up right so they're all and if you another
09:44 thing to know is if you like drag if you ever dragged a JPEG onto your text you'll know that it just looks like a
09:50 bunch of garbage Lee right that's a highly technical term by the way highly technical garbling it was it was
09:58 time and hearing 101 exactly you know so yeah those are all bitmap images okay
10:05 now this next format is becoming kind of the rage in the past year or so
10:11 it's called SVG and it's a scalable vector graphic and it is a 100% vector
10:17 graphic meaning that no matter how large or small you want that particular image
10:23 will remain crisp and it will be rendered very nicely for the size that
10:28 you give it right now I know a lot of
10:34 people at the very beginning when SVG was coming out people didn't really understand what a vector graphic is and a lot of times they just have a jpg in
10:41 there like oh I'll just export this to an SVG because Photoshop lets me do that well you can't really do that right
10:49 because as I said earlier if you ever opened up a true SVG file in a text editor
10:54 you'll see that it is in it is an XML file right it you can actually view it it has markup similar to what you would
11:00 see on a web page right it's XML it's xml-based language and it basically what
11:05 all those that code inside that file is are instructions to the browser on how
11:11 to draw an image right so it's you know go down this much and over this much and whatnot right I'm not really privy to
11:18 all the the inner workings of how an SVG file works I know a very little bit but
11:24 it is something you could potentially hand code if you wanted to I think kind of nuts there's a little ton of really
11:29 great SVG editors out there but getting back to it exporting a JPEG you cannot
11:35 take a JPEG and turn it into an SVG okay you can't just export it from let's say
11:41 Photoshop or something like that because when an app does that basically all it
11:46 does is it takes that info that if you were to drag a JPEG into your text editor it takes that and just paste it
11:54 into the embed it directly into the SVG file so if you were to open up that SVG
11:59 file that you exported from a JPEG all it is is some XML or wrapped around this garbling that is a JPEG file
12:07 so it is not it I repeat that is not a SVG file okay SVG files if you do open them up in a
12:14 text editor should be very editable that's another reason why like a lot of
12:19 people want drag-and-drop of SVG files into let's say like a stacks area or in
12:25 any sort of area inside rapidweaver and it
12:31 not inherently doesn't hair ly support that because all of those areas are are
12:36 made to support bitmap based images right so JPEGs or PNG s and things of that nature and that's not what an SVG
12:43 file is SVG file is just another text file right so you can't do any sort of conversions like you could on a bitmap
12:49 file on that SVG file very very two different things right so yeah you want
12:55 to add anything about SVG's Gregg sorry I've been Ram here and on his no it's fine it's a good good stuff SPG's
13:02 basically gonna find these mainly and illustrations that right Joe yes regular stock images I mean the illustrations
13:09 icons those kind of thing exactly yeah a lot of my actually a lot of my stack
13:15 icons that I've been releasing I'm on probably the past year I've been creating them as SVG files so that you
13:21 know I can scale them up on my website or wherever I need to right so that all my all my you know icon files are SVG's
13:28 or at least all my newer ones right so yeah they are definitely you know
13:34 they're not going to be you know a picture of the Yosemite as an SVG you know it's it's gonna be some sort of you
13:41 know looks like an illustration right so a lot of those like cartoony videos that
13:46 you see that are very popular nowadays you know those are kind of you know the illustration thing that you would see
13:52 for SVG file right where it's just kind of cartoony right I with that said I
13:58 have seen some pretty very interesting advanced SVG tactics recently where
14:03 people are definitely taking starting to take it to the next level but that's kind of really bleeding edge stuff I don't know much about that but so at the
14:11 SVG format has a bright future but right now yes it definitely is kind of vector-based graphics icons you know
14:19 things of that nature another great use of an SVG is if you have like a really funky title right and you don't want to
14:26 load that entire font you know or you or you don't want to have a JPEG of that
14:31 particular you know let's say header you could export that so basically you know
14:38 type it out in whatever font you want and then you can export that as an SVG graphics that is it's infinitely
14:44 scalable so that's good tactic as well another great use for SVG
14:51 you want to talk about where where you get your rescued easier icons or your stock photos yeah so where do we get our
14:57 stuff um I I do create some of my SVG's um and but a lot of the stuff that I get
15:04 huh what do you use her um so I have been using sketch but recently I've been
15:12 trying to move over to OmniGraffle purely because AI love the software that
15:18 Omni puts out and they also have an iPad version that is like feature comparable
15:25 like almost a hundred percent with a Mac version so I'm really interested to try to you know start playing around with
15:31 you know creating and doing more stuff on my iPad I think it would be kind of more fun cuz I've had a good thing I can
15:37 go on my sofa and maybe play around with a new icon or you know playing stuff on my iPad and so I'm I'm gonna try to you
15:44 know move more into the Omni graphical space for SVG graphics so I've got
15:50 actually done two icons in it and I figured if Omni can create all of their apps inside OmniGraffle all the graphics
15:57 for every single app it's good enough for me right that's pretty fair does me
16:05 I'll even make some really solid products yes I think Omni and panic are
16:11 probably some of the two powerhouses in the madcap space yeah definitely probably
16:18 private icon factories pretty pretty good too I don't think they're quite at the level of of you know they're more of a design
16:25 shop that kind of makes apps but right yeah yeah cuz I say they do a lot of
16:32 consultant work I believe it yeah I mean they have a you ever miss that iPad app
16:37 but drawing that yeah linear or I haven't played with it but yeah it looks
16:42 nice yeah yeah definitely so where do you get your where do I get my stuff opposed yeah you stalk like there are so
16:50 back in the day I used and loved a website called dollar photo club and sadly I don't know the thing was about a
16:57 year ago they went out of business only because Adobe bought them and I
17:03 have I tried for a long time to find another dollar photo club website
17:09 because I didn't want to pay the price for Adobe stock which is right now $30 a month and I'll tell you there just isn't
17:17 anything else out there right now that has the quality of photos that Adobe
17:22 stock gives you so I pay right now $30 a month now for Adobe stock and you get I
17:29 think 10 images a month for that and if you don't use them up they kind of a cure right so I think I have like 90
17:36 downloads available right now because some months I don't download any some I download a lot so yeah they do a cure so
17:43 you know you build up those points and those downloads you don't really lose them I think if you get up to like 150
17:48 you start losing them or something like that so whenever I get over a hundred I just go on there and kind of download some that I think will be cool for the
17:54 future and but Adobe stock I do have said that the photos and vector graphics
18:00 that you get from them are second to none now if you don't have any of the Adobe
18:07 products like especially illustrator a lot of their vector graphics sometimes
18:12 don't open perfectly in sketch I do have
18:17 affinity designer which does open up almost all of them I would say about 80
18:23 to 90% of the AI files that I download from Adobe stock open and and display
18:28 properly inside affinity designer and then most time what I'll do is I'll
18:33 export that as an SVG and then open that in either OmniGraffle our sketch I'm in work on it from then from there but hey
18:41 Adobe stock I think it's just yes it costs but
18:46 I think there are leaps and bounds better than anyone else out there for stock photography so yeah that sounds
18:52 good I do have two sites I mean when you start photography but I do use a stock
18:59 backgrounds mm-hmm and stock images for that purpose I mean I don't you know I
19:04 don't get like a nice photo of the Golden Gate Bridge right I would I wouldn't go looking for something like that but I do little for patterns and
19:12 backgrounds and those kind of things and I do have two stock sites that I use for that one is 365 PSD which has a bunch of
19:20 green I totally forgot about those guys - yeah you know they have a bunch of great patterns backgrounds um they have
19:27 menus you could use it for inst inspiration those kind of things and another one is subtle patterns which has
19:37 some really great you know kind of background things I'm
19:42 looking at right now that the whole reindeer thing going on here my job and in a pixelated reindeer which is great
19:48 for you know the muted backgrounds for your website or I used to actually use
19:53 them in different apps at different times yep I tweaked the colors and those kind of things so um two really great
20:00 resources and of course you they'll be in the show notes sure yep but I also as
20:05 I understand you can actually use Flickr for some stock photos but you have to be very very cognitive of the copyrights on
20:13 these images yes so be very careful yeah I actually have a a free placeholder
20:18 stack it's called placeholder and it's an image stack and it allows you to
20:24 basically one of the features it does is it it'll use I think place hold it um it
20:30 uses - it uses two different placeholder sites one's place hold it which will create like a generic like colored
20:36 background with maybe a word on it right so you type in whatever word and it'll create it for you it's kind of cool and
20:42 another one it uses is called I don't remember but essentially what that's
20:47 what this stock site does or this placeholder image site is it pulls images off Flickr based off category so
20:54 you could say like I want all images that are you know nature based and they they make sure that those images are
21:01 licensed that you can use them and again they're just placeholder images so they do change every time you refresh the
21:06 page it's not a static image but yeah that's kind of cool yeah so Flickr Flickr is a is a good
21:12 resource I didn't even think about that one but you do have to be careful with licensing yes yes please you don't want
21:19 I've you know as as you know and I'm sure there's no I run Chile got a
21:25 hosting right and oh it's been I've definitely got been on the receiving end of takedown notices DMCA
21:32 takedown notices so I have actually you know meet mediate and contact my clients
21:38 you know shut down their websites or help unkindly to you know please remove this ASAP before it becomes a bigger
21:45 issue so interesting you know I want to be in that situation and you know nobody wants to be in that situation so I'll be
21:50 very very careful I said especially seeing it with people in betting like sports team logos hmm so
21:58 you know don't don't do that interested so okay so I'm on the side I'm kind of
22:04 gonna go off on a tangent here but so on a fun side project I've been working on
22:10 a World Cup it's called World Cup brackets top info and it's just a
22:15 website that gives you historical data for past World Cups and one of the
22:22 things that I have for every single World Cup is like a picture of the ball
22:28 the the logo of the World Cup like the official logo and then the the picture
22:35 of the official mascot for that roll Cup and I have a few people saying you know
22:40 make sure if he if it doesn't come after you and you know I'm I'm I got might have to look into it a little bit more
22:46 but you know I I definitely made sure I had that you know copyright notice that these are you know registered trademarks
22:52 of FIFA and whatnot and those images are used in like a bajillion websites around
22:58 the web so I don't know I'm not not sure what to think about that what are you thoughts it
23:06 you know obviously just you know we get fired up your disclaimer yes yes effect but you know part of having a trademark
23:15 on having a copyright is that you kind of have to show that you're using it and
23:20 do you have to kind of sometimes enforce it so it's kind of at their discretion yeah so if they especially if you're
23:29 making money from something they're gonna go up to you yeah but you know part of protecting a trademark is that
23:35 you have to you know actually do a diligence in yep you know I thought so I don't plan on making any money on this
23:41 site so it's just kind of a site that I thought would be fun for the world to have so I can't see them giving me a
23:48 takedown notice but you know yeah we'll see really think they just I just they
23:54 just have lawyers on retainer and I think in their spare time they just Google searches yeah you could be right
23:59 so a if you ever do that don't put any sort of decent alt tag information on any of those images you know they will
24:13 leave with them as like spaghetti and meatballs or yeah we are not lawyers we are not lawyers you're all use this from
24:20 the study there we go there we go
24:25 that was the transition okay so back to images you mentioned subtle patterns right yes okay cool so I have one kind
24:32 of similar to that so I'm actually releasing a stack pretty soon it'll it
24:39 should be on my new website because it's fully done and I've used it a lot on my new website design and it's well my
24:46 stacks called wallpaper but it uses these things called hero patterns and what they are are patterns but they're
24:53 SVG's right so the pattern itself is like you know bytes big um in fact it
24:59 does they're so small I embed them directly into the CSS they're not even downloaded images so they're super fast
25:07 because they're SVG they're super crisp everywhere and also because they're SVG I have full control over like the colors
25:12 of them so it's kind of cool I can change the the foreground and background colors of all these things and the
25:19 opacity of it so you can make it more intense or less intense it's pretty cool stuff so here are
25:24 patterns is really cool they're as scalable SVG backgrounds you can go check that out I should have a
25:29 stack out within a month or so called wallpaper that handles all of those
25:34 they're really really cool and that same developer did a some icons called hero
25:40 icons those are actually paid for but they're highly detailed vector graphics
25:47 that you can you know use for your sites I think it's like I think about like 50 bucks but you got like 400 icons but
25:53 they're really good quality um there are like really really good quality I think it's hero icons com
26:00 so check that out I just loaded their site looks like they're on sale right now for 50% off so yeah if you're if
26:07 you're into that stuff you can really customize and you know color just individual components of the icons which
26:13 is kind of cool another interesting feature of SPG's right so here are I con czar pretty slick and with that we're
26:21 coming took really nice yeah they look really nice yeah with that we're kind of getting into oh there is actually
26:26 another kind of class of images that I wanted to talk about and if you ever
26:32 heard of an app called canva it's like a web app basically that allows you to create um it has a bunch of stock photos
26:38 in it but you can use your own and um it allows you to create like you know social sharing images really really
26:44 quick actually on appSumo recently there was a deal for a company called relay
26:50 that which is kind of a competitor to canva and I bought into that and very similar to canva where basically you can
26:57 create these they have pre-made templates for social sharing images so you can put in you know text and images
27:03 and whatnot and they have tons and tons of pre-made templates that you can already use and then what's interesting is you can export and they already know
27:11 all the sizes of for like you know what's the best size for Twitter what's the best size for Facebook what's the best size for you know your Open Graph
27:17 sharing tags and stuff like that so that you can quickly export all of those into you know those particular formats for
27:25 you know your social media and marketing and whatnot cool well I guess the only thing I have
27:34 to add as a couple more resources that I used all my icons one is I can't find
27:41 her you know Joe she was saying that he pays Adobe $30.00 a month I actually use a
27:49 website called icon finder calm and they do have a paid plan that allows you to
27:54 download a certain amount of images are like icons a month but I do have
27:59 pay-as-you-go and icons typically start at about a 1/2 dollars each so you know
28:06 I'll buy and I'll buy an icon here or there as I needed from entire icon set
28:11 like an icon set you know might be ten ten dollars twenty dollars you know if I
28:17 own I don't do it too often and you know I basically I've you know I don't have
28:23 that ongoing subscription and great resource at my fingertips and I love it they have some you know they're you can
28:31 filter by light since type you can filter by size and you know format and all those kind of things you can
28:37 actually get a vector you can get something that can be used in a commercial website all that stuff yeah
28:43 sweet yeah I didn't even know about that one so that was good find I didn't never even heard of that site before so really
28:49 cool stuff yeah and of course you know as we mentioned before in a previous episode I cringe at
28:56 her for all all your icons if you know if you can highly recommended yes I totally forgotten about that one so i i
29:02 thinkt greg profusely for for that one i've been using it ever since we talked
29:08 about it again because I loaded font awesome five into it and it's a great way of just previewing all the awesome
29:15 new icons and fun awesome five which I guess we can kind of segue into a little bit alright so fun awesome I know a lot of
29:23 us on our websites use font awesome for and you know it's been great for years
29:28 right you know a lot of stacks leverage font awesome already for us a lot of
29:33 themes use it so it's really great and version 5 was released this year so
29:39 there there is a free tier and a paid pro tier right so just so the free tier obviously has less
29:49 icons the pro tier gets you different styles of all the icons and then even more additional icons so like there's a
29:54 lite version of every single icon and and I think it's like I think it's 60 bucks for the pro version so if you want
30:02 to use the pro version you pay 60 bucks and then you can use that on your commercial site or your commercial products and all that jazz and I know a
30:11 lot of you are really wanting to use fun awesome 5ne a lot of your app you for projects and it's a really tough nut to
30:16 crack since a lot of us all have been using Fon awesome for for so long so I know that we're us developers are
30:23 working behind the scenes on on making that happen for you so hopefully I don't know when I don't have any sort of
30:29 timeline but I know we are actively working on a solution so that all of us can migrate from Fon awesome four over
30:35 to fawn awesome five so you can use all those great new icons yeah I can't wait I definitely love a
30:42 fun awesome part of it I purchased tonight the kick started way back and
30:48 was a Kickstarter I just haven't had a way to use it in a project yet and so yeah yeah I I purchased it I purchased a
30:56 theme license for in the Kickstarter and it wasn't cheap I think was like 600
31:02 bucks on which you can't even buy that any longer and that allows me to actually
31:08 ship pro with my theme so I'm gonna be doing that with my next iteration of the
31:16 font awesome stacks so that'll be a feature of my next fun awesome or my
31:21 next foundation sorry product my next foundation update will will support fun awesome Pro and any site that you build
31:29 with foundation will you'll be able to be allowed to use a font awesome pro 4
31:34 for free because I pay for the license for that oh nice yeah it's crazy they
31:40 drop support for that yeah I'm not sure quite why they did but I'm glad I got a license while it was available because
31:48 probably good a video probably yeah yeah I mean now like with the commercial um I
31:54 mean if you buy pro now you can use the icons in your product but you can't like
32:01 ship all of them with your products if that makes sense right but with the license that I have I can ship actually ship
32:06 font awesome with the product so that users can actually you know pick and choose whatever icon they want so again
32:13 it wasn't cheap but it was definitely something that I thought would be great for users for foundation so I'm excited
32:19 to get that going hopefully by the end of this year or early next year or something around there thanks thanks I can't wait cool
32:27 well I think that wraps up this episode guys we are remember our next episode we
32:32 got more image stuff coming a lot to talk about so without further ado Greg where can
32:38 people find you at actually dog host at bar chart on at bar and a chili dog host
32:44 on Twitter be back at we've radio calm and chili dog software yeah you know I
32:52 know there's a lot of places but I'm everywhere yep I am at Joe workman pretty much
32:58 everywhere you can check me out on Weaver's space W Weaver's space and if
33:03 you want to check out our archives of this podcast head over to Weaver radio.com go up to the archive menu and
33:10 you can you watch or listen to all of our past episodes if you haven't so you can catch up make sure you check out
33:17 episode four if you didn't listen to that one about all of our recommended Mac apps we talked a lot about images on
33:22 there if you are enjoying this show make sure you go onto iTunes and leave a review let people know that you're
33:29 enjoying this it helps us get more recognized and people to hear us so that we can help and reach more people so
33:35 without further ado thank you very much everyone we will see you next week i until next time until next time
33:44 "}]