Transcript

00:00 hey everybody so in this video we
00:02 already be talking about all the sexy
00:04 SVG patterns that we can use inside the
00:07 new wallpaper stack you might be
00:17 wondering Joe what's so special about
00:19 tiled backgrounds I can do that in the
00:22 normal default one column stack right
00:24 well wallpaper is a little bit special
00:28 in that hey it has a ton of prepackaged
00:33 patterns for you to already use now you
00:36 might think great for your package
00:38 patterns well what if I don't like the
00:39 patterns what if they don't match my
00:40 website well what's what's really
00:42 special about these patterns is two
00:44 things first off all these patterns are
00:48 SVG files why is that important well SVG
00:53 stands for scalable vector graphic and
00:55 what that means is it could be scaled up
00:57 and down and lose zero resolution right
01:00 it is crystal clear sharp no matter what
01:03 resolution you it's displayed at and
01:05 that's important because in in today's
01:08 world we have desktops that are non
01:11 Retina displays we have desktops that
01:12 are retina displays we have mobile
01:14 devices that are 2 3 4 X Retina displays
01:17 right and to get a crisp crystal sharp
01:22 image sometimes can be really difficult
01:24 or it can require a large image right
01:27 and SVG's again they're scalable so
01:32 they're the size is really small that's
01:34 another benefit right SVG sizes they're
01:38 really small and in wallpaper they're
01:40 all embedded into the CSS and only the
01:43 SVG that you actually using gets loaded
01:46 right so super super small 0 extra HTTP
01:51 requests because it's embedded in the
01:54 CSS right so huge benefits here so great
01:59 we have really crisp sharp small images
02:04 what else what else is cool about these
02:06 well because they're SVG's and SPG's are
02:09 essentially kind of small little bits of
02:12 code right think of it as little
02:14 component that we can actually style
02:16 with CSS right and you know animate with
02:19 with JavaScript if you wanted to but not
02:21 in this case um so what makes these
02:26 tiles and patterns unique in wallpaper
02:29 is that we can style them so you have
02:32 full control over the color of only the
02:34 background color right but you can
02:37 control the actual pattern that gets
02:39 laid on top of it so you can really take
02:43 these wallpapers in these patterns and
02:45 customize them to the look and feel of
02:47 your website that makes this extra
02:51 special so without further ado let's
02:53 jump on in and look at some of the
02:55 amazing things that we can do with the
02:57 new patterns inside wallpaper so in this
03:01 video we're only going to be reviewing
03:02 patterns right we're only be looking at
03:05 the background settings we have other
03:07 videos on gradients and all of the cool
03:10 layout settings down here so I might
03:12 change a couple of these settings I'm
03:13 not gonna really dive into those but
03:16 just so you know there are other videos
03:17 on the layouts and gradients within
03:20 wallpaper and right now we're gonna dive
03:22 into some patterns now to really play
03:24 around I'm just gonna set that variable
03:25 height to be 50% just so that I don't
03:28 need to worry about putting content in
03:30 the wallpaper it will just be you know
03:32 50% height and we can play around so
03:36 first off we're gonna just turn on
03:38 patterns inside wallpaper and it's the
03:41 default pattern a hideout and what
03:43 you'll notice is there are a ton of
03:45 patterns that we have right there are I
03:47 think 85 patterns here that's a lot
03:51 right but you might think Joe how the
03:54 heck do I know what what all these
03:56 patterns are like how do I know which
03:58 one I want right now when you installed
04:02 wallpaper hopefully you noticed that
04:04 there are multiple different stacks that
04:07 come with it now there's the main
04:09 wallpaper stack and then there's two
04:10 other stacks and what we're gonna look
04:13 at right now is the patterns stack so if
04:15 we go ahead and drag patterns out here
04:17 this is basically like a little gallery
04:19 of all the available patterns okay
04:22 really cool so we can go ahead and
04:24 peruse through this and find the exact
04:27 pattern that we might want okay now
04:30 what's important is these patterns are
04:32 only displayed in edit mode so if I
04:35 preview this page right now
04:38 you'll see that I only see my wallpaper
04:41 I don't see the patterns at all okay so
04:44 and the pet this pattern SEC adds zero
04:46 code to your published page at all so
04:49 you could leave it on there if you want
04:50 most time I just find you know I peruse
04:52 and find the one I want and then I
04:54 delete the stack from the page okay now
04:57 what's also cool about this pattern
04:58 gradient thing is we can actually
05:00 customize the colors here so we can kind
05:03 of preview what the patterns are might
05:05 look like you know on the finished
05:07 product that's interesting right now
05:09 what's cool is we also have control of
05:11 the opacity of the the pattern so if you
05:15 see now it's at full opacity right but
05:17 if you take it to 50% or you know a
05:20 little bit less you kind of get a nice
05:21 blend between the background and the
05:23 tile you can even go more if you want a
05:25 very subtle effect right so you have a
05:28 lot of control over this to make it
05:30 really kind of in-your-face pattern
05:32 versus kind of a more subtle you know
05:34 pattern here you can also do scale let's
05:37 increase the opacity a little bit you
05:39 can scale up a little bit as well right
05:41 so you know you can you scale these
05:43 patterns up to make them a little bit
05:44 larger okay so that's nice right
05:48 there's scroll samples you can also turn
05:50 off scroll samples if you just want it
05:51 to be one big huge thing inside edit
05:54 mode okay so you see this is nice
05:58 if you notice it does give us the name
06:00 here right so you can kind of peruse
06:03 through style it the way you like and
06:05 find the pattern that you potentially
06:06 might want to use right okay
06:10 so that deals with the patterns and how
06:11 to find the patterns that you
06:13 potentially would want so we're gonna go
06:15 into the wallpaper stack now and I'm
06:17 going to use circuit board it's kind of
06:21 one of my favorite stacks or my favorite
06:24 patterns I like a circuit board I think
06:27 it looks cool trying to do is I'm going
06:29 to previous pages so kind of we can see
06:31 a wallpaper in its full glory here and
06:35 so yeah now we go to circuit board you
06:38 know I can change the opacity down here
06:41 in colors this is where you can change
06:42 the background and the pattern color
06:44 okay so if we wanted to I can go ahead
06:46 and choose like that oh look I like that
06:49 right there
06:49 well like I think that looks snazzy
06:51 right so
06:53 we got a blue kind of a purplish you
06:55 know tile pattern we can make it you
06:58 know as you know transparent or as you
07:01 know opaque as we want right we could
07:04 scale this up just as we did with the
07:07 patterns okay so really some really cool
07:10 stuff here now next up there's a
07:12 vignette setting actually I'm gonna go
07:14 ahead and change the background color a
07:17 little I'm gonna get now the reason the
07:20 reason I did all I wanted a lighter
07:22 background was for this vignette effect
07:24 just to make it more dramatic right so
07:27 if we increase the the vignette you'll
07:29 notice that we get this very kind of you
07:32 know this dark inner shadow effect and
07:36 it's really cool yeah it kind of gives
07:38 you you know at certain points it can
07:40 kind of give you kind of a glowing
07:41 effect in the middle right it's very
07:43 interesting
07:45 so the Vienna vignette you can also
07:47 control the color of that so if we
07:49 didn't want black right let's say we
07:50 wanted you know um a lighter blue
07:54 vignette as you see that's a more subtle
07:56 but it gives us a very interesting
07:57 effect where the outsides are slightly
08:00 darker and it kind of fades into the
08:01 middle right so you can get some really
08:04 great amazing effects with this vignette
08:06 if you play around with it right so you
08:09 see that um you know it's the dark as we
08:12 saw the original color which is kind of
08:13 a black it was very harsh right but now
08:17 we have this very subtle kind of a
08:19 almost a gradient effect right across
08:22 the wallpaper so you can get some really
08:24 amazing you know and I love how the
08:26 center if we add content there it kind
08:28 of draws your eye to the middle right so
08:31 if we add you know an icon and some and
08:33 some text right here in the middle let's
08:35 go ahead and do that really quick so
08:37 there we go I tweak this a little bit
08:39 while uh you know I was playing around
08:40 and as you see I haven't that's a nice
08:42 content in the middle if you notice I'm
08:44 using that vignette and it kind of draws
08:46 your eye into the middle not only
08:48 because that's where the content is but
08:50 that gradient the from that vignette
08:52 where the darker edges Det definitely
08:55 draws your eyes directly into the middle
08:57 there right so it's a very cool effect
08:59 don't overdo it as you see subtlety can
09:02 be a great thing so
09:05 yeah but vignettes are amazing thing so
09:07 you're probably thinking well Joe all
09:09 those gradients that ship with it are
09:11 great but like what if I want something
09:14 different what if I want to use my own
09:16 right how can i integrate that right
09:18 well you're in luck because wallpaper
09:21 does support custom SVG's and so let's
09:24 dive in right now and have a look at
09:26 that so if we look at the settings
09:28 you'll notice that there is a custom CSS
09:30 option for patterns now when you open
09:33 that you'll notice that there is a
09:34 custom CSS box here and you might think
09:37 Joe I don't know how to use this stuff
09:40 like that's just confusing to me like
09:43 it's basically Greek you know might as
09:45 well be Greek so if you hover over the
09:49 in look at the tooltip here I give you a
09:51 couple websites that you can actually
09:53 you know visit so it can kind of help
09:55 you out so and one of these is called
09:57 SVG backgrounds com so let's go ahead
10:00 and look at that so here we are in SVG
10:03 backgrounds comm and this in isn't the
10:05 only one there are tons of websites like
10:07 this right
10:08 I just find SVG backgrounds nice they
10:10 have some really nice ones um let's look
10:12 at this particular one right here this
10:13 this this kind of this gradient slash
10:17 squares right it's kind of nice right um
10:20 and what's cool is you you actually can
10:22 customize everything about this
10:25 particular pattern right here on the
10:26 website so like if I go here and let's
10:29 say I change that to be blue wow that's
10:31 kind of trippy right
10:35 right Wow an interesting it's pretty
10:38 cool I like that
10:38 I actually I did not test this
10:40 beforehand that's very interesting um
10:42 you can change the the opacity of it
10:45 very interesting as well I don't know if
10:48 these all these other modes are kind of
10:50 changes the colors a little bit
10:52 interesting okay and so there we go so
10:56 now you can go ahead and copy this so
10:59 you see here's the CSS output you just
11:01 select that and copy it now let's go
11:05 back to rapidweaver so now that I'm back
11:07 in rack weaver i can paste that custom
11:09 CSS directly into the stack settings and
11:12 voila I have my custom pattern from SVG
11:16 patterns directly inside wallpaper now
11:19 if you use a custom pattern these color
11:22 settings down here are basically mute
11:23 you can't use the color settings to
11:25 customize the colors any longer okay so
11:29 that is a drawback you you can't use the
11:31 settings but SVG backgrounds is you saw
11:34 you can you have full control over the
11:35 colors over there anyway so if you do
11:39 use the custom patterns you have to
11:41 you're kind of like on your own with
11:42 generating all the colors and all that
11:44 jazz so I think it's a fair trade-off
11:47 now while I'm in this video I'm not
11:50 going to go over gradients but I do want
11:52 to point out that you can mix and match
11:54 patterns and gradients right so in this
11:58 case I can overlay a pattern on top of a
12:01 gradient so here I'm gonna pick a
12:02 pattern I'm gonna call it warm I'm just
12:04 gonna use the default warm flame and
12:06 let's just go ahead and you know we can
12:10 easily do that right so let's go ahead
12:12 and
12:21 you
12:25 so it's really cool you can intermix the
12:27 gradients and the patterns together to
12:29 really come up with a very unique feel
12:31 um and also in this effect you can also
12:34 add a vignette as well if you want right
12:36 so you can add that vignette effect that
12:38 color is a little harsh but you know I
12:40 taught you earlier how you can you know
12:42 make that look better now the last thing
12:44 we haven't reviewed is static versus
12:46 fixed okay so static is what you
12:49 probably think of right here let me add
12:51 some more content to this page so that
12:53 we can kind of scroll so we can see the
12:55 difference between what's static and
12:57 what fixed gives us so here we have I've
13:00 added a bit more content just that when
13:02 we preview this we can scroll down the
13:04 page a little bit and I have this
13:06 wallpaper sacs set to the position
13:08 static and if we scroll down you'll
13:10 notice that I have this pick this
13:11 wallpaper stack set to fixed okay now
13:14 kind of so if we preview this page we'll
13:18 see that as I scroll down this the
13:21 background here is static right it
13:22 doesn't move okay but if we look at the
13:25 one further down the page what we'll
13:27 notice is the background pattern is
13:29 fixed so we have a nice effect some
13:32 people think this gives you a quasi
13:34 parallax effect it could in some
13:36 situations but it is a fixed background
13:41 right so that you know as you scroll the
13:44 background is actually fixed to the like
13:46 fixed to the web you know the web
13:48 browser so it doesn't move so that's the
13:52 difference between background is static
13:55 and fixed
13:57 so OPC the power that these SVG patterns
14:00 give us inside wallpaper right they're
14:02 very flexible they're very fast and you
14:05 know that they look great right they
14:07 have a lot of flexibility we can scale
14:09 it up and down we can scale it because
14:10 they're SVG graphics and they never lose
14:13 their resolution right so they're very
14:15 very cool things and again I just
14:18 touched base a little bit on the
14:20 gradients and the layouts make sure that
14:23 you check out those other videos for
14:25 wallpaper I hope you enjoyed this video
14:26 and I hope that you love wallpaper I
14:29 can't wait to see what you build with it
14:30 talk to you later bye
14:39 you
14:40 "}]