1 00:00:00,920 --> 00:00:06,479 welcome back everybody Alan Becker here 2 00:00:04,589 --> 00:00:11,359 and you are watching flash tutorials 3 00:00:06,480 --> 00:00:17,009 with Alan Becker so I got a request for 4 00:00:11,359 --> 00:00:19,740 how to make backgrounds so yeah here's a 5 00:00:17,010 --> 00:00:23,090 portion of my if water had eyes 6 00:00:19,739 --> 00:00:27,659 animation where there's a lot of 7 00:00:23,089 --> 00:00:33,450 background going on this is a going off 8 00:00:27,660 --> 00:00:37,230 of a waterfall and falling down like 9 00:00:33,450 --> 00:00:40,530 that so yeah I'm just going to go over 10 00:00:37,229 --> 00:00:43,199 how to make it like detailed looking 11 00:00:40,530 --> 00:00:47,390 backgrounds like this and how to make 12 00:00:43,200 --> 00:00:50,359 other backgrounds as well so um 13 00:00:47,390 --> 00:00:53,189 everything here is on a different layer 14 00:00:50,359 --> 00:00:55,350 this mountain in that mountain in that 15 00:00:53,189 --> 00:00:58,108 mountain and these trees and those 16 00:00:55,350 --> 00:01:05,010 clouds are all on different layers so as 17 00:00:58,109 --> 00:01:10,710 to make a 3d effect so let's just get to 18 00:01:05,010 --> 00:01:13,530 it so um I don't know how when people 19 00:01:10,709 --> 00:01:17,399 want to make mountains as backgrounds 20 00:01:13,530 --> 00:01:19,650 but this technique is useful for any 21 00:01:17,400 --> 00:01:22,920 type of background so what you do is you 22 00:01:19,650 --> 00:01:27,270 take your pencil tool and you draw a 23 00:01:22,920 --> 00:01:30,118 mountain so I'm using a tablet so it 24 00:01:27,269 --> 00:01:32,908 makes it a little bit easier but just 25 00:01:30,118 --> 00:01:36,450 make it jaggedy and then when you reach 26 00:01:32,909 --> 00:01:38,640 the edge just go around and then make 27 00:01:36,450 --> 00:01:41,040 sure you can do that so that you can 28 00:01:38,640 --> 00:01:44,460 fill it in so let's take the paint 29 00:01:41,040 --> 00:01:48,259 bucket and get a generally green color 30 00:01:44,459 --> 00:01:53,459 and let's make it a little bit duller 31 00:01:48,259 --> 00:01:57,688 because real life isn't always going to 32 00:01:53,459 --> 00:02:01,228 be neon green bright so um then we take 33 00:01:57,688 --> 00:02:04,500 our pencil tool and then we divide this 34 00:02:01,228 --> 00:02:06,959 up further so let's say I want to add 35 00:02:04,500 --> 00:02:10,080 some shadow to it so I take the pencil 36 00:02:06,959 --> 00:02:12,919 tool and I draw where I want the shadow 37 00:02:10,080 --> 00:02:17,480 of this mountain to be just 38 00:02:12,919 --> 00:02:20,568 get jaggedy and I'm just kind of drawing 39 00:02:17,479 --> 00:02:23,840 out where the highlight actually of the 40 00:02:20,568 --> 00:02:25,879 mountain is so once I do that I take my 41 00:02:23,840 --> 00:02:30,520 selection tool and select this part and 42 00:02:25,879 --> 00:02:34,818 just drag this a little color thing down 43 00:02:30,520 --> 00:02:38,360 and it's easy as that I have a shadow so 44 00:02:34,818 --> 00:02:39,679 um now we just want to add maybe some 45 00:02:38,360 --> 00:02:45,110 polar icecaps 46 00:02:39,680 --> 00:02:48,050 so I go up here do that maybe I add a 47 00:02:45,110 --> 00:02:53,090 little bit some extra snow here and some 48 00:02:48,050 --> 00:02:54,560 snow here maybe some here alright so now 49 00:02:53,090 --> 00:02:58,099 we take our selection tool again and 50 00:02:54,560 --> 00:03:01,719 then we hold down shift and select all 51 00:02:58,099 --> 00:03:04,120 our areas that are this color green 52 00:03:01,719 --> 00:03:08,109 actually I might as well select this 53 00:03:04,120 --> 00:03:11,900 part too so we want to change them to a 54 00:03:08,110 --> 00:03:14,870 bluish white we don't want to make it 55 00:03:11,900 --> 00:03:16,489 completely white so that we don't so we 56 00:03:14,870 --> 00:03:21,530 can distinguish it from the background 57 00:03:16,489 --> 00:03:27,739 then we take our shadowy ones and then 58 00:03:21,530 --> 00:03:32,289 just drop it down here make sure it's a 59 00:03:27,739 --> 00:03:37,209 good level of grey not too chromatic and 60 00:03:32,289 --> 00:03:39,319 not too gray so here we go this is good 61 00:03:37,209 --> 00:03:42,979 yeah it's looking good so far especially 62 00:03:39,319 --> 00:03:44,959 with the the shadow so now we have take 63 00:03:42,979 --> 00:03:47,268 our pencil tool you can press the Y key 64 00:03:44,959 --> 00:03:49,789 on your keyboard and we just add some 65 00:03:47,269 --> 00:03:53,870 further detail so just make some jagged 66 00:03:49,789 --> 00:03:59,599 shapes and make sure they follow the 67 00:03:53,870 --> 00:04:01,039 line of the mountain so if I was doing 68 00:03:59,599 --> 00:04:02,539 like this it wouldn't look realistic 69 00:04:01,039 --> 00:04:04,909 because it's not following the shape of 70 00:04:02,539 --> 00:04:07,519 the mountain so I want to follow that 71 00:04:04,909 --> 00:04:12,340 line that goes up the side of the 72 00:04:07,519 --> 00:04:17,889 mountain just make some jagged shapes 73 00:04:12,340 --> 00:04:17,889 maybe some darker darks here 74 00:04:19,988 --> 00:04:29,509 yeah some other darks okay now we just 75 00:04:26,930 --> 00:04:32,240 go in and alter the colors slightly so 76 00:04:29,509 --> 00:04:34,250 that we get some differentiation so I go 77 00:04:32,240 --> 00:04:36,139 here and I just move it maybe like up 78 00:04:34,250 --> 00:04:40,399 make it a little lighter make this a 79 00:04:36,139 --> 00:04:44,478 little bit darker or something yeah or 80 00:04:40,399 --> 00:04:46,879 maybe lighter I don't know you got just 81 00:04:44,478 --> 00:04:51,288 very slightly and then make this one 82 00:04:46,879 --> 00:04:58,490 like darker this one can be darker this 83 00:04:51,288 --> 00:05:01,519 one can be darker and darker and even 84 00:04:58,490 --> 00:05:04,220 darker alright so now that we have all 85 00:05:01,519 --> 00:05:05,810 this detail all we do is get rid of the 86 00:05:04,220 --> 00:05:08,810 lines and the easiest way to do that is 87 00:05:05,810 --> 00:05:12,259 to select everything go to our line 88 00:05:08,810 --> 00:05:16,668 color stroke color and then select no 89 00:05:12,259 --> 00:05:19,490 fill and bam we have our mountain now we 90 00:05:16,668 --> 00:05:25,699 can just turn it into a symbol and move 91 00:05:19,490 --> 00:05:27,560 it around as we want mount 10 woo okay 92 00:05:25,699 --> 00:05:28,788 so now that's how you make a mountain 93 00:05:27,560 --> 00:05:30,680 and if you want to make any other kind 94 00:05:28,788 --> 00:05:32,810 of landscapes like that or anything that 95 00:05:30,680 --> 00:05:35,900 has kind of shading like that that's how 96 00:05:32,810 --> 00:05:37,399 you do it you draw pencils draw with the 97 00:05:35,899 --> 00:05:40,098 pencil fill it in and then get rid of 98 00:05:37,399 --> 00:05:43,759 the lines it's probably the easiest way 99 00:05:40,098 --> 00:05:47,870 that I can think of so all next how to 100 00:05:43,759 --> 00:05:51,139 make a sky so let's make a new layer and 101 00:05:47,870 --> 00:05:53,209 hide this one and the easiest way to 102 00:05:51,139 --> 00:05:57,740 make sky is to take the rectangle tool 103 00:05:53,209 --> 00:06:01,098 and then just draw a rectangle here now 104 00:05:57,740 --> 00:06:04,280 we take the color here go up here and 105 00:06:01,098 --> 00:06:06,769 then choose linear gradient looks like I 106 00:06:04,279 --> 00:06:09,439 already have my colors selected so I'm 107 00:06:06,769 --> 00:06:13,310 just going to reset them so that we can 108 00:06:09,439 --> 00:06:17,560 get a good idea what to do arm so we 109 00:06:13,310 --> 00:06:20,389 press the F key and then we take this 110 00:06:17,560 --> 00:06:22,160 rotation handle thing thing and then 111 00:06:20,389 --> 00:06:26,230 rotate it until it looks like that and 112 00:06:22,160 --> 00:06:32,290 then we drag it down so that it matches 113 00:06:26,230 --> 00:06:34,569 our square we can also drag this here so 114 00:06:32,290 --> 00:06:36,670 that it's more even okay so now we just 115 00:06:34,569 --> 00:06:40,480 choose our colors so for the top color 116 00:06:36,670 --> 00:06:43,060 we want the top to be darker because 117 00:06:40,480 --> 00:06:46,930 when you look at a sky the the stuff 118 00:06:43,060 --> 00:06:48,399 lower is is brighter because it's more 119 00:06:46,930 --> 00:06:51,220 aligned with the horizon and there's 120 00:06:48,399 --> 00:06:55,149 more oxygen or molecules of air to go 121 00:06:51,220 --> 00:06:58,510 through so it looks brighter so up 122 00:06:55,149 --> 00:07:04,029 higher it should be a dark darkish blue 123 00:06:58,509 --> 00:07:06,639 maybe and more cyan so here in we can 124 00:07:04,029 --> 00:07:11,469 just choose white if you want or you can 125 00:07:06,639 --> 00:07:14,409 take the where you can pick a color here 126 00:07:11,470 --> 00:07:17,080 and then just get rid of this one by 127 00:07:14,410 --> 00:07:20,439 dragging it off and then you have a 128 00:07:17,079 --> 00:07:24,609 generally writer white or brighter blue 129 00:07:20,439 --> 00:07:26,230 so that's a good that's a good sky so we 130 00:07:24,610 --> 00:07:27,520 can convert that to a symbol if we want 131 00:07:26,230 --> 00:07:31,240 sure why not 132 00:07:27,519 --> 00:07:34,289 sky okay and now we want to make our 133 00:07:31,240 --> 00:07:37,389 clouds so let's make a new layer and 134 00:07:34,290 --> 00:07:42,879 lock this layer and we take our pencil 135 00:07:37,389 --> 00:07:45,279 tool and we the general pattern for 136 00:07:42,879 --> 00:07:48,250 clouds that I use is bubbly at the top 137 00:07:45,279 --> 00:07:51,819 straight at the bottom something like 138 00:07:48,250 --> 00:07:56,649 this like that only a lot more 139 00:07:51,819 --> 00:07:59,589 complicated so I make a lot of small 140 00:07:56,649 --> 00:08:06,549 bubbles in a big bubble shape and then 141 00:07:59,589 --> 00:08:08,759 kind of just do that so do whatever you 142 00:08:06,550 --> 00:08:08,759 want 143 00:08:08,918 --> 00:08:19,269 and just have fun I guess make some 144 00:08:16,209 --> 00:08:22,649 happy little clouds then we take our 145 00:08:19,269 --> 00:08:26,438 pencil or paint bucket tool and fill in 146 00:08:22,649 --> 00:08:32,168 these clouds we want to have a radial 147 00:08:26,439 --> 00:08:37,750 gradient yeah make sure that lock fill 148 00:08:32,168 --> 00:08:40,208 is turned off otherwise it will paint a 149 00:08:37,750 --> 00:08:42,429 huge gradient that covers the entire 150 00:08:40,208 --> 00:08:43,028 screen and you won't be able to edit it 151 00:08:42,429 --> 00:08:47,578 very easily 152 00:08:43,028 --> 00:08:50,708 so do that do that you you want to UM 153 00:08:47,578 --> 00:08:53,349 click where the around the bottom middle 154 00:08:50,708 --> 00:08:58,000 so that the gradient Center is around 155 00:08:53,350 --> 00:09:01,570 the middle so we take this color and we 156 00:08:58,000 --> 00:09:06,009 press F and now I want to take this 157 00:09:01,570 --> 00:09:08,350 gradient move it in and out okay so we 158 00:09:06,009 --> 00:09:13,028 have the wrong colors so I probably 159 00:09:08,350 --> 00:09:14,320 should have just done done one cloud and 160 00:09:13,028 --> 00:09:16,919 then copied the color to the rest of 161 00:09:14,320 --> 00:09:20,620 them so I'll probably do that anyway 162 00:09:16,919 --> 00:09:23,919 what we want if we look at our clouds 163 00:09:20,620 --> 00:09:26,769 here is something generally white on the 164 00:09:23,919 --> 00:09:28,809 outside and purplish blue on the bottom 165 00:09:26,769 --> 00:09:32,500 side that's usually what clouds look 166 00:09:28,809 --> 00:09:35,229 like maybe not this bright but what we 167 00:09:32,500 --> 00:09:38,940 could do something so maybe for now we 168 00:09:35,230 --> 00:09:41,350 can just reverse these colors like that 169 00:09:38,940 --> 00:09:46,089 make sure there's a white on the outside 170 00:09:41,350 --> 00:09:47,980 and a dark blue on the inside let's 171 00:09:46,089 --> 00:09:51,850 raise this up so that it's a little bit 172 00:09:47,980 --> 00:09:55,720 more purple yeah like that and it can be 173 00:09:51,850 --> 00:09:58,778 a little lighter I think so that looks 174 00:09:55,720 --> 00:10:02,949 good now all we have to do is take our 175 00:09:58,778 --> 00:10:06,009 eye dropper by pressing I clicking that 176 00:10:02,948 --> 00:10:08,559 and then clicking here oh it didn't work 177 00:10:06,009 --> 00:10:11,679 so let's press let's take off flock fill 178 00:10:08,559 --> 00:10:17,989 again do that and then do it again 179 00:10:11,679 --> 00:10:21,679 so now just take this press F and then 180 00:10:17,990 --> 00:10:26,430 shrink it make it bigger drop it down 181 00:10:21,679 --> 00:10:30,859 shrink it make it bigger drop it up and 182 00:10:26,429 --> 00:10:34,409 then all we do is select all and then 183 00:10:30,860 --> 00:10:41,730 change the stroke to no stroke we have 184 00:10:34,409 --> 00:10:43,919 our clouds easy as that yeah okay so I'm 185 00:10:41,730 --> 00:10:46,709 assuming that people want to eventually 186 00:10:43,919 --> 00:10:48,240 have a cityscape some kind of thing with 187 00:10:46,708 --> 00:10:51,750 buildings in it so I'm going to go 188 00:10:48,240 --> 00:10:56,930 through that really quickly let's take 189 00:10:51,750 --> 00:11:04,200 away our clouds and add a new layer so 190 00:10:56,929 --> 00:11:07,219 um when when making backgrounds it's 191 00:11:04,200 --> 00:11:11,520 important to understand the the 192 00:11:07,220 --> 00:11:14,480 principle of atmospheric perspective if 193 00:11:11,519 --> 00:11:17,519 you look here then you'll notice that 194 00:11:14,480 --> 00:11:21,629 the things that are in front generally 195 00:11:17,519 --> 00:11:24,659 have a brighter color and things in back 196 00:11:21,629 --> 00:11:29,549 are generally cooler and at the same 197 00:11:24,659 --> 00:11:32,159 time it's also more hazy so the things 198 00:11:29,549 --> 00:11:35,039 in front are more there's more contrast 199 00:11:32,159 --> 00:11:40,409 things in back more hazy or less 200 00:11:35,039 --> 00:11:41,639 contrast so in with buildings the ones 201 00:11:40,409 --> 00:11:43,588 in front are generally going to be 202 00:11:41,639 --> 00:11:46,139 darker and all the ones in back are 203 00:11:43,589 --> 00:11:46,410 going to be lighter so we want to mimic 204 00:11:46,139 --> 00:11:49,278 that 205 00:11:46,409 --> 00:11:51,838 so we first create our first layer of 206 00:11:49,278 --> 00:11:56,990 buildings if I take the pencil tool and 207 00:11:51,839 --> 00:12:04,910 just make some building type shapes just 208 00:11:56,990 --> 00:12:04,909 geometric whatever's like that 209 00:12:10,480 --> 00:12:17,470 then go around like that 210 00:12:14,139 --> 00:12:23,340 and then we fill it in maybe a light 211 00:12:17,470 --> 00:12:26,500 gray yeah 212 00:12:23,340 --> 00:12:32,620 then we go on top of that with a new 213 00:12:26,500 --> 00:12:38,009 layer of darker buildings that are also 214 00:12:32,620 --> 00:12:43,690 bigger slightly bigger so make them 215 00:12:38,009 --> 00:12:48,159 maybe taller and bigger wider now we go 216 00:12:43,690 --> 00:12:51,340 around again fill it in with a darker 217 00:12:48,159 --> 00:12:54,939 gray so I'm going to press K for the 218 00:12:51,340 --> 00:12:59,019 fill in tool do that okay so now we just 219 00:12:54,940 --> 00:13:05,110 select all and then no stroke and we 220 00:12:59,019 --> 00:13:10,210 have our layers of of buildings so if we 221 00:13:05,110 --> 00:13:14,700 select this one make it city one select 222 00:13:10,210 --> 00:13:21,160 this one make it city two and we can 223 00:13:14,700 --> 00:13:28,420 make a simple pan from left to right 224 00:13:21,159 --> 00:13:30,549 where is our sky where we have one move 225 00:13:28,419 --> 00:13:36,419 that way and this one move just a little 226 00:13:30,549 --> 00:13:38,789 bit and then yeah 227 00:13:36,419 --> 00:13:46,559 it'll 228 00:13:38,789 --> 00:13:48,569 it'll look like a real city anyway yeah 229 00:13:46,559 --> 00:13:51,089 and if you want to make a building like 230 00:13:48,570 --> 00:13:54,120 one building that has a bunch of windows 231 00:13:51,090 --> 00:13:57,290 and stuff there's a simple technique to 232 00:13:54,120 --> 00:14:02,190 getting all those windows 233 00:13:57,289 --> 00:14:06,049 fast so maybe I will walk these and then 234 00:14:02,190 --> 00:14:12,030 okay so you take your rectangle tool and 235 00:14:06,049 --> 00:14:14,849 just make a building and maybe I'll turn 236 00:14:12,029 --> 00:14:25,169 on this stroke so I'll delete this and 237 00:14:14,850 --> 00:14:28,529 then redo that so I will also delete the 238 00:14:25,169 --> 00:14:31,079 fill so let's take a rectangle tool get 239 00:14:28,529 --> 00:14:37,289 rid of the fill and then just make a 240 00:14:31,080 --> 00:14:40,200 window so we have one window and we take 241 00:14:37,289 --> 00:14:44,339 our selection tool double click the 242 00:14:40,200 --> 00:14:47,480 square and then hold down alt while 243 00:14:44,340 --> 00:14:51,600 dragging it and that will make a copy 244 00:14:47,480 --> 00:14:53,879 okay so we want to make a ton of Windows 245 00:14:51,600 --> 00:14:56,610 we could draw each one individually or 246 00:14:53,879 --> 00:15:00,689 we could do this where we hold down alt 247 00:14:56,610 --> 00:15:05,789 and do that and then select hold down 248 00:15:00,690 --> 00:15:09,410 alt do that select hold down alt do that 249 00:15:05,789 --> 00:15:09,409 and then 250 00:15:10,090 --> 00:15:14,509 move this a little then hold down alt do 251 00:15:14,120 --> 00:15:17,810 that 252 00:15:14,509 --> 00:15:22,600 well that alt do that okay now all we do 253 00:15:17,809 --> 00:15:23,899 is same thing downwards we just multiply 254 00:15:22,600 --> 00:15:32,480 itself 255 00:15:23,899 --> 00:15:40,639 I guess it the tricky part comes in the 256 00:15:32,480 --> 00:15:42,769 alignment of it so yeah maybe when we go 257 00:15:40,639 --> 00:15:45,769 down here we don't want as many so let's 258 00:15:42,769 --> 00:15:49,669 just select this hold down alt and go 259 00:15:45,769 --> 00:15:53,480 down so we have a simple building it 260 00:15:49,669 --> 00:15:56,719 looks pretty decent so now I just take 261 00:15:53,480 --> 00:16:00,970 our fill tool and fill in around the 262 00:15:56,720 --> 00:16:04,879 windows so you can fill in the windows 263 00:16:00,970 --> 00:16:08,019 underneath pretty easily let's just 264 00:16:04,879 --> 00:16:10,820 convert this to a symbol first so that 265 00:16:08,019 --> 00:16:12,549 it doesn't interfere with what we put 266 00:16:10,820 --> 00:16:18,020 underneath it 267 00:16:12,549 --> 00:16:22,639 building spelled wrong okay if we select 268 00:16:18,019 --> 00:16:24,710 all and then deselect the building by 269 00:16:22,639 --> 00:16:30,199 holding down shift and clicking get rid 270 00:16:24,710 --> 00:16:33,350 of the lines so um we can take a simple 271 00:16:30,200 --> 00:16:36,200 rectangle tool and make it dark and then 272 00:16:33,350 --> 00:16:39,019 just make a square and we have our 273 00:16:36,200 --> 00:16:41,600 building or we have the windows color 274 00:16:39,019 --> 00:16:46,360 the windows what we could do if we 275 00:16:41,600 --> 00:16:52,129 wanted is to give it like a gradient and 276 00:16:46,360 --> 00:16:55,730 then kind of make the reflection of the 277 00:16:52,129 --> 00:17:03,850 outside if we press F rotate around move 278 00:16:55,730 --> 00:17:03,850 it up and then add like a dark blue 279 00:17:04,449 --> 00:17:18,970 dark blue here light blue here and then 280 00:17:11,000 --> 00:17:24,769 like gray or black and gray like that 281 00:17:18,970 --> 00:17:29,900 then we can kind of get more of a effect 282 00:17:24,769 --> 00:17:35,299 of a reflection and we can gray it down 283 00:17:29,900 --> 00:17:37,100 if you want make it more like yeah like 284 00:17:35,299 --> 00:17:39,019 the windows are dirty or something so 285 00:17:37,099 --> 00:17:46,549 yeah it's a simple way to make a 286 00:17:39,019 --> 00:17:55,210 building yep so that is how you make a 287 00:17:46,549 --> 00:18:04,009 building buildings behind it a cloud and 288 00:17:55,210 --> 00:18:09,319 a mountain so it's just taking the 289 00:18:04,009 --> 00:18:11,599 pencil tool and making shapes on an 290 00:18:09,319 --> 00:18:14,240 already filled object selecting those 291 00:18:11,599 --> 00:18:18,949 colors and then altering the colors to 292 00:18:14,240 --> 00:18:23,179 add variation yeah you can also use 293 00:18:18,950 --> 00:18:27,460 reference photos to help you with the 294 00:18:23,179 --> 00:18:29,870 line shapes and also the colors so um 295 00:18:27,460 --> 00:18:32,329 yeah that is all I have about 296 00:18:29,869 --> 00:18:35,079 backgrounds thank you for watching and 297 00:18:32,329 --> 00:18:35,079 I'll see you guys later