title
How To Create a Website Layout With Photoshop From Wireframe [Part 2]

description
Hope you enjoyed this tutorial! Oh and if you want to go in depth, check this guide out (more than 12k word ultimate guide). PSD to HTML Tutorial: The Only Guide You Need in 2015 - http://www.1stwebdesigner.com/psd-to-html/ --- Wireframe to Photoshop Basing on our wire frame, we will start transferring it into Photoshop to have a much clearer vision of what exactly the website layout will look like. What’s good about doing this is we can focus only in placing the elements like buttons, text headings, and paragraphs in the right position and the right size. View the original article with working demo and resource files here: http://www.1stwebdesigner.com/psd-to-html/ ----- If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - http://rockingcode.com/ You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website. We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

detail
{'title': 'How To Create a Website Layout With Photoshop From Wireframe [Part 2]', 'heatmap': [{'end': 629.953, 'start': 561.437, 'weight': 1}], 'summary': 'Learn to design website layouts using a 12 grid column system, select fonts and color schemes, create navigation, banners, and icons, design logos and footers, and improve website appearance with specific dimensions and styling in photoshop.', 'chapters': [{'end': 236.958, 'segs': [{'end': 236.958, 'src': 'embed', 'start': 19.665, 'weight': 0, 'content': [{'end': 28.149, 'text': 'hey guys, welcome to the part two of this tutorial and in this time we will be designing this layout.', 'start': 19.665, 'duration': 8.484}, {'end': 37.293, 'text': 'so from this warframe to this nicely layout in Photoshop.', 'start': 28.149, 'duration': 9.144}, {'end': 45.817, 'text': 'so first thing you will need to do is a download a grid.', 'start': 37.293, 'duration': 8.524}, {'end': 47.137, 'text': 'so go to 960.com.', 'start': 45.817, 'duration': 1.32}, {'end': 67.404, 'text': 'gs and click this big ol download button.', 'start': 50.214, 'duration': 17.19}, {'end': 73.208, 'text': "so, while waiting to download this, let's take a look at the layout.", 'start': 67.404, 'duration': 5.804}, {'end': 80.134, 'text': "So, as you can see, I'm using 12 grid column.", 'start': 75.848, 'duration': 4.286}, {'end': 87.223, 'text': 'So 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12.', 'start': 80.534, 'duration': 6.689}, {'end': 94.032, 'text': 'So that every layout is balanced or every column is balanced like in this section.', 'start': 87.223, 'duration': 6.809}, {'end': 101.9, 'text': "since it's four column, so 12 divided by four is three.", 'start': 96.355, 'duration': 5.545}, {'end': 105.503, 'text': "so I'm using the in every column.", 'start': 101.9, 'duration': 3.603}, {'end': 121.035, 'text': "I'm using three grids for plan, design, develop and launch and in this section design also for grids, or I mean three grids, four columns,", 'start': 105.503, 'duration': 15.532}, {'end': 127.727, 'text': "and on the footer section I'm using 3 columns.", 'start': 121.035, 'duration': 6.692}, {'end': 136.688, 'text': 'so 12 divided by 3 is 4, 4, 8, 12..', 'start': 127.727, 'duration': 8.961}, {'end': 153.834, 'text': "Let's see, so go ahead and open the NathanGrid system, extract files and go to templates, photoshop and this 960grid12col.", 'start': 136.689, 'duration': 17.145}, {'end': 175.4, 'text': "so once you've opened it, let's change the size by pressing ctrl alt c or command alt or i don't know in mac.", 'start': 157.481, 'duration': 17.919}, {'end': 177.743, 'text': 'so in windows, ctrl alt c.', 'start': 175.4, 'duration': 2.343}, {'end': 189.582, 'text': "so let's make this 1400 and for the height for this time let's make it 2500.", 'start': 179.699, 'duration': 9.883}, {'end': 192.223, 'text': 'make sure the anchor is on top.', 'start': 189.582, 'duration': 2.641}, {'end': 203.567, 'text': 'so when you click it we have these nice workspace to work on and to turn on the guides.', 'start': 192.223, 'duration': 11.344}, {'end': 218.905, 'text': 'just press on ctrl colon or you can view it to view show guides.', 'start': 203.567, 'duration': 15.338}, {'end': 221.927, 'text': 'so show guides.', 'start': 218.905, 'duration': 3.022}, {'end': 232.434, 'text': 'or to make it quick, just press control column to turn it on and off.', 'start': 221.927, 'duration': 10.507}, {'end': 236.958, 'text': 'so the next thing is to plan.', 'start': 232.434, 'duration': 4.524}], 'summary': 'Design a layout using 12 grid columns in photoshop, maintaining balance and using 3 grids for various sections.', 'duration': 217.293, 'max_score': 19.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag19665.jpg'}], 'start': 19.665, 'title': 'Designing layout with 960 grid system', 'summary': 'Covers the process of designing a layout using a 12 grid column system in photoshop, emphasizing the balanced distribution of columns and the use of 960grid12col template, with a focus on planning and guide utilization.', 'chapters': [{'end': 236.958, 'start': 19.665, 'title': 'Designing layout with 960 grid system', 'summary': 'Covers the process of designing a layout using a 12 grid column system in photoshop, emphasizing the balanced distribution of columns and the use of 960grid12col template, with a focus on planning and guide utilization.', 'duration': 217.293, 'highlights': ['Emphasizing balanced distribution of columns and use of 960grid12col template The speaker highlights the importance of balanced layout by demonstrating the use of a 12 grid column system in Photoshop and the utilization of the 960grid12col template.', 'Utilizing 12 grid column system for balanced layout The speaker explains the use of a 12 grid column system to achieve balanced distribution of columns in the layout, ensuring each section is proportionate.', 'Demonstrating guide utilization and workspace setup in Photoshop The speaker provides instructions on setting up workspace in Photoshop, including changing size, turning on guides, and utilizing the workspace effectively for design work.', 'Instructions for resizing workspace and turning on guides in Photoshop The speaker provides specific instructions for resizing the workspace to 1400 in width and 2500 in height, as well as turning on guides for effective design work in Photoshop.', 'Instructions for downloading and accessing 960grid12col template The speaker guides the audience on downloading the 960grid12col template from 960.gs website and accessing it in Photoshop for layout design.', 'Highlighting the process of planning in layout design The speaker emphasizes the importance of planning in the layout design process, setting the foundation for the subsequent design, development, and launch phases.']}], 'duration': 217.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag19665.jpg', 'highlights': ['Emphasizing balanced distribution of columns and use of 960grid12col template', 'Utilizing 12 grid column system for balanced layout', 'Demonstrating guide utilization and workspace setup in Photoshop', 'Instructions for resizing workspace and turning on guides in Photoshop', 'Instructions for downloading and accessing 960grid12col template', 'Highlighting the process of planning in layout design']}, {'end': 703.784, 'segs': [{'end': 295.585, 'src': 'embed', 'start': 236.958, 'weight': 1, 'content': [{'end': 238.779, 'text': 'what are the fonts to be used?', 'start': 236.958, 'duration': 1.821}, {'end': 247.803, 'text': "so i'm planning to have a handwritten logo for just a quick one.", 'start': 240.979, 'duration': 6.824}, {'end': 258.428, 'text': "so let's go to google fonts and download lobster 2.", 'start': 247.803, 'duration': 10.625}, {'end': 265.212, 'text': 'so this is a nice, like handwritten type of font or cursive.', 'start': 258.428, 'duration': 6.784}, {'end': 268.318, 'text': 'so just Add to collection.', 'start': 265.212, 'duration': 3.106}, {'end': 271.699, 'text': 'No need to register and click on Use.', 'start': 269.218, 'duration': 2.481}, {'end': 276.2, 'text': 'And check this.', 'start': 274.64, 'duration': 1.56}, {'end': 279.381, 'text': 'And download.', 'start': 277.841, 'duration': 1.54}, {'end': 282.322, 'text': 'Zip file.', 'start': 281.562, 'duration': 0.76}, {'end': 288.103, 'text': 'So I have it right here.', 'start': 285.062, 'duration': 3.041}, {'end': 290.044, 'text': 'So extract files.', 'start': 288.863, 'duration': 1.181}, {'end': 295.585, 'text': "Let's just cancel it.", 'start': 294.345, 'duration': 1.24}], 'summary': 'Plan to use handwritten font for logo, download lobster 2 from google fonts.', 'duration': 58.627, 'max_score': 236.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag236958.jpg'}, {'end': 466.186, 'src': 'embed', 'start': 360.15, 'weight': 0, 'content': [{'end': 367.276, 'text': 'and it says right here that Museo font family has five weights 100 to 900..', 'start': 360.15, 'duration': 7.126}, {'end': 371.038, 'text': 'Three weights are absolutely free, which is good.', 'start': 367.276, 'duration': 3.762}, {'end': 376.841, 'text': "And let's try to look at this at my fonts.", 'start': 372.739, 'duration': 4.102}, {'end': 382.724, 'text': 'So Museo here.', 'start': 378.102, 'duration': 4.622}, {'end': 394.544, 'text': 'so from 300 to 700 is free.', 'start': 388.761, 'duration': 5.783}, {'end': 403.788, 'text': 'so go ahead and download this one and install it to the fonts folder.', 'start': 394.544, 'duration': 9.244}, {'end': 413.272, 'text': "so, once you've got it, the next thing to decide is what is the color scheme of the website.", 'start': 403.788, 'duration': 9.484}, {'end': 422.809, 'text': 'great place to select color scheme is color lovers.', 'start': 414.682, 'duration': 8.127}, {'end': 435.9, 'text': 'this website showcasing great color scheme, like, for example, the trends for websites, as you can see when you scroll down here,', 'start': 422.809, 'duration': 13.091}, {'end': 443.466, 'text': 'are some popular website like box for square Groupon.', 'start': 435.9, 'duration': 7.566}, {'end': 466.186, 'text': "So in my scheme I can't remember where I select it, but the main thing here, the combination, is a red one and a lighter shade of gray, some 9A9C9F.", 'start': 445.692, 'duration': 20.494}], 'summary': 'Museo font family has 5 weights; 3 are free. color scheme: red and lighter gray from color lovers.', 'duration': 106.036, 'max_score': 360.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag360150.jpg'}, {'end': 629.953, 'src': 'heatmap', 'start': 561.437, 'weight': 1, 'content': [{'end': 579.743, 'text': 'And for the header section, what I usually do is create a rectangle shape and place it on the center like that.', 'start': 561.437, 'duration': 18.306}, {'end': 598.473, 'text': 'and then first i change the color so that i can see it, and then the next thing is to add the elements on this section.', 'start': 583.121, 'duration': 15.352}, {'end': 609.201, 'text': "so, for example here or let's, based on our warframe oh damn, i've closed it.", 'start': 598.473, 'duration': 10.728}, {'end': 629.953, 'text': 'macflow, Come on faster.', 'start': 609.201, 'duration': 20.752}], 'summary': 'Creating a header section with a rectangle shape and adding elements for a warframe', 'duration': 68.516, 'max_score': 561.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag561437.jpg'}, {'end': 703.784, 'src': 'embed', 'start': 650.836, 'weight': 3, 'content': [{'end': 656.74, 'text': 'Search for lobster2 and the logo or the website name is dip.', 'start': 650.836, 'duration': 5.904}, {'end': 659.142, 'text': 'So dip.', 'start': 657.941, 'duration': 1.201}, {'end': 669.529, 'text': "Dip And let's lower the size to 48, I think, or 60.", 'start': 660.343, 'duration': 9.186}, {'end': 672.451, 'text': "And let's make this italic.", 'start': 669.529, 'duration': 2.922}, {'end': 679.516, 'text': 'So something like that.', 'start': 674.512, 'duration': 5.004}, {'end': 683.027, 'text': 'and make sure it is centered.', 'start': 681.306, 'duration': 1.721}, {'end': 693.295, 'text': "So I'm going to center this out by selecting both layers and hit this align horizontally.", 'start': 683.208, 'duration': 10.087}, {'end': 699.46, 'text': 'So now the logo is in place.', 'start': 696.098, 'duration': 3.362}, {'end': 703.784, 'text': 'So this is just a quick logo to demonstrate.', 'start': 700.481, 'duration': 3.303}], 'summary': "Creating a logo for 'lobster2' with the website name 'dip' using 48-60 size, italic, and centered design.", 'duration': 52.948, 'max_score': 650.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag650836.jpg'}], 'start': 236.958, 'title': 'Website fonts and color scheme selection', 'summary': "Covers the process of selecting 'lobster 2' and 'museo' font family, including three free weights. it also discusses choosing color schemes from color lovers and designing a website with specific color combinations such as red, gray, and white.", 'chapters': [{'end': 413.272, 'start': 236.958, 'title': 'Choosing fonts and color scheme for website', 'summary': "Details the process of selecting fonts for a website, including downloading 'lobster 2' and 'museo' font family with three free weights, and also mentions the consideration of color scheme for the website.", 'duration': 176.314, 'highlights': ["Selecting 'Museo' font family with three free weights for heading text The chapter mentions the process of selecting the 'Museo' font family for heading text, highlighting that it has three free weights (300 to 700).", "Downloading 'Lobster 2' handwritten type of font The chapter describes the process of downloading 'Lobster 2', a handwritten type of font, from Google Fonts.", 'Considering the color scheme for the website The chapter briefly mentions the consideration of the color scheme for the website, without providing specific details or quantifiable data.']}, {'end': 703.784, 'start': 414.682, 'title': 'Color scheme selection and website design', 'summary': 'Discusses selecting color schemes from color lovers and designing a website with specific color combinations, such as red, gray, and white, and using museo font for headings.', 'duration': 289.102, 'highlights': ['The main color combination discussed is a red one and a lighter shade of gray, such as 9A9C9F, with a white background and noticeable contrast with lighter gray and white.', "The website design includes using Museo font for headings and creating a quick logo using Lobster2 font with the website name 'dip', sized at 48 or 60 and italicized.", 'The transcript also mentions popular websites like Box, Square, and Groupon showcasing great color schemes, and briefly discusses creating a new layer for the header section and adding elements.', 'The chapter introduces Color Lovers as a great place to select color schemes and mentions the use of gray for buttons, red for call-to-action buttons and links, and headings for widgets like testimonials, blog, and Twitter feed.', "The speaker briefly discusses the process of creating a rectangle shape for the header section and refers to a quick logo demonstration using the name 'dip', Lobster2 font, and alignment techniques."]}], 'duration': 466.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag236958.jpg', 'highlights': ["Selecting 'Museo' font family with three free weights for heading text", "Downloading 'Lobster 2' handwritten type of font", 'The main color combination discussed is a red one and a lighter shade of gray, such as 9A9C9F, with a white background and noticeable contrast with lighter gray and white', "The website design includes using Museo font for headings and creating a quick logo using Lobster2 font with the website name 'dip', sized at 48 or 60 and italicized", 'The chapter introduces Color Lovers as a great place to select color schemes and mentions the use of gray for buttons, red for call-to-action buttons and links, and headings for widgets like testimonials, blog, and Twitter feed']}, {'end': 1374.227, 'segs': [{'end': 822.546, 'src': 'embed', 'start': 703.804, 'weight': 0, 'content': [{'end': 709.308, 'text': 'And the next one is the navigation.', 'start': 703.804, 'duration': 5.504}, {'end': 715.539, 'text': 'Just always remember to group your layers, like for this one, navigation.', 'start': 710.856, 'duration': 4.683}, {'end': 719.501, 'text': "Then I'm going to add a navigation.", 'start': 716.66, 'duration': 2.841}, {'end': 724.585, 'text': "I'll be using the font Helvetica for this.", 'start': 721.443, 'duration': 3.142}, {'end': 730.628, 'text': "Let's make it 14 or 16.", 'start': 725.805, 'duration': 4.823}, {'end': 732.81, 'text': 'So first one is home.', 'start': 730.628, 'duration': 2.182}, {'end': 739.294, 'text': "Make sure it's the same on.", 'start': 734.751, 'duration': 4.543}, {'end': 741.941, 'text': 'Our Warframe.', 'start': 741.121, 'duration': 0.82}, {'end': 747.023, 'text': 'So as far as I remember, home.', 'start': 743.462, 'duration': 3.561}, {'end': 754.206, 'text': 'Next one is about us.', 'start': 750.485, 'duration': 3.721}, {'end': 760.348, 'text': 'The third one is services.', 'start': 756.607, 'duration': 3.741}, {'end': 768.611, 'text': 'The next one is blog.', 'start': 766.731, 'duration': 1.88}, {'end': 779.182, 'text': 'and the last one is contact us.', 'start': 772.458, 'duration': 6.724}, {'end': 791.731, 'text': 'make sure it is aligned by selecting all the layers and click this one and place it right here.', 'start': 779.182, 'duration': 12.549}, {'end': 803.321, 'text': 'also, to align it, click on this folder and pressing control and select the layer and Click this again to align it vertically.', 'start': 791.731, 'duration': 11.59}, {'end': 805.762, 'text': "Let's see.", 'start': 804.921, 'duration': 0.841}, {'end': 814.924, 'text': 'Home, About Us, Services, Blog, Contact Us.', 'start': 809.523, 'duration': 5.401}, {'end': 815.744, 'text': 'We did it right.', 'start': 814.984, 'duration': 0.76}, {'end': 822.546, 'text': 'For the spacing, I want this to be 20 pixels or 40 pixels.', 'start': 817.965, 'duration': 4.581}], 'summary': 'Creating a navigation bar with 5 links, using helvetica font, and aligning with 20-40 pixel spacing.', 'duration': 118.742, 'max_score': 703.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag703804.jpg'}, {'end': 960.365, 'src': 'embed', 'start': 895.231, 'weight': 1, 'content': [{'end': 906.035, 'text': "Now that our navigation is in place, let's create the banner part.", 'start': 895.231, 'duration': 10.804}, {'end': 912.157, 'text': "So it's a matter of placing the elements first before styling.", 'start': 907.335, 'duration': 4.822}, {'end': 920.24, 'text': "So let's make it about, let's see how much I space this out.", 'start': 912.977, 'duration': 7.263}, {'end': 935.031, 'text': "so it's 530 i think 540.", 'start': 925.826, 'duration': 9.205}, {'end': 960.365, 'text': 'so, to make this easier, just make a 1600 by 540 pixels yep and center this out like that, and we can get exactly what we need.', 'start': 935.031, 'duration': 25.334}], 'summary': 'Creating a banner with 1600x540 pixels for navigation.', 'duration': 65.134, 'max_score': 895.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag895231.jpg'}, {'end': 1181.635, 'src': 'embed', 'start': 1109.932, 'weight': 2, 'content': [{'end': 1122.894, 'text': "Let's just copy this and lower the size to 18 pixels and for this time just make it white and paste it.", 'start': 1109.932, 'duration': 12.962}, {'end': 1136.517, 'text': 'One, two, three, four and then for this one, for the call to action button.', 'start': 1123.915, 'duration': 12.602}, {'end': 1145.412, 'text': "let's see, get started.", 'start': 1141.149, 'duration': 4.263}, {'end': 1151.997, 'text': 'so first just create a get started text.', 'start': 1145.412, 'duration': 6.585}, {'end': 1163.025, 'text': "let's make this helvetica and bold.", 'start': 1151.997, 'duration': 11.028}, {'end': 1169.724, 'text': 'so group this and make this cta and this one right.', 'start': 1163.025, 'duration': 6.699}, {'end': 1177.771, 'text': 'here is the text.', 'start': 1169.724, 'duration': 8.047}, {'end': 1181.635, 'text': 'so banner.', 'start': 1177.771, 'duration': 3.864}], 'summary': 'Instructions for resizing, styling, and arranging text elements for a call to action button.', 'duration': 71.703, 'max_score': 1109.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1109932.jpg'}], 'start': 703.804, 'title': 'Website navigation and banner creation', 'summary': 'Covers designing website navigation using helvetica font at 14 or 16 size, ensuring alignment and spacing of elements like home, about us, services, blog, and contact us, with a 40-pixel spacing. it also focuses on creating the website banner, including element placement, styling, specific pixel dimensions, font sizes, and call to action button creation.', 'chapters': [{'end': 885.901, 'start': 703.804, 'title': 'Website navigation design', 'summary': 'Covers designing a website navigation using the font helvetica at 14 or 16 size, ensuring alignment and spacing of elements, including home, about us, services, blog, and contact us, with a spacing of 40 pixels between each.', 'duration': 182.097, 'highlights': ['Using the font Helvetica at 14 or 16 size, the navigation items Home, About Us, Services, Blog, and Contact Us are added and aligned, with a spacing of 40 pixels between each.', 'Emphasizing the importance of grouping layers and ensuring alignment by pressing control and selecting the layer, then aligning it vertically using the provided folder.', 'Demonstrating the process of creating a spacing of 40 pixels between navigation items by pressing shift and the left arrow key four times for each item, ensuring equal spacing.', 'Detailing the process of ensuring alignment and spacing by pressing shift and the left arrow key to create a spacing of 10 pixels, resulting in a 40-pixel space between each navigation item.']}, {'end': 1374.227, 'start': 895.231, 'title': 'Creating banner part for website', 'summary': 'Focuses on creating the banner part for a website, including elements placement and styling, with specific pixel dimensions and font sizes mentioned, and the creation of a call to action button.', 'duration': 478.996, 'highlights': ['The banner part is created with a pixel dimension of 1600 by 540, and specific font sizes like 48 and 18 pixels are mentioned for the heading and call to action button.', 'The process involves creating a shape, pasting heading text, adjusting font sizes, and creating a call to action button with specific dimensions of 130 by 44 pixels.', 'Specific instructions are given for font sizes, alignment, and dimensions, including 130 pixels width and 44 pixels height for the call to action button.']}], 'duration': 670.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag703804.jpg', 'highlights': ['The navigation items Home, About Us, Services, Blog, and Contact Us are added and aligned using the font Helvetica at 14 or 16 size, with a spacing of 40 pixels between each.', 'The banner part is created with a pixel dimension of 1600 by 540, and specific font sizes like 48 and 18 pixels are mentioned for the heading and call to action button.', 'Specific instructions are given for font sizes, alignment, and dimensions, including 130 pixels width and 44 pixels height for the call to action button.', 'Emphasizing the importance of grouping layers and ensuring alignment by pressing control and selecting the layer, then aligning it vertically using the provided folder.']}, {'end': 1756.632, 'segs': [{'end': 1523.945, 'src': 'embed', 'start': 1446.727, 'weight': 0, 'content': [{'end': 1451.709, 'text': 'and then select all and then center it.', 'start': 1446.727, 'duration': 4.982}, {'end': 1458.835, 'text': "now I'm aligned horizontal.", 'start': 1456.494, 'duration': 2.341}, {'end': 1460.355, 'text': 'this is aligned vertical.', 'start': 1458.835, 'duration': 1.52}, {'end': 1465.737, 'text': 'so sorry for that mistake.', 'start': 1460.355, 'duration': 5.382}, {'end': 1474.661, 'text': 'yeah, so something like that one.', 'start': 1465.737, 'duration': 8.924}, {'end': 1511.579, 'text': "so we have this layout right here and for this one, let's make this one, two, three, four, something like that, just to make sure it is right.", 'start': 1474.661, 'duration': 36.918}, {'end': 1522.765, 'text': "and for this one, on this part, let's create again 38 plus 40 is 90.", 'start': 1511.579, 'duration': 11.186}, {'end': 1523.945, 'text': 'no, i mean 78.', 'start': 1522.765, 'duration': 1.18}], 'summary': 'Aligning elements horizontally and vertically, adjusting layout dimensions, and correcting calculation error.', 'duration': 77.218, 'max_score': 1446.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1446727.jpg'}, {'end': 1756.632, 'src': 'embed', 'start': 1676.319, 'weight': 2, 'content': [{'end': 1702.018, 'text': 'we can actually remove this using the pen tool.', 'start': 1676.319, 'duration': 25.699}, {'end': 1723.052, 'text': 'just hover on and the minus sign will came up and click it so that that path will be disappeared and then align it again by grabbing this and place it right there.', 'start': 1702.018, 'duration': 21.034}, {'end': 1724.532, 'text': 'the same also here.', 'start': 1723.052, 'duration': 1.48}, {'end': 1756.632, 'text': "so something like that one, so that when we're going to resize this, it's perfectly fitted there and if we're going to duplicate this one,", 'start': 1734.292, 'duration': 22.34}], 'summary': 'Demonstrating how to remove paths using the pen tool and aligning objects for perfect fit.', 'duration': 80.313, 'max_score': 1676.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1676319.jpg'}], 'start': 1374.227, 'title': 'Design layout and alignment', 'summary': 'Discusses creating a design layout with alignment and dimensions, including centering, spacing, and element positioning, with a focus on achieving precision and accuracy.', 'chapters': [{'end': 1756.632, 'start': 1374.227, 'title': 'Design layout and alignment', 'summary': 'Discusses creating a design layout with alignment and dimensions, including centering, spacing, and element positioning, with a focus on achieving precision and accuracy.', 'duration': 382.405, 'highlights': ['Creating a design layout with precise alignment and dimensions, including centering, spacing, and element positioning.', 'Adjusting dimensions and alignments, such as 78 by 34, with a focus on achieving precision.', 'Utilizing tools like path selection and direct selection for precise adjustments and removing unnecessary elements.']}], 'duration': 382.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1374227.jpg', 'highlights': ['Creating a design layout with precise alignment and dimensions, including centering, spacing, and element positioning.', 'Adjusting dimensions and alignments, such as 78 by 34, with a focus on achieving precision.', 'Utilizing tools like path selection and direct selection for precise adjustments and removing unnecessary elements.']}, {'end': 2061.134, 'segs': [{'end': 2061.134, 'src': 'embed', 'start': 1756.632, 'weight': 0, 'content': [{'end': 1766.584, 'text': 'so browser group one And two from the back, two, three.', 'start': 1756.632, 'duration': 9.952}, {'end': 1775.709, 'text': "Let's place this right here and the other one right here.", 'start': 1768.705, 'duration': 7.004}, {'end': 1790.679, 'text': "What I'm going to do is to shrink this 90% and align this again right there.", 'start': 1777.951, 'duration': 12.728}, {'end': 1827.915, 'text': "and right there then make sure to fix the unnecessary pixelated part like this one and make sure it's It's crisp.", 'start': 1792.629, 'duration': 35.286}, {'end': 1833.037, 'text': 'The same to the other side.', 'start': 1830.136, 'duration': 2.901}, {'end': 1841.979, 'text': 'Something like that will do.', 'start': 1840.099, 'duration': 1.88}, {'end': 1849.641, 'text': "Let's see if we've done it right based on our design right here.", 'start': 1844.56, 'duration': 5.081}, {'end': 1865.089, 'text': 'if we space it correctly.', 'start': 1858.044, 'duration': 7.045}, {'end': 1870.933, 'text': 'so I think we need more space.', 'start': 1865.089, 'duration': 5.844}, {'end': 1900.764, 'text': 'so something like 123456, 123456, 123456, and then the browser will be one, two, three, four, so something like that.', 'start': 1870.933, 'duration': 29.831}, {'end': 1907.226, 'text': "so let's make it like that.", 'start': 1900.764, 'duration': 6.462}, {'end': 1922.063, 'text': "So, basically, what we are doing now is just transferring this warframe into Photoshop before we're going to style it.", 'start': 1909.858, 'duration': 12.205}, {'end': 1936.048, 'text': 'Once we finish placing all the elements, now we can play on the color schemes and drop shadows to style this one.', 'start': 1923.623, 'duration': 12.425}, {'end': 1944.544, 'text': "So let's move ahead on this section.", 'start': 1937.901, 'duration': 6.643}, {'end': 1954.448, 'text': "So what I'm planning to do is create a four section.", 'start': 1944.704, 'duration': 9.744}, {'end': 1958.769, 'text': "Let's just try to four column.", 'start': 1956.168, 'duration': 2.601}, {'end': 1962.271, 'text': 'So one, two, three.', 'start': 1961.07, 'duration': 1.201}, {'end': 1968.883, 'text': 'First thing is to add a dummy text.', 'start': 1965.242, 'duration': 3.641}, {'end': 1972.403, 'text': 'Change this to Alpetica.', 'start': 1969.723, 'duration': 2.68}, {'end': 1976.984, 'text': 'Make the font size to 14.', 'start': 1973.484, 'duration': 3.5}, {'end': 1983.365, 'text': 'Make this type paste lorem ipsum.', 'start': 1976.984, 'duration': 6.381}, {'end': 1994.252, 'text': 'Adjust the formatting to maybe 18 or 24.', 'start': 1985.686, 'duration': 8.566}, {'end': 2014.077, 'text': "we'll just make it 18 to be safe and then remove some text, something like that.", 'start': 1994.252, 'duration': 19.825}, {'end': 2022.379, 'text': 'and then for the heading, this is or just plan design, develop.', 'start': 2014.077, 'duration': 8.302}, {'end': 2045.088, 'text': 'so first heading is plan, make it 18 or 24, make this museo 700, make this a darker,', 'start': 2024.412, 'duration': 20.676}, {'end': 2061.134, 'text': 'and then center this out by selecting the grid using marquee selection tool and align it horizontally like that.', 'start': 2045.088, 'duration': 16.046}], 'summary': 'Transferring web design into photoshop, adjusting elements, adding text and styling with color schemes and drop shadows.', 'duration': 304.502, 'max_score': 1756.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1756632.jpg'}], 'start': 1756.632, 'title': 'Web design alignment and styling', 'summary': 'Focuses on aligning web design elements, resizing images by 90%, adjusting spacing for a balanced layout, and styling the design in photoshop, as well as creating a four-column layout, adjusting font size, and aligning text horizontally.', 'chapters': [{'end': 1922.063, 'start': 1756.632, 'title': 'Web design alignment and styling', 'summary': 'Emphasizes the process of aligning web design elements, resizing images by 90%, ensuring crispness, and adjusting spacing for a balanced layout, and transferring the design to photoshop for styling.', 'duration': 165.431, 'highlights': ['Resizing images by 90% and aligning them to ensure proper placement and balance.', "Adjusting spacing to create a balanced layout, with specific quantifiable examples like '123456' for spacing.", 'Transferring the web design elements from the browser to Photoshop for further styling.']}, {'end': 2061.134, 'start': 1923.623, 'title': 'Web design styling', 'summary': 'Discusses styling a web design, including creating a four-column layout, adjusting font size, and aligning text horizontally.', 'duration': 137.511, 'highlights': ['Create a four-column layout by adding dummy text and changing the font size to 14, then adjusting it to 18 for formatting.', "Styling the heading by using the font 'museo 700', making it darker, and aligning it horizontally using the marquee selection tool."]}], 'duration': 304.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag1756632.jpg', 'highlights': ['Resizing images by 90% and aligning them for proper placement and balance.', "Adjusting spacing to create a balanced layout, with specific quantifiable examples like '123456' for spacing.", 'Transferring web design elements from the browser to Photoshop for further styling.', 'Creating a four-column layout by adding dummy text and changing the font size to 14, then adjusting it to 18 for formatting.', "Styling the heading by using the font 'museo 700', making it darker, and aligning it horizontally using the marquee selection tool."]}, {'end': 2851.104, 'segs': [{'end': 2132.386, 'src': 'embed', 'start': 2061.134, 'weight': 0, 'content': [{'end': 2074.821, 'text': 'space it out right, one, two, three, four or three, maybe one, two, three, four.', 'start': 2061.134, 'duration': 13.687}, {'end': 2080.264, 'text': 'we need another one for the icon.', 'start': 2074.821, 'duration': 5.443}, {'end': 2089.745, 'text': 'so just make it so.', 'start': 2080.264, 'duration': 9.481}, {'end': 2097.17, 'text': "before that, let's try to make it something like this.", 'start': 2089.745, 'duration': 7.425}, {'end': 2111.56, 'text': 'duplicate it, or maybe we will start by creating those icons.', 'start': 2097.17, 'duration': 14.39}, {'end': 2125.04, 'text': 'first is, create just five pixels and make it noticeable.', 'start': 2111.56, 'duration': 13.48}, {'end': 2130.345, 'text': 'place it right there.', 'start': 2125.04, 'duration': 5.305}, {'end': 2132.386, 'text': 'well, it is selected.', 'start': 2130.345, 'duration': 2.041}], 'summary': 'Creating icons with five pixels for visibility and positioning.', 'duration': 71.252, 'max_score': 2061.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2061134.jpg'}, {'end': 2632.532, 'src': 'embed', 'start': 2559.465, 'weight': 1, 'content': [{'end': 2569.95, 'text': 'i space, i will space this later on, maybe 40 pixels so that it is balanced.', 'start': 2559.465, 'duration': 10.485}, {'end': 2576.371, 'text': 'duplicate this, no.', 'start': 2571.849, 'duration': 4.522}, {'end': 2589.978, 'text': 'so on the three and four, more copy and move it.', 'start': 2576.371, 'duration': 13.607}, {'end': 2597.221, 'text': 'something like that is great.', 'start': 2589.978, 'duration': 7.243}, {'end': 2613.21, 'text': 'so the best place to find icons or temporary icons is icon monster.', 'start': 2601.101, 'duration': 12.109}, {'end': 2632.532, 'text': 'yeah, monster, without e dot com, and make sure your extension add block is disabled because you are not able to download it.', 'start': 2613.21, 'duration': 19.322}], 'summary': 'Balanced spacing of 40 pixels, duplications avoided, use icon monster for icons.', 'duration': 73.067, 'max_score': 2559.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2559465.jpg'}, {'end': 2780.457, 'src': 'embed', 'start': 2713.806, 'weight': 2, 'content': [{'end': 2734.296, 'text': "yeah, it's on view and let's go ahead and download this one download, download, download and download.", 'start': 2713.806, 'duration': 20.49}, {'end': 2740.699, 'text': 'show in folder, select all and grab it there.', 'start': 2734.296, 'duration': 6.403}, {'end': 2760.652, 'text': "so place it on the icons folder right there and we're going to resize it to 32.", 'start': 2746.986, 'duration': 13.666}, {'end': 2774.478, 'text': "so control T and then, until it reach on 32 pixels like that, then we're going to place it.", 'start': 2760.652, 'duration': 13.826}, {'end': 2776.239, 'text': 'so time icon will be here.', 'start': 2774.478, 'duration': 1.761}, {'end': 2780.457, 'text': '3D view will be launch.', 'start': 2778.255, 'duration': 2.202}], 'summary': 'Downloading and resizing icons for 3d view launch.', 'duration': 66.651, 'max_score': 2713.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2713806.jpg'}], 'start': 2061.134, 'title': 'Designing and resizing web icons', 'summary': 'Covers creating a set of four icons for a web page, emphasizing steps like resizing, aligning, and transforming icons. it also discusses designing and sizing elements with consistent spacing, specific font and pixel sizes, and using iconmonster for icons. additionally, it involves organizing, downloading, placing, and resizing icons to specific dimensions such as 32 pixels.', 'chapters': [{'end': 2411.882, 'start': 2061.134, 'title': 'Designing icon set for web page', 'summary': 'Details the process of creating a set of four icons for a web page, involving steps like resizing, aligning, and transforming the icons to specific dimensions and positions.', 'duration': 350.748, 'highlights': ['The process involves creating a set of four icons for the web page, with specific dimensions and positions, focusing on steps like resizing, aligning, and transforming the icons (e.g., 100 pixels size and 90 by 90 pixels dimensions).', 'Instructions for aligning the icons are provided, emphasizing the importance of correct alignment for each icon to ensure they are placed accurately on the web page.', 'The chapter also mentions the need to separate elements by creating additional layers and merging them to achieve the desired design.', "The transcript includes guidance on changing the color of the icons and ensuring they are well-aligned, with specific details on aligning the icons for 'plan, design, develop, and launch' as well as 'read more.'"]}, {'end': 2632.532, 'start': 2411.882, 'title': 'Design element placement and sizing', 'summary': 'Discusses the process of designing and sizing elements, emphasizing consistent spacing and a specific font and pixel sizes, with a mention of using iconmonster for icons.', 'duration': 220.65, 'highlights': ['The chapter discusses the process of designing and sizing elements, emphasizing consistent spacing and a specific font and pixel sizes, with a mention of using IconMonster for icons.', 'The speaker mentions creating a 93 by 34 design and deciding on a font size of 24, but ultimately sticking to the 12-pixel size.', 'Emphasis is placed on consistent spacing, with the speaker mentioning a 40-pixel spacing, and the importance of correct placement of elements.', 'The speaker recommends using IconMonster for finding icons, and advises to ensure that ad blockers are disabled to enable downloads.']}, {'end': 2851.104, 'start': 2632.532, 'title': 'Organizing icons and resizing them', 'summary': 'Involves organizing different icons, downloading, placing, and resizing them to specific dimensions, such as 32 pixels, and aligning them properly.', 'duration': 218.572, 'highlights': ['The speaker organizes different icons and downloads them, placing and resizing them to 32 pixels and aligning them properly.', 'Icons are placed in specific locations and resized to 32 pixels, with a focus on proper alignment.', 'The process involves downloading, placing, and resizing different icons, ensuring they are centered and spaced correctly.']}], 'duration': 789.97, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2061134.jpg', 'highlights': ['Creating a set of four icons for the web page, with specific dimensions and positions, focusing on steps like resizing, aligning, and transforming the icons (e.g., 100 pixels size and 90 by 90 pixels dimensions).', 'Designing and sizing elements, emphasizing consistent spacing and specific font and pixel sizes, with a mention of using IconMonster for icons.', 'Organizing, downloading, placing, and resizing icons to specific dimensions such as 32 pixels, ensuring they are centered and spaced correctly.']}, {'end': 3279.867, 'segs': [{'end': 3094.592, 'src': 'embed', 'start': 2984.768, 'weight': 0, 'content': [{'end': 2998.497, 'text': "a view more or maybe let's make this our portfolio and then a three columns that showcase our design preview for our portfolio.", 'start': 2984.768, 'duration': 13.729}, {'end': 3002.28, 'text': 'so that is quick and easy.', 'start': 2998.497, 'duration': 3.783}, {'end': 3009.992, 'text': 'So first one is the portfolio.', 'start': 3004.309, 'duration': 5.683}, {'end': 3014.434, 'text': "So let's just copy this text, paste it right there.", 'start': 3010.412, 'duration': 4.022}, {'end': 3020.997, 'text': "And let's make this one, two, three, four, five, six.", 'start': 3015.715, 'duration': 5.282}, {'end': 3040.511, 'text': 'Portfolio one, two, three, four, five, six.', 'start': 3027.68, 'duration': 12.831}, {'end': 3064.024, 'text': "and then for the text, let's copy this and paste it again right there, align this to the left, make this one, two, three,", 'start': 3040.511, 'duration': 23.513}, {'end': 3073.158, 'text': "and let's create link our portfolio.", 'start': 3064.024, 'duration': 9.134}, {'end': 3086.147, 'text': "let's make this bold one, two, three, four, so.", 'start': 3073.158, 'duration': 12.989}, {'end': 3094.592, 'text': 'and then we need to create the preview of our recent works for our portfolio.', 'start': 3086.147, 'duration': 8.445}], 'summary': 'Creating a portfolio with six sections and three columns to showcase design previews.', 'duration': 109.824, 'max_score': 2984.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2984768.jpg'}, {'end': 3279.867, 'src': 'embed', 'start': 3160.101, 'weight': 1, 'content': [{'end': 3167.767, 'text': "And then below it we'll need to add a title of this certain project.", 'start': 3160.101, 'duration': 7.666}, {'end': 3175.852, 'text': "So for example, first web designer and let's make this 14 pixels.", 'start': 3168.327, 'duration': 7.525}, {'end': 3185.419, 'text': 'Align it 20 pixels below the image.', 'start': 3178.174, 'duration': 7.245}, {'end': 3215.293, 'text': "and let's add a category, for example web design, and then change this to Helvetica 12 pixels and make this lighter shade of grey.", 'start': 3187.475, 'duration': 27.818}, {'end': 3216.794, 'text': 'duplicate this one.', 'start': 3215.293, 'duration': 1.501}, {'end': 3238.77, 'text': 'Place it right there, Make sure it is aligned properly to the grid, Something like that.', 'start': 3221.101, 'duration': 17.669}, {'end': 3244.556, 'text': 'So this is the advantage of we are using grid.', 'start': 3240.151, 'duration': 4.405}, {'end': 3262.434, 'text': 'It makes our workflow more easier and faster by just following this columns and we have this margins in every columns so that it is aligned well.', 'start': 3245.156, 'duration': 17.278}, {'end': 3267.704, 'text': "so that's it for the portfolio part.", 'start': 3265.163, 'duration': 2.541}, {'end': 3278.107, 'text': "let's create a new folder and name this clients.", 'start': 3267.704, 'duration': 10.403}, {'end': 3279.867, 'text': 'for the clients.', 'start': 3278.107, 'duration': 1.76}], 'summary': 'Using a grid system for design layout makes workflow easier and faster, ensuring proper alignment and efficiency.', 'duration': 119.766, 'max_score': 3160.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag3160101.jpg'}], 'start': 2853.666, 'title': 'Web design portfolio creation and design workflow', 'summary': 'Details the process of creating a web design portfolio with a 4-column layout, providing step-by-step instructions. it also explains creating a design layout using the rounded rectangle tool and the advantages of using a grid for workflow efficiency.', 'chapters': [{'end': 3094.592, 'start': 2853.666, 'title': 'Web design portfolio creation', 'summary': 'Details the process of creating a web design portfolio with a 4-column layout and provides step-by-step instructions for spacing, background creation, text alignment, and portfolio preview.', 'duration': 240.926, 'highlights': ['The chapter covers the process of creating a web design portfolio with a 4-column layout, emphasizing the importance of spacing and background creation.', 'Step-by-step instructions for aligning text, transforming elements, and creating a preview of recent works for the portfolio are provided.', 'The speaker emphasizes the need for noticeable design elements and specific measurements, such as 60 pixels for spacing.', 'Detailed instructions are given for creating headings, titles, text, and view more links for the portfolio, as well as aligning elements and making text bold.']}, {'end': 3279.867, 'start': 3094.592, 'title': 'Design workflow and grid aligned layout', 'summary': 'Explains how to create a design layout using the rounded rectangle tool with specified dimensions and alignment, adding a title and category with specific font sizes and alignment, demonstrating the advantages of using a grid for workflow efficiency, and creating a new folder for clients.', 'duration': 185.275, 'highlights': ['The advantage of using a grid for layout makes the workflow easier and faster, ensuring alignment in every column and margins, improving efficiency.', 'Creating a design layout using the rounded rectangle tool with specific dimensions and alignment, followed by adding a title and category with specific font sizes and alignment.', 'Creating a new folder for clients to organize the portfolio.']}], 'duration': 426.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag2853666.jpg', 'highlights': ['Step-by-step instructions for aligning text, transforming elements, and creating a preview of recent works for the portfolio are provided.', 'The advantage of using a grid for layout makes the workflow easier and faster, ensuring alignment in every column and margins, improving efficiency.', 'Creating a design layout using the rounded rectangle tool with specific dimensions and alignment, followed by adding a title and category with specific font sizes and alignment.', 'The chapter covers the process of creating a web design portfolio with a 4-column layout, emphasizing the importance of spacing and background creation.']}, {'end': 3643.628, 'segs': [{'end': 3643.628, 'src': 'embed', 'start': 3379.937, 'weight': 0, 'content': [{'end': 3383.799, 'text': 'Then go back to our design right here.', 'start': 3379.937, 'duration': 3.862}, {'end': 3390.669, 'text': 'and paste it over.', 'start': 3386.946, 'duration': 3.723}, {'end': 3394.071, 'text': 'so this is the first one.', 'start': 3390.669, 'duration': 3.402}, {'end': 3401.096, 'text': "let's do the same on theme forest.", 'start': 3394.071, 'duration': 7.025}, {'end': 3410.722, 'text': 'cut it theme forest.', 'start': 3401.096, 'duration': 9.626}, {'end': 3465.144, 'text': "next is code canyon, and the last one will be let's try active den, so something that looks like that, and let's align this up.", 'start': 3418.682, 'duration': 46.462}, {'end': 3483.832, 'text': 'make sure they are aligned on the center as well.', 'start': 3465.144, 'duration': 18.688}, {'end': 3495.139, 'text': "oops, i've got the wrong one.", 'start': 3483.832, 'duration': 11.307}, {'end': 3528.546, 'text': "so let's align this, and also for active then, and for theme forest then what we will do is group this one and make it original,", 'start': 3495.139, 'duration': 33.407}, {'end': 3541.733, 'text': 'duplicate it and then merge it all by pressing control E.', 'start': 3530.444, 'duration': 11.289}, {'end': 3554.664, 'text': 'then go to image adjustment, desaturate and lower the opacity to 50%, something like that.', 'start': 3541.733, 'duration': 12.931}, {'end': 3571.346, 'text': 'place it 60 pixels below 1, 2, 3, 4, 5, 6, or maybe add more, like 120 pixels below.', 'start': 3559.516, 'duration': 11.83}, {'end': 3572.307, 'text': 'so add 6 more 1, 2, 3, 4, 5, 6.', 'start': 3571.346, 'duration': 0.961}, {'end': 3592.822, 'text': 'so something like that, to have a breathe, breathing space for the clients section.', 'start': 3572.307, 'duration': 20.515}, {'end': 3603.551, 'text': 'and next will be the footer section,', 'start': 3592.822, 'duration': 10.729}, {'end': 3620.915, 'text': 'which compose of adding titles for testimonials or blog and latest tweets and some social links and navigation links.', 'start': 3603.551, 'duration': 17.364}, {'end': 3633.722, 'text': 'so create another folder and make this footer footer.', 'start': 3620.915, 'duration': 12.807}, {'end': 3642.327, 'text': "let's close this and let's go back to our warframe.", 'start': 3633.722, 'duration': 8.605}, {'end': 3643.628, 'text': 'so testimonials.', 'start': 3642.327, 'duration': 1.301}], 'summary': 'Designing website elements and positioning images for better visual appeal and client interaction.', 'duration': 263.691, 'max_score': 3379.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag3379937.jpg'}], 'start': 3279.867, 'title': 'Designing theme logos and footer', 'summary': 'Covers the process of designing logos for theme forest, code canyon, and active den, including steps for merging, aligning, and adjusting opacity, as well as creating a footer section with titles for testimonials, blog, latest tweets, social links, and navigation links.', 'chapters': [{'end': 3643.628, 'start': 3279.867, 'title': 'Designing theme logos and footer', 'summary': 'Covers the process of designing logos for theme forest, code canyon, and active den, including steps for merging, aligning, and adjusting opacity, as well as creating a footer section with titles for testimonials, blog, latest tweets, social links, and navigation links.', 'duration': 363.761, 'highlights': ['The process of designing logos for Theme Forest, Code Canyon, and Active Den, including merging, aligning, and adjusting opacity.', 'Creating a footer section with titles for testimonials, blog, latest tweets, social links, and navigation links.', 'Step-by-step instructions for merging logo elements and adjusting opacity to 50% for a specific design effect.', 'Adding breathing space for the clients section by placing the design elements at specific pixel intervals.', 'Detailed steps for creating a footer section with specific elements such as testimonials, blog, latest tweets, social links, and navigation links.']}], 'duration': 363.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag3279867.jpg', 'highlights': ['Step-by-step instructions for merging logo elements and adjusting opacity to 50% for a specific design effect.', 'Detailed steps for creating a footer section with specific elements such as testimonials, blog, latest tweets, social links, and navigation links.', 'The process of designing logos for Theme Forest, Code Canyon, and Active Den, including merging, aligning, and adjusting opacity.', 'Adding breathing space for the clients section by placing the design elements at specific pixel intervals.']}, {'end': 4166.073, 'segs': [{'end': 4166.073, 'src': 'embed', 'start': 3647.441, 'weight': 0, 'content': [{'end': 3666.327, 'text': "So what we're going to do is add a heading text and make it 18 pixels or 16..", 'start': 3647.441, 'duration': 18.886}, {'end': 3666.847, 'text': 'Make this.', 'start': 3666.327, 'duration': 0.52}, {'end': 3683.935, 'text': 'museo 700.', 'start': 3677.469, 'duration': 6.466}, {'end': 3705.073, 'text': "and then let's add the image, grab the rounded rectangular tool and create a 60 pixels by 60 pixels and then place this one, two, three,", 'start': 3683.935, 'duration': 21.138}, {'end': 3720.541, 'text': "30 pixels below and let's add a text.", 'start': 3707.015, 'duration': 13.526}, {'end': 3735.848, 'text': 'change this to Georgia, change the font size to 14 and go to type paste some dummy text and just erase.', 'start': 3720.541, 'duration': 15.307}, {'end': 3784.912, 'text': 'so maybe something like that will do and make this italic, something like that, and make this lighter.', 'start': 3743.119, 'duration': 41.793}, {'end': 3788.213, 'text': 'yeah, that will do.', 'start': 3784.912, 'duration': 3.301}, {'end': 3799.395, 'text': "and then let's add the name and the website URL.", 'start': 3788.213, 'duration': 11.182}, {'end': 3821.624, 'text': "so, John Doe, let's make this Helvetica, make it bold and below it is the website link domain.com.", 'start': 3799.395, 'duration': 22.229}, {'end': 3839.288, 'text': 'just make it 12, 1, 2, 3.', 'start': 3821.624, 'duration': 17.664}, {'end': 3851.737, 'text': 'So 14, 14, 16, or maybe 18 will do.', 'start': 3839.29, 'duration': 12.447}, {'end': 3858.301, 'text': '1, 2, 3.', 'start': 3854.098, 'duration': 4.203}, {'end': 3862.123, 'text': 'Group this out and name this to testimonials.', 'start': 3858.301, 'duration': 3.822}, {'end': 3870.644, 'text': 'Next is the blog section.', 'start': 3867.043, 'duration': 3.601}, {'end': 3879.566, 'text': 'So duplicate the group and place it right there.', 'start': 3874.645, 'duration': 4.921}, {'end': 3889.528, 'text': 'Name this to our latest post.', 'start': 3882.926, 'duration': 6.602}, {'end': 3895.349, 'text': 'Erase this.', 'start': 3894.529, 'duration': 0.82}, {'end': 3916.669, 'text': 'just change this to no sale and make it 700.', 'start': 3900.979, 'duration': 15.69}, {'end': 3929.197, 'text': 'just erase and add a date and posted by admin.', 'start': 3916.669, 'duration': 12.528}, {'end': 3952.887, 'text': 'so the date for today is June 4, June 4, 2013.', 'start': 3932.538, 'duration': 20.349}, {'end': 3975.733, 'text': 'and make this 12 Helvetica as well and then posted by admin.', 'start': 3952.887, 'duration': 22.846}, {'end': 3979.675, 'text': 'so something like that.', 'start': 3975.733, 'duration': 3.942}, {'end': 3982.577, 'text': 'and increase this spacing to 24.', 'start': 3979.675, 'duration': 2.902}, {'end': 3987.78, 'text': 'then erase this.', 'start': 3982.577, 'duration': 5.203}, {'end': 4015.889, 'text': 'add a separator by using line tool and make this slider something like ccccc for now.', 'start': 3991.124, 'duration': 24.765}, {'end': 4017.93, 'text': 'then align it 20 pixels.', 'start': 4015.889, 'duration': 2.041}, {'end': 4023.997, 'text': 'want to make this block.', 'start': 4017.93, 'duration': 6.067}, {'end': 4029.098, 'text': 'duplicate the layers or i mean group it and duplicate it.', 'start': 4023.997, 'duration': 5.101}, {'end': 4054.702, 'text': 'place it below one, two and one, last one, two and make sure you hide the last separator, something like that.', 'start': 4029.098, 'duration': 25.604}, {'end': 4063.347, 'text': 'duplicate the blog and make this latest tweets.', 'start': 4054.702, 'duration': 8.645}, {'end': 4067.389, 'text': 'drag it right there.', 'start': 4063.347, 'duration': 4.042}, {'end': 4075.053, 'text': 'make this our latest or latest tweets.', 'start': 4067.389, 'duration': 7.664}, {'end': 4085.587, 'text': "let's just grab of what I did here.", 'start': 4080.345, 'duration': 5.242}, {'end': 4108.154, 'text': 'so erase this one like that one.', 'start': 4085.587, 'duration': 22.567}, {'end': 4122.474, 'text': 'then create a thumbnail for the image.', 'start': 4108.154, 'duration': 14.32}, {'end': 4129.578, 'text': 'want to duplicate it again.', 'start': 4122.474, 'duration': 7.104}, {'end': 4139.063, 'text': 'erase this one.', 'start': 4129.578, 'duration': 9.485}, {'end': 4143.725, 'text': 'bring it down 20 pixels.', 'start': 4139.063, 'duration': 4.662}, {'end': 4147.939, 'text': 'do it again 20 pixels.', 'start': 4143.725, 'duration': 4.214}, {'end': 4155.785, 'text': 'make sure to hide the last separator and then name it like that.', 'start': 4147.939, 'duration': 7.846}, {'end': 4166.073, 'text': 'so latest tweets, blog and testimonials.', 'start': 4155.785, 'duration': 10.288}], 'summary': 'Design instructions for web layout and elements with specific pixel dimensions and fonts.', 'duration': 518.632, 'max_score': 3647.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag3647441.jpg'}], 'start': 3647.441, 'title': 'Web designing instructions and creating web design elements', 'summary': 'Provides instructions for designing a web page, such as setting font sizes, creating images, and arranging elements, with specific pixel measurements. it also explains the process of creating web design elements, including duplicating and aligning layers, creating thumbnails, and arranging elements on a web page.', 'chapters': [{'end': 3987.78, 'start': 3647.441, 'title': 'Web designing instructions', 'summary': 'Outlines instructions for designing a web page, including setting font sizes, creating images, and arranging elements, with specific pixel measurements provided for each action.', 'duration': 340.339, 'highlights': ['Creating a 60x60 pixels rounded rectangular image and placing it 30 pixels below with specific font and text style instructions.', 'Adding the name and website URL with specific font sizes and details.', 'Providing instructions for duplicating a group and creating a blog section with specific text and spacing details.']}, {'end': 4166.073, 'start': 3991.124, 'title': 'Creating web design elements', 'summary': 'Explains the process of creating web design elements, including duplicating and aligning layers, creating thumbnails, and arranging elements on a web page.', 'duration': 174.949, 'highlights': ['The process involves duplicating and aligning layers, as well as creating thumbnails for images.', 'Arranging elements involves placing duplicated blocks below others and hiding specific separators.', "The chapter also covers naming the created elements, such as 'latest tweets,' 'blog,' and 'testimonials.'"]}], 'duration': 518.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag3647441.jpg', 'highlights': ['Providing instructions for duplicating a group and creating a blog section with specific text and spacing details.', 'Adding the name and website URL with specific font sizes and details.', 'Creating a 60x60 pixels rounded rectangular image and placing it 30 pixels below with specific font and text style instructions.', 'The process involves duplicating and aligning layers, as well as creating thumbnails for images.', 'Arranging elements involves placing duplicated blocks below others and hiding specific separators.', "The chapter also covers naming the created elements, such as 'latest tweets,' 'blog,' and 'testimonials.'"]}, {'end': 5111.929, 'segs': [{'end': 4272.049, 'src': 'embed', 'start': 4166.073, 'weight': 0, 'content': [{'end': 4183.108, 'text': 'so basically, what we are doing now is just placing all the elements and focused on aligning and playing some dummy contrast of the text like this.', 'start': 4166.073, 'duration': 17.035}, {'end': 4227.075, 'text': 'one should be darker like that, just to have an idea on later on so that we can focus on styling this one also heading should be darker.', 'start': 4183.108, 'duration': 43.967}, {'end': 4242.984, 'text': "what's good about this is we are just looking and focusing on the placements and the arrangements of the elements.", 'start': 4227.075, 'duration': 15.909}, {'end': 4251.889, 'text': 'so we have this visual presentation of our whole website.', 'start': 4242.984, 'duration': 8.905}, {'end': 4261.134, 'text': 'so if we compare this one, we have this a general idea of what is the website will look like.', 'start': 4251.889, 'duration': 9.245}, {'end': 4272.049, 'text': 'but in this one we have a clear version but unstyled layout.', 'start': 4261.134, 'duration': 10.915}], 'summary': 'Aligning and arranging elements for website visualization and styling.', 'duration': 105.976, 'max_score': 4166.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag4166073.jpg'}, {'end': 4605.397, 'src': 'embed', 'start': 4497.248, 'weight': 1, 'content': [{'end': 4514.476, 'text': "Let's grab a Twitter icon and some Facebook icon.", 'start': 4497.248, 'duration': 17.228}, {'end': 4549.909, 'text': 'locate this one and bring it over to our design and make them both 16 pixels by 16 pixels.', 'start': 4527.816, 'duration': 22.093}, {'end': 4555.192, 'text': 'you can see it right here on the information panel.', 'start': 4549.909, 'duration': 5.283}, {'end': 4559.648, 'text': "it's on 16 by 16.", 'start': 4555.192, 'duration': 4.456}, {'end': 4581.643, 'text': "so follow us on twitter for the twitter icon and let's make this 12 pixels so one and so twitter.", 'start': 4559.648, 'duration': 21.995}, {'end': 4582.644, 'text': 'this is facebook.', 'start': 4581.643, 'duration': 1.001}, {'end': 4596.372, 'text': "So let's make this like us on Facebook.", 'start': 4586.847, 'duration': 9.525}, {'end': 4605.397, 'text': 'Then name it Facebook.', 'start': 4603.776, 'duration': 1.621}], 'summary': 'Design requires twitter and facebook icons, both 16x16 pixels.', 'duration': 108.149, 'max_score': 4497.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag4497248.jpg'}, {'end': 5028.838, 'src': 'embed', 'start': 4962.28, 'weight': 2, 'content': [{'end': 4973.003, 'text': 'something like something like that will do, so it is more noticeable.', 'start': 4962.28, 'duration': 10.723}, {'end': 4996.946, 'text': 'So we just transferred from this warframe from our general idea to a mockup that is on style.', 'start': 4978.772, 'duration': 18.174}, {'end': 5005.713, 'text': 'We are focusing only on the spacing and the text.', 'start': 4999.368, 'duration': 6.345}, {'end': 5028.838, 'text': 'that is on for the heading we have Museo and for the text itself is Helvetica, and here, on the testimonial section,', 'start': 5010.051, 'duration': 18.787}], 'summary': 'Transferred from general idea to mockup, focusing on spacing and text.', 'duration': 66.558, 'max_score': 4962.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag4962280.jpg'}], 'start': 4166.073, 'title': 'Website design and styling', 'summary': 'Covers website layout alignment, styling, footer design with social media icons, and transforming web design mockup in photoshop, emphasizing dimensions, alignment, and specific instructions for improving appearance and usability.', 'chapters': [{'end': 4311.726, 'start': 4166.073, 'title': 'Website layout alignment and styling', 'summary': "Discusses the process of aligning and arranging elements for a visual website presentation, aiming to improve the overall look and feel of the layout, emphasizing on the need for styling to enhance the website's appearance and usability.", 'duration': 145.653, 'highlights': ["The process involves placing and aligning elements while playing with contrasting text to visualize the website's layout and focus on styling (e.g., making headings darker).", 'The chapter emphasizes the importance of focusing on element placements and arrangements to achieve a visual presentation of the website and compares the unstyled and styled layout for better clarity.', 'The layout is depicted to be getting in shape, with the potential to look even better after styling, indicating progress in website development.']}, {'end': 4679.311, 'start': 4311.726, 'title': 'Designing footer with social media icons', 'summary': 'Covers the creation of a footer with a white rectangle, copyright text, and social media icons for facebook and twitter, with specific dimensions and alignment instructions.', 'duration': 367.585, 'highlights': ['A white rectangle is created and aligned with specific dimensions and an applied stroke.', 'Copyright text is duplicated and placed inside the footer with a color overlay and alignment instructions.', 'Instructions for locating, resizing, and naming Twitter and Facebook icons are provided with specific pixel dimensions and alignment details.', 'Detailed instructions are provided for setting the dimensions and radius of a rounded rectangle tool for the social media icons.']}, {'end': 5111.929, 'start': 4679.311, 'title': 'Transforming web design mockup in photoshop', 'summary': 'Demonstrates transforming a web design mockup in photoshop, focusing on spacing, text, and style, using specific dimensions and font types, and preparing for future adjustments.', 'duration': 432.618, 'highlights': ['The chapter emphasizes aligning elements to the center, using specific dimensions such as 164 by 34, and spacing elements out for a clean design.', 'The specific font types used for heading, text, and testimonial sections are highlighted, with Museo for the heading, Helvetica for the text, and Georgia for the testimonial section.', 'The focus on preparing for future adjustments is evident, including colorizing links, adjusting button styles, and making text bold for enhanced presentation.']}], 'duration': 945.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZEem-KoFMag/pics/ZEem-KoFMag4166073.jpg', 'highlights': ["The process involves placing and aligning elements while playing with contrasting text to visualize the website's layout and focus on styling (e.g., making headings darker).", 'Instructions for locating, resizing, and naming Twitter and Facebook icons are provided with specific pixel dimensions and alignment details.', 'The specific font types used for heading, text, and testimonial sections are highlighted, with Museo for the heading, Helvetica for the text, and Georgia for the testimonial section.', 'The chapter emphasizes aligning elements to the center, using specific dimensions such as 164 by 34, and spacing elements out for a clean design.', 'The layout is depicted to be getting in shape, with the potential to look even better after styling, indicating progress in website development.']}], 'highlights': ['Utilizing 12 grid column system for balanced layout', 'Emphasizing balanced distribution of columns and use of 960grid12col template', 'Instructions for resizing workspace and turning on guides in Photoshop', 'Demonstrating guide utilization and workspace setup in Photoshop', 'Instructions for downloading and accessing 960grid12col template', 'Highlighting the process of planning in layout design', 'The main color combination discussed is a red one and a lighter shade of gray, such as 9A9C9F, with a white background and noticeable contrast with lighter gray and white', "Selecting 'Museo' font family with three free weights for heading text", "Downloading 'Lobster 2' handwritten type of font", "The website design includes using Museo font for headings and creating a quick logo using Lobster2 font with the website name 'dip', sized at 48 or 60 and italicized", 'The chapter introduces Color Lovers as a great place to select color schemes and mentions the use of gray for buttons, red for call-to-action buttons and links, and headings for widgets like testimonials, blog, and Twitter feed', 'The navigation items Home, About Us, Services, Blog, and Contact Us are added and aligned using the font Helvetica at 14 or 16 size, with a spacing of 40 pixels between each', 'The banner part is created with a pixel dimension of 1600 by 540, and specific font sizes like 48 and 18 pixels are mentioned for the heading and call to action button', 'Emphasizing the importance of grouping layers and ensuring alignment by pressing control and selecting the layer, then aligning it vertically using the provided folder', 'Creating a design layout with precise alignment and dimensions, including centering, spacing, and element positioning', 'Adjusting dimensions and alignments, such as 78 by 34, with a focus on achieving precision', 'Resizing images by 90% and aligning them for proper placement and balance', "Adjusting spacing to create a balanced layout, with specific quantifiable examples like '123456' for spacing", 'Transferring web design elements from the browser to Photoshop for further styling', 'Creating a set of four icons for the web page, with specific dimensions and positions, focusing on steps like resizing, aligning, and transforming the icons (e.g., 100 pixels size and 90 by 90 pixels dimensions)', 'Designing and sizing elements, emphasizing consistent spacing and specific font and pixel sizes, with a mention of using IconMonster for icons', 'Step-by-step instructions for aligning text, transforming elements, and creating a preview of recent works for the portfolio are provided', 'The advantage of using a grid for layout makes the workflow easier and faster, ensuring alignment in every column and margins, improving efficiency', 'Step-by-step instructions for merging logo elements and adjusting opacity to 50% for a specific design effect', 'Detailed steps for creating a footer section with specific elements such as testimonials, blog, latest tweets, social links, and navigation links', 'Providing instructions for duplicating a group and creating a blog section with specific text and spacing details', 'Adding the name and website URL with specific font sizes and details', 'Creating a 60x60 pixels rounded rectangular image and placing it 30 pixels below with specific font and text style instructions', "The process involves placing and aligning elements while playing with contrasting text to visualize the website's layout and focus on styling (e.g., making headings darker)", 'Instructions for locating, resizing, and naming Twitter and Facebook icons are provided with specific pixel dimensions and alignment details', 'The specific font types used for heading, text, and testimonial sections are highlighted, with Museo for the heading, Helvetica for the text, and Georgia for the testimonial section', 'The chapter emphasizes aligning elements to the center, using specific dimensions such as 164 by 34, and spacing elements out for a clean design']}