title
Banner Design in Photoshop CS6
description
http://goo.gl/BBse40 - Design + Code a Professional Android App from Scratch
*
**Join DesignCourse Premium for 1-on-1 Design Training with Me:**
http://goo.gl/GlZRVs
Learn the process behind designing banners in Adobe Photoshop CS6. Also watch how my new banner creator for Photoshop works.
http://www.designcourse.com
http://www.wisebanner.com
Source file:
http://www.wisebanner.com/images/source-logo.png
(Right click and save as after you visit it in your browser)
Font:
http://sourceforge.net/projects/sourcesans.adobe/
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'Banner Design in Photoshop CS6', 'heatmap': [{'end': 179.915, 'start': 75.637, 'weight': 0.909}], 'summary': 'Tutorial series in photoshop cs6 covers designing website banners, call to action buttons, google adwords banner optimization, banner export methods, and efficient banner design techniques, with clear instructions and practical examples.', 'chapters': [{'end': 197.496, 'segs': [{'end': 59.65, 'src': 'embed', 'start': 0.591, 'weight': 0, 'content': [{'end': 0.979, 'text': 'How many?', 'start': 0.591, 'duration': 0.388}, {'end': 17.644, 'text': "Hello, this is Gary Simon with designcourse.com, and today we're going to take a look at how to design a couple of website banners,", 'start': 6.24, 'duration': 11.404}, {'end': 24.746, 'text': "and we're also going to take a look at a new product I've created and just launched called Wise Banner, and we'll look at that at the end.", 'start': 17.644, 'duration': 7.102}, {'end': 31.028, 'text': "So first here in Photoshop CS6, let's go ahead to File, New.", 'start': 25.426, 'duration': 5.602}, {'end': 42.499, 'text': "And, depending on your resolution and I'm using specifically for this Photoshop windows around 1280 by 720,", 'start': 32.732, 'duration': 9.767}, {'end': 51.245, 'text': 'choose a width and height that will fill up your artboard here near basically 100%, with no scroll bars.', 'start': 42.499, 'duration': 8.746}, {'end': 54.887, 'text': 'So it may be this, it may be something higher, depending on your resolution.', 'start': 51.765, 'duration': 3.122}, {'end': 57.949, 'text': 'And then everything else here should be pretty standard.', 'start': 55.888, 'duration': 2.061}, {'end': 59.65, 'text': "And we'll just call this..", 'start': 58.61, 'duration': 1.04}], 'summary': 'Gary simon demonstrates how to design website banners and introduces a new product called wise banner.', 'duration': 59.059, 'max_score': 0.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0591.jpg'}, {'end': 197.496, 'src': 'heatmap', 'start': 75.637, 'weight': 3, 'content': [{'end': 79.758, 'text': 'And one of the standard sizes here is 336 by 280.', 'start': 75.637, 'duration': 4.121}, {'end': 83.219, 'text': "So we're going to select here on the Rectangular tool.", 'start': 79.758, 'duration': 3.461}, {'end': 85.42, 'text': "And we'll just double click.", 'start': 83.66, 'duration': 1.76}, {'end': 91.431, 'text': 'And this will allow us to specify those exact dimensions, 336.', 'start': 86.381, 'duration': 5.05}, {'end': 95.176, 'text': 'by 280 and hit OK.', 'start': 91.431, 'duration': 3.745}, {'end': 99.441, 'text': 'And it will automatically fill in the foreground color here for the background.', 'start': 96.257, 'duration': 3.184}, {'end': 100.322, 'text': 'All right.', 'start': 100.042, 'duration': 0.28}, {'end': 106.51, 'text': 'So now what we want to do is take the foreground color.', 'start': 100.462, 'duration': 6.048}, {'end': 107.852, 'text': "We're going to change it to black.", 'start': 106.63, 'duration': 1.222}, {'end': 110.187, 'text': 'Hit OK.', 'start': 109.707, 'duration': 0.48}, {'end': 114.689, 'text': "And then we're also going to rename it to Base.", 'start': 110.367, 'duration': 4.322}, {'end': 122.871, 'text': 'Hit Ctrl G and it automatically creates a group and we will give this the name of the dimension.', 'start': 116.069, 'duration': 6.802}, {'end': 123.131, 'text': 'So 336 x 280.', 'start': 122.911, 'duration': 0.22}, {'end': 124.712, 'text': 'Alright, so now we have that.', 'start': 123.131, 'duration': 1.581}, {'end': 139.526, 'text': "We're going to, for this tutorial, just use this right here, this asset file, which is linked in the description of the YouTube video.", 'start': 130.139, 'duration': 9.387}, {'end': 145.93, 'text': 'And open that up, hit Control-A and then Control-C to copy.', 'start': 140.607, 'duration': 5.323}, {'end': 153.675, 'text': 'And with the base layer selected, hit Control-Shift-N for a new layer.', 'start': 147.111, 'duration': 6.564}, {'end': 156.037, 'text': "And we'll call this logo.", 'start': 154.676, 'duration': 1.361}, {'end': 163.111, 'text': 'and also make sure use previous layer to create clipping mask is checked.', 'start': 157.349, 'duration': 5.762}, {'end': 168.052, 'text': 'go ahead and hit OK and hit control V to paste.', 'start': 163.111, 'duration': 4.941}, {'end': 179.915, 'text': "so what that clipping mask does and you can see it's pointing down here if you're unfamiliar with clipping masks it keeps everything inside the viewable area of the base layer right here,", 'start': 168.052, 'duration': 11.863}, {'end': 182.136, 'text': "and that's important, obviously, for a banner project.", 'start': 179.915, 'duration': 2.221}, {'end': 186.319, 'text': "So let's go ahead and scale this down.", 'start': 184.336, 'duration': 1.983}, {'end': 194.912, 'text': "Hit Ctrl T, hold Shift, and we'll make it something around that size.", 'start': 186.339, 'duration': 8.573}, {'end': 197.496, 'text': 'Select the Move tool, hit Apply.', 'start': 196.234, 'duration': 1.262}], 'summary': 'Creating a 336x280 banner, adding a logo with a clipping mask for a tutorial.', 'duration': 111.115, 'max_score': 75.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS075637.jpg'}], 'start': 0.591, 'title': 'Designing and clipping banners', 'summary': 'Covers designing website banners in photoshop, with a focus on creating a 336x280 square banner and using a clipping mask to keep elements within the viewable area of the base layer, providing clear instructions for both processes.', 'chapters': [{'end': 145.93, 'start': 0.591, 'title': 'Designing website banners in photoshop', 'summary': 'Discusses how to design website banners in photoshop, focusing on creating a 336x280 square banner, with emphasis on specific dimensions and color selection.', 'duration': 145.339, 'highlights': ['Creating a 336x280 square banner with specific dimensions and color selection.', 'Demonstrating the process using Photoshop CS6 and providing guidance on artboard resolution for banner design.', 'Introducing Wise Banner, a new product by the presenter, and discussing it at the end of the tutorial.', 'Providing a linked asset file in the YouTube video description for practical use in the tutorial.']}, {'end': 197.496, 'start': 147.111, 'title': 'Clipping mask for banner project', 'summary': 'Explains the use of a clipping mask to keep everything inside the viewable area of the base layer for a banner project, providing instructions on creating a new layer and applying the mask, supporting familiarity with the process.', 'duration': 50.385, 'highlights': ['The chapter explains the use of a clipping mask to keep everything inside the viewable area of the base layer for a banner project.', 'Provides instructions on creating a new layer and applying the mask.', 'Supports familiarity with the process by providing step-by-step guidance.']}], 'duration': 196.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0591.jpg', 'highlights': ['Covers designing website banners in photoshop, focusing on creating a 336x280 square banner.', 'Demonstrates the process using Photoshop CS6 and provides guidance on artboard resolution.', 'Introduces Wise Banner, a new product, and discusses it at the end of the tutorial.', 'Provides a linked asset file in the YouTube video description for practical use in the tutorial.', 'Explains the use of a clipping mask to keep everything inside the viewable area of the base layer.', 'Provides instructions on creating a new layer and applying the mask.', 'Supports familiarity with the process by providing step-by-step guidance.']}, {'end': 740.486, 'segs': [{'end': 254.319, 'src': 'embed', 'start': 225.008, 'weight': 0, 'content': [{'end': 233.85, 'text': "which is inclusive of a good call to action, a good headline, and also paying attention to the use of colors and making sure it's relevant.", 'start': 225.008, 'duration': 8.842}, {'end': 238.311, 'text': "So, Wise Banner, what we'll do here?", 'start': 235.03, 'duration': 3.281}, {'end': 248.534, 'text': "we'll take the type tool and we'll just click once up here, and I'm going to type in rapidly produce.", 'start': 238.311, 'duration': 10.223}, {'end': 254.319, 'text': "Now I'm using a font called Source Sans Pro.", 'start': 251.758, 'duration': 2.561}], 'summary': 'Tips for creating effective banners: use call to action, good headline, relevant colors, and source sans pro font.', 'duration': 29.311, 'max_score': 225.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0225008.jpg'}, {'end': 385.189, 'src': 'embed', 'start': 329.994, 'weight': 2, 'content': [{'end': 336.597, 'text': "So this copy right here is extremely important, because this is what's going to grab the attention of potential visitors,", 'start': 329.994, 'duration': 6.603}, {'end': 338.438, 'text': "depending on where we're advertising.", 'start': 336.597, 'duration': 1.841}, {'end': 346.002, 'text': "So this is also something that we would want to split test, which I'll discuss a little bit further.", 'start': 340.239, 'duration': 5.763}, {'end': 349.344, 'text': "So let's go ahead and make this one bold.", 'start': 347.223, 'duration': 2.121}, {'end': 355.147, 'text': "Ctrl T, we'll scale that down a little bit more.", 'start': 353.206, 'duration': 1.941}, {'end': 360.292, 'text': 'All right, and now we want a good call to action.', 'start': 356.929, 'duration': 3.363}, {'end': 369.36, 'text': 'Now a call to action is generally speaking a button, something that entices people to actually click on or perform some sort of action.', 'start': 360.432, 'duration': 8.928}, {'end': 377.784, 'text': "Down here, we'll drag out and select Rounded Rectangular Tool.", 'start': 371.86, 'duration': 5.924}, {'end': 380.966, 'text': 'I have Radius set at 20 pixels up here.', 'start': 378.625, 'duration': 2.341}, {'end': 385.189, 'text': "And we'll make the foreground color kind of this lime green right here.", 'start': 382.147, 'duration': 3.042}], 'summary': 'Emphasize copy for potential visitors and test call-to-action button with lime green color.', 'duration': 55.195, 'max_score': 329.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0329994.jpg'}, {'end': 493.255, 'src': 'embed', 'start': 464.712, 'weight': 1, 'content': [{'end': 467.434, 'text': "All right, so that's our button.", 'start': 464.712, 'duration': 2.722}, {'end': 469.635, 'text': 'We can give this button a slight gradient.', 'start': 467.474, 'duration': 2.161}, {'end': 472.436, 'text': "So the way we apply a gradient, we'll go down here.", 'start': 469.715, 'duration': 2.721}, {'end': 475.318, 'text': "We'll rename this real quickly to button.", 'start': 472.456, 'duration': 2.862}, {'end': 481.307, 'text': 'So we right click over there and that gives us our layer styles.', 'start': 477.745, 'duration': 3.562}, {'end': 493.255, 'text': "So let's go to gradient overlay and we'll click in the gradient options up there and we'll click on the first preset,", 'start': 482.028, 'duration': 11.227}], 'summary': 'Applying a slight gradient to a button using layer styles.', 'duration': 28.543, 'max_score': 464.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0464712.jpg'}], 'start': 199.692, 'title': 'Banner design and call to action button', 'summary': 'Covers effective banner design basics, including call to action, headline, font choice, and split testing. it also covers designing a call to action button using adobe photoshop, applying gradient overlay, inner shadow, and texture.', 'chapters': [{'end': 355.147, 'start': 199.692, 'title': 'Effective banner design basics', 'summary': 'Discusses the key elements of effective banner design, including call to action, headline, font choice, and the importance of split testing, demonstrated through the creation of a wise banner project.', 'duration': 155.455, 'highlights': ['The importance of a good call to action, a good headline, and the use of colors in effective banner design, for creating a compelling and relevant banner (quantifiable data: none)', 'Demonstration of using a free font, Source Sans Pro, for the banner project and offering to link it in the video description for download (quantifiable data: font choice, availability for download)', 'The significance of the headline for grabbing the attention of potential visitors and the suggestion to split test different copies (quantifiable data: none)']}, {'end': 740.486, 'start': 356.929, 'title': 'Designing call to action button', 'summary': 'Covers designing a call to action button by creating a rounded rectangular shape, applying gradient overlay, inner shadow, and adding texture to the background in adobe photoshop.', 'duration': 383.557, 'highlights': ['Creating a rounded rectangular call to action button with a lime green foreground color and black text The speaker demonstrates creating a call to action button using a rounded rectangular tool with a lime green color and black text, which can entice users to perform an action.', 'Applying gradient overlay and inner shadow to the button for enhanced visual appeal The tutorial shows how to apply gradient overlay and inner shadow to the call to action button, enhancing its visual appeal and making it stand out more effectively.', 'Adding texture to the background using the brush tool and layer blend modes The tutorial explains the process of adding texture to the background using the brush tool with different blend modes, providing options for enhancing the overall design.']}], 'duration': 540.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0199692.jpg', 'highlights': ['Demonstration of using a free font, Source Sans Pro, for the banner project and offering to link it in the video description for download', 'Applying gradient overlay and inner shadow to the button for enhanced visual appeal', 'The significance of the headline for grabbing the attention of potential visitors and the suggestion to split test different copies', 'Creating a rounded rectangular call to action button with a lime green foreground color and black text', 'The importance of a good call to action, a good headline, and the use of colors in effective banner design, for creating a compelling and relevant banner']}, {'end': 975.622, 'segs': [{'end': 805.584, 'src': 'embed', 'start': 740.486, 'weight': 0, 'content': [{'end': 748.329, 'text': 'so Google AdWords allows you to advertise in up to eight different banner sizes, so this is only one.', 'start': 740.486, 'duration': 7.843}, {'end': 758.996, 'text': 'so if we really want to maximize our exposure, we want to have this same banner replicated into those seven other banner sizes.', 'start': 748.329, 'duration': 10.667}, {'end': 763.82, 'text': 'So what that requires is a lot of manual labor,', 'start': 759.517, 'duration': 4.303}, {'end': 773.308, 'text': 'basically duplicating our layers and adjusting the location in all of these to meet the new dimensions of each banner.', 'start': 763.82, 'duration': 9.488}, {'end': 778.47, 'text': "size So let's just do that for one banner, just so I can show you how that process is done.", 'start': 774.128, 'duration': 4.342}, {'end': 783.352, 'text': 'What we want to do is right click and duplicate that group.', 'start': 778.49, 'duration': 4.862}, {'end': 790.696, 'text': "We'll call this 728 by 90, which is another popular leaderboard type of banner size.", 'start': 783.933, 'duration': 6.763}, {'end': 801.039, 'text': "And we will move it down So let's go ahead and expand that group.", 'start': 791.716, 'duration': 9.323}, {'end': 805.584, 'text': "And basically, right up here, I'm just going to create a new layer.", 'start': 801.06, 'duration': 4.524}], 'summary': 'Google adwords allows advertising in 8 banner sizes. duplication process shown for 728x90 size.', 'duration': 65.098, 'max_score': 740.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0740486.jpg'}, {'end': 946.089, 'src': 'embed', 'start': 875.942, 'weight': 3, 'content': [{'end': 878.084, 'text': 'We may or may not use this, so it depends.', 'start': 875.942, 'duration': 2.142}, {'end': 888.513, 'text': "So sometimes you get down to really smaller type of banner sizes and sometimes you can't use all of the elements that you used in the bigger size that you initially worked with.", 'start': 878.144, 'duration': 10.369}, {'end': 891.376, 'text': "So right now we're just going to hide that.", 'start': 889.094, 'duration': 2.282}, {'end': 896.3, 'text': "So let's get the type out here, rapidly produce and banner sets.", 'start': 892.197, 'duration': 4.103}, {'end': 901.685, 'text': 'All right, so that appears to work pretty well right here.', 'start': 896.32, 'duration': 5.365}, {'end': 906.632, 'text': "Now let's go ahead and take our button.", 'start': 903.752, 'duration': 2.88}, {'end': 910.033, 'text': "Let's see here.", 'start': 909.293, 'duration': 0.74}, {'end': 917.954, 'text': 'Okay So we can group this as well, call this button.', 'start': 914.054, 'duration': 3.9}, {'end': 929.236, 'text': "So do we have enough room for the logo? Well, let's go ahead and see here.", 'start': 924.435, 'duration': 4.801}, {'end': 931.377, 'text': "Right here it's pretty small.", 'start': 929.256, 'duration': 2.121}, {'end': 933.477, 'text': "Actually, I'm going to drag this above.", 'start': 932.217, 'duration': 1.26}, {'end': 944.528, 'text': "so does it really make sense to have a logo there if it's so small?", 'start': 941.107, 'duration': 3.421}, {'end': 946.089, 'text': 'and does it really serve a purpose?', 'start': 944.528, 'duration': 1.561}], 'summary': 'Discussion about adapting elements for banner sizes, including logo placement and functionality.', 'duration': 70.147, 'max_score': 875.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0875942.jpg'}], 'start': 740.486, 'title': 'Google adwords banner optimization', 'summary': 'Covers google adwords advertising in eight banner sizes, emphasizing the need for replication, and optimizing banner design for maximum click-through ratio, including considerations for logo and text, while creating a 728 by 90 banner.', 'chapters': [{'end': 805.584, 'start': 740.486, 'title': 'Google adwords banner sizes', 'summary': 'Explains how google adwords allows advertising in up to eight different banner sizes, emphasizing the need to replicate banners into multiple sizes for maximum exposure and the manual labor required for this process.', 'duration': 65.098, 'highlights': ['Replicating banners into multiple sizes is crucial for maximizing exposure on Google AdWords.', 'Google AdWords allows advertising in up to eight different banner sizes.', 'Manual labor is required to duplicate and adjust layers to meet the new dimensions of each banner.']}, {'end': 975.622, 'start': 806.224, 'title': 'Banner design optimization', 'summary': 'Discusses optimizing a banner design by resizing and rearranging elements to maximize click-through ratio, including considerations for logo and text, while creating a 728 by 90 banner.', 'duration': 169.398, 'highlights': ['The process involves resizing and rearranging elements to fit a 728 by 90 banner size, aiming to maximize click-through ratio.', 'Considerations are made regarding the placement and necessity of the logo and text elements based on the available space and potential impact on click-through ratio.', 'The decision to hide certain elements, like the logo, is based on the constraints of smaller banner sizes and the goal of optimizing for click-through ratio.']}], 'duration': 235.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0740486.jpg', 'highlights': ['Replicating banners into multiple sizes is crucial for maximizing exposure on Google AdWords.', 'The process involves resizing and rearranging elements to fit a 728 by 90 banner size, aiming to maximize click-through ratio.', 'Google AdWords allows advertising in up to eight different banner sizes.', 'Considerations are made regarding the placement and necessity of the logo and text elements based on the available space and potential impact on click-through ratio.', 'Manual labor is required to duplicate and adjust layers to meet the new dimensions of each banner.', 'The decision to hide certain elements, like the logo, is based on the constraints of smaller banner sizes and the goal of optimizing for click-through ratio.']}, {'end': 1182.255, 'segs': [{'end': 1051.701, 'src': 'embed', 'start': 1022.459, 'weight': 4, 'content': [{'end': 1028.464, 'text': 'So at this point, now we have both of our banners ready to go and ready to be exported.', 'start': 1022.459, 'duration': 6.005}, {'end': 1031.008, 'text': "So the way you export these, it's pretty simple.", 'start': 1028.986, 'duration': 2.022}, {'end': 1035.031, 'text': "I'm going to take both of them and just duplicate those.", 'start': 1031.887, 'duration': 3.144}, {'end': 1041.919, 'text': 'And hit OK.', 'start': 1041.198, 'duration': 0.721}, {'end': 1044.06, 'text': "And I'll hide these.", 'start': 1043.14, 'duration': 0.92}, {'end': 1051.701, 'text': "And then I'll just select this one, hit Control E, and then select this one, hit Control E.", 'start': 1045.598, 'duration': 6.103}], 'summary': 'Two banners ready for export, duplicated and hidden, then exported using shortcuts.', 'duration': 29.242, 'max_score': 1022.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01022459.jpg'}, {'end': 1182.255, 'src': 'embed', 'start': 1094.047, 'weight': 0, 'content': [{'end': 1102.87, 'text': 'for instance, I believe AdWords is 50 KB, so we would be fine with this banner in these settings right here.', 'start': 1094.047, 'duration': 8.823}, {'end': 1117.095, 'text': 'Sometimes you can get a little bit more graphical and you may go above the 50 KB and at that point you would just adjust the quality and play around with these settings until you can get under to 50 KB and then hit save.', 'start': 1103.871, 'duration': 13.224}, {'end': 1125.88, 'text': "So that's pretty straightforward, very simple, And then you would do the same thing down here for the rest of your banner sizes.", 'start': 1117.835, 'duration': 8.045}, {'end': 1131.643, 'text': "So that's basically the task of creating banner sets.", 'start': 1125.88, 'duration': 5.763}, {'end': 1135.805, 'text': 'Recently, though I well actually at the beginning of 2013,', 'start': 1131.643, 'duration': 4.162}, {'end': 1145.811, 'text': 'I came up with an idea to really streamline this process and automate it as much as possible, so we can get rid of all the tedious aspects of this.', 'start': 1135.805, 'duration': 10.006}, {'end': 1149.513, 'text': 'So just to show you real quick, it is called Wise Banner.', 'start': 1145.891, 'duration': 3.622}, {'end': 1152.895, 'text': 'And let me bring up a browser here.', 'start': 1149.973, 'duration': 2.922}, {'end': 1160.439, 'text': 'All right, wisebanner.com.', 'start': 1152.915, 'duration': 7.524}, {'end': 1165.832, 'text': 'Alright, so let me just get this scaled up properly so we can see it.', 'start': 1162.071, 'duration': 3.761}, {'end': 1174.774, 'text': "So Wise Banner, this is a product I created and it's basically a set of Photoshop actions, scripts, and PSD files.", 'start': 1166.832, 'duration': 7.942}, {'end': 1182.255, 'text': 'So the way this works, let me log in real quick and go here.', 'start': 1175.394, 'duration': 6.861}], 'summary': 'Creating banner sets using wise banner, an automation tool with photoshop actions and scripts.', 'duration': 88.208, 'max_score': 1094.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01094047.jpg'}], 'start': 975.622, 'title': 'Designing and exporting banners', 'summary': 'Covers the process of designing and exporting two banners, emphasizing bold and larger designs, and discusses exporting methods using ctrl+e. it also explains the export process for banner ad images, including dimensions, formats, and the 50 kb limit. additionally, it introduces wise banner, a product to streamline banner set creation through automation using photoshop actions, scripts, and psd files developed in 2013.', 'chapters': [{'end': 1051.701, 'start': 975.622, 'title': 'Designing beautiful banners', 'summary': 'Demonstrates the process of designing and exporting two banners, with emphasis on making them bold and larger, and discusses the method of exporting the banners using ctrl+e, resulting in readiness for export.', 'duration': 76.079, 'highlights': ['The process of designing and exporting two banners, with emphasis on making them bold and larger', 'Discussion about the method of exporting the banners using Ctrl+E', 'The banners are ready to be exported']}, {'end': 1117.095, 'start': 1051.701, 'title': 'Banner ad image export process', 'summary': "Explains the process of exporting banner ad images, including dimensions, file formats, and file size restrictions, such as adwords' 50 kb limit.", 'duration': 65.394, 'highlights': ["The process of exporting banner ad images involves selecting the dimensions, copying, creating a new file, pasting, and saving for web, with considerations for file formats and file size restrictions, such as AdWords' 50 KB limit.", "Ad networks may allow PNGs or JPG files for banner ad images, and adjustments in quality may be necessary to meet file size restrictions, such as AdWords' 50 KB limit."]}, {'end': 1182.255, 'start': 1117.835, 'title': 'Streamlining banner creation with wise banner', 'summary': 'Introduces wise banner, a product created to streamline the process of creating banner sets by automating tasks using photoshop actions, scripts, and psd files, initially developed in 2013 to eliminate tedious aspects.', 'duration': 64.42, 'highlights': ['Wise Banner is a set of Photoshop actions, scripts, and PSD files aimed at automating the process of creating banner sets, offering a streamlined and efficient approach to eliminate tedious aspects.', 'The product was initially conceived in 2013 to automate and streamline the process of creating banner sets, aiming to reduce the manual effort and make the process more efficient.']}], 'duration': 206.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS0975622.jpg', 'highlights': ["The process of exporting banner ad images involves selecting the dimensions, copying, creating a new file, pasting, and saving for web, with considerations for file formats and file size restrictions, such as AdWords' 50 KB limit.", 'Wise Banner is a set of Photoshop actions, scripts, and PSD files aimed at automating the process of creating banner sets, offering a streamlined and efficient approach to eliminate tedious aspects.', 'The process of designing and exporting two banners, with emphasis on making them bold and larger', "Ad networks may allow PNGs or JPG files for banner ad images, and adjustments in quality may be necessary to meet file size restrictions, such as AdWords' 50 KB limit.", 'Discussion about the method of exporting the banners using Ctrl+E', 'The banners are ready to be exported', 'The product was initially conceived in 2013 to automate and streamline the process of creating banner sets, aiming to reduce the manual effort and make the process more efficient.']}, {'end': 1528.557, 'segs': [{'end': 1212.81, 'src': 'embed', 'start': 1183.236, 'weight': 2, 'content': [{'end': 1184.796, 'text': 'So we have the banner catalog.', 'start': 1183.236, 'duration': 1.56}, {'end': 1194.48, 'text': "So it's probably kind of a little bit confusing at first, but basically, If you know how many text layers you want in your banner and object layers,", 'start': 1185.356, 'duration': 9.124}, {'end': 1200.083, 'text': 'which those could be buttons or they could be photographs or anything, you can specify right here.', 'start': 1194.48, 'duration': 5.603}, {'end': 1204.685, 'text': 'So if we select two text layers that we want, for example, it automatically updates.', 'start': 1200.163, 'duration': 4.522}, {'end': 1212.81, 'text': 'And if we want to choose the object layers, say we want two object layers, then we have this template right here.', 'start': 1205.126, 'duration': 7.684}], 'summary': 'Banner catalog allows specifying text and object layers for customization.', 'duration': 29.574, 'max_score': 1183.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01183236.jpg'}, {'end': 1375.484, 'src': 'embed', 'start': 1327.469, 'weight': 0, 'content': [{'end': 1335.874, 'text': 'And then we could also very easily adjust the gradient or do anything with the background, but just for the purpose of showing you how this works.', 'start': 1327.469, 'duration': 8.405}, {'end': 1338.235, 'text': "Say, for example, we're happy with this just for now.", 'start': 1335.934, 'duration': 2.301}, {'end': 1345.099, 'text': 'And we go to Window, Actions, hit Background Replication.', 'start': 1338.255, 'duration': 6.844}, {'end': 1349.782, 'text': 'It gets the same background on all of these.', 'start': 1347.3, 'duration': 2.482}, {'end': 1351.643, 'text': 'And then we hit Process Banners.', 'start': 1350.202, 'duration': 1.441}, {'end': 1360.016, 'text': 'Now, what this does is it manually takes all of these banners, these layers right here,', 'start': 1354.013, 'duration': 6.003}, {'end': 1367.76, 'text': 'and it automatically replicates them to all of the other banner sets or banner sizes down here.', 'start': 1360.016, 'duration': 7.744}, {'end': 1369.981, 'text': 'And it takes roughly about 20 seconds.', 'start': 1368.4, 'duration': 1.581}, {'end': 1372.882, 'text': "You can see it's working automatically right here.", 'start': 1370.001, 'duration': 2.881}, {'end': 1375.484, 'text': 'So now we have these all replicated.', 'start': 1373.643, 'duration': 1.841}], 'summary': 'The tool replicates banners across sizes, taking about 20 seconds per set.', 'duration': 48.015, 'max_score': 1327.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01327469.jpg'}, {'end': 1475.758, 'src': 'embed', 'start': 1420.976, 'weight': 1, 'content': [{'end': 1429.086, 'text': "I'm not gonna go ahead and bore you by making these adjustments to every single banner, but you basically get the point.", 'start': 1420.976, 'duration': 8.11}, {'end': 1432.467, 'text': 'Usually, on average, to create a banner set.', 'start': 1429.807, 'duration': 2.66}, {'end': 1441.21, 'text': 'it only takes me about 10 to 15 minutes to create 15 different banners,', 'start': 1432.467, 'duration': 8.743}, {'end': 1450.213, 'text': "and that's why I personally use Wyze Banner whenever I'm designing banners for a client, because it's really powerful actually.", 'start': 1441.21, 'duration': 9.003}, {'end': 1458.273, 'text': 'and basically you would do that through all of these and then, when you want to save them, you bring out the Actions window again,', 'start': 1452.191, 'duration': 6.082}, {'end': 1465.355, 'text': "and what's really cool is this can save animated GIFs and it will automatically animate the title layer.", 'start': 1458.273, 'duration': 7.082}, {'end': 1475.758, 'text': "just so you have a version of 15 animated banners and then also you can save and export to JPG files, and I'll show you how quick that is.", 'start': 1465.355, 'duration': 10.403}], 'summary': 'Creating a banner set takes 10-15 minutes with wyze banner, capable of saving animated gifs and exporting to jpg files.', 'duration': 54.782, 'max_score': 1420.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01420976.jpg'}], 'start': 1183.236, 'title': 'Efficient banner design techniques', 'summary': 'Covers efficient techniques for designing popular banner sizes using a catalog, automated banner replication with a 20-second process, and creating a set of 15 banners in 10 to 15 minutes using wyze banner, showcasing significant time-saving benefits.', 'chapters': [{'end': 1318.341, 'start': 1183.236, 'title': 'Banner catalog for designing popular banner sizes', 'summary': 'Explains how to use a banner catalog to specify the number of text and object layers for popular banner sizes, with the ability to download action and psd files for immediate use in photoshop.', 'duration': 135.105, 'highlights': ['The banner catalog allows users to specify the number of text and object layers for popular banner sizes, with the ability to automatically update the template based on the selections made.', 'Users can download action and PSD files for immediate use in Photoshop after specifying the desired text and object layers.', 'The catalog offers up to 15 different popular banner sizes ready to be designed for, providing flexibility and options for designers.', 'Demonstrates the process of specifying text and object layers for designing banners, showcasing the ease of customizing the layers for different elements like logos and call-to-action buttons.']}, {'end': 1420.976, 'start': 1327.469, 'title': 'Automated banner replication', 'summary': "Demonstrates how to use the 'background replication' action to automatically replicate banners and adjust their size, taking roughly 20 seconds for the process.", 'duration': 93.507, 'highlights': ["The 'Background Replication' action replicates the same background on all banners, saving time and effort.", 'The process of replicating banners to different sizes takes roughly about 20 seconds, providing a quick and efficient way to create multiple versions.', 'The demonstration showcases the manual replication of banners to different sizes, highlighting the ease and speed of the process.']}, {'end': 1528.557, 'start': 1420.976, 'title': 'Efficient banner design with wyze banner', 'summary': 'Discusses how to efficiently create a set of 15 banners using wyze banner, taking only 10 to 15 minutes, and also demonstrates the quick process of saving and exporting the banners to jpg files, showcasing the potential time-saving benefits.', 'duration': 107.581, 'highlights': ['Creating a set of 15 banners with Wyze Banner takes only 10 to 15 minutes, showcasing its efficiency in banner design.', 'Demonstrates the quick process of saving and exporting the banners to JPG files, highlighting the time-saving benefits of using Wyze Banner.', 'Wyze Banner can save animated GIFs and automatically animate the title layer, showcasing its powerful features for banner design.', 'Encourages viewers to check out the project at wisebanner.com, emphasizing the potential time-saving benefits for designing banner sets.']}], 'duration': 345.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zuqk5zzclS0/pics/zuqk5zzclS01183236.jpg', 'highlights': ['The process of replicating banners to different sizes takes roughly about 20 seconds, providing a quick and efficient way to create multiple versions.', 'Creating a set of 15 banners with Wyze Banner takes only 10 to 15 minutes, showcasing its efficiency in banner design.', 'The banner catalog allows users to specify the number of text and object layers for popular banner sizes, with the ability to automatically update the template based on the selections made.', "The 'Background Replication' action replicates the same background on all banners, saving time and effort.", 'Wyze Banner can save animated GIFs and automatically animate the title layer, showcasing its powerful features for banner design.']}], 'highlights': ['Wyze Banner can save animated GIFs and automatically animate the title layer, showcasing its powerful features for banner design.', 'Creating a set of 15 banners with Wyze Banner takes only 10 to 15 minutes, showcasing its efficiency in banner design.', 'The process of replicating banners to different sizes takes roughly about 20 seconds, providing a quick and efficient way to create multiple versions.', 'Wise Banner is a set of Photoshop actions, scripts, and PSD files aimed at automating the process of creating banner sets, offering a streamlined and efficient approach to eliminate tedious aspects.', "The process of exporting banner ad images involves selecting the dimensions, copying, creating a new file, pasting, and saving for web, with considerations for file formats and file size restrictions, such as AdWords' 50 KB limit.", 'The process of designing and exporting two banners, with emphasis on making them bold and larger', 'The product was initially conceived in 2013 to automate and streamline the process of creating banner sets, aiming to reduce the manual effort and make the process more efficient.', "Ad networks may allow PNGs or JPG files for banner ad images, and adjustments in quality may be necessary to meet file size restrictions, such as AdWords' 50 KB limit.", 'The banners are ready to be exported', 'Discussion about the method of exporting the banners using Ctrl+E', 'Google AdWords allows advertising in up to eight different banner sizes.', 'Considerations are made regarding the placement and necessity of the logo and text elements based on the available space and potential impact on click-through ratio.', 'Manual labor is required to duplicate and adjust layers to meet the new dimensions of each banner.', 'The decision to hide certain elements, like the logo, is based on the constraints of smaller banner sizes and the goal of optimizing for click-through ratio.', 'Replicating banners into multiple sizes is crucial for maximizing exposure on Google AdWords.', 'The process involves resizing and rearranging elements to fit a 728 by 90 banner size, aiming to maximize click-through ratio.', 'Demonstration of using a free font, Source Sans Pro, for the banner project and offering to link it in the video description for download', 'Applying gradient overlay and inner shadow to the button for enhanced visual appeal', 'The significance of the headline for grabbing the attention of potential visitors and the suggestion to split test different copies', 'Creating a rounded rectangular call to action button with a lime green foreground color and black text', 'The importance of a good call to action, a good headline, and the use of colors in effective banner design, for creating a compelling and relevant banner', 'Covers designing website banners in photoshop, focusing on creating a 336x280 square banner.', 'Demonstrates the process using Photoshop CS6 and provides guidance on artboard resolution.', 'Introduces Wise Banner, a new product, and discusses it at the end of the tutorial.', 'Provides a linked asset file in the YouTube video description for practical use in the tutorial.', 'Explains the use of a clipping mask to keep everything inside the viewable area of the base layer.', 'Provides instructions on creating a new layer and applying the mask.', 'Supports familiarity with the process by providing step-by-step guidance.']}