title
Create Flat UI Design Style Website Now With This Step By Step Tutorial!

description
Today You will learn how to design a flat ui style website page. Almost an hour long free video tutorial! Some people may find flat web design boring while others totally love it. I find flat design interesting and more user friendly. It puts more emphasis on the content and it's very flexible, which is really ideal for responsive web design. We do not have resource files anymore, since we put it all together in one premium training course. 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': 'Create Flat UI Design Style Website Now With This Step By Step Tutorial!', 'heatmap': [{'end': 430.627, 'start': 161.935, 'weight': 0.986}, {'end': 1191.491, 'start': 1149.253, 'weight': 0.758}], 'summary': 'Learn to create a flat portfolio design with header, services, portfolio, and contact sections, set up a web design layout, create grid-based alignment, design ui, buttons, banners, and web/graphic elements, and emphasize flat design trend in web industry.', 'chapters': [{'end': 274.461, 'segs': [{'end': 274.461, 'src': 'embed', 'start': 45.476, 'weight': 0, 'content': [{'end': 51.579, 'text': 'we have a services section for web design, mobile and photography.', 'start': 45.476, 'duration': 6.103}, {'end': 62.802, 'text': 'And on the third section we have a portfolio section, which is everything is flat.', 'start': 53.06, 'duration': 9.742}, {'end': 68.607, 'text': 'the macbook here is flat, as well as the buttons.', 'start': 62.802, 'duration': 5.805}, {'end': 80.176, 'text': 'and on the last section we have a contact section, which which is showing our social media that we are joining.', 'start': 68.607, 'duration': 11.569}, {'end': 83.879, 'text': 'for here we have email, facebook, twitter, instagram and dribble.', 'start': 80.176, 'duration': 3.703}, {'end': 90.685, 'text': 'also, i have provided two portfolio design for you.', 'start': 84.94, 'duration': 5.745}, {'end': 107.678, 'text': "first, one is something like this it's like a grid of images showcasing our portfolio, and each image have its own icons to represent.", 'start': 90.685, 'duration': 16.993}, {'end': 113.649, 'text': 'what is that kind of project for here?', 'start': 107.678, 'duration': 5.971}, {'end': 121.075, 'text': 'photography, here is web design and here is mobile design, and we have this.', 'start': 113.649, 'duration': 7.426}, {'end': 125.338, 'text': 'as you can see, we have a controls to navigate.', 'start': 121.075, 'duration': 4.263}, {'end': 133.04, 'text': "So, without any further say let's go ahead and let's get started.", 'start': 127.836, 'duration': 5.204}, {'end': 140.086, 'text': "First one, I would like you to download all the resources I've provided.", 'start': 134.261, 'duration': 5.825}, {'end': 143.509, 'text': 'You can check it on the links.', 'start': 141.307, 'duration': 2.202}, {'end': 152.731, 'text': "So first one, we're going to, we're going to locate it, going to minimize this.", 'start': 145.948, 'duration': 6.783}, {'end': 160.535, 'text': 'And on the resource, I have this 960 grid dot system.', 'start': 154.092, 'duration': 6.443}, {'end': 169.239, 'text': 'So go ahead and go to templates, Photoshop and hit on 960 grid 12 call.', 'start': 161.935, 'duration': 7.304}, {'end': 171.5, 'text': "So we're going to open this.", 'start': 169.399, 'duration': 2.101}, {'end': 177.739, 'text': "Next one, we're going to change the canvas size.", 'start': 173.777, 'duration': 3.962}, {'end': 184.803, 'text': 'So control alt C and hit this right here and make it 1600.', 'start': 178.38, 'duration': 6.423}, {'end': 191.727, 'text': 'And for this time, maybe 2800.', 'start': 184.803, 'duration': 6.924}, {'end': 192.988, 'text': 'So something like that.', 'start': 191.727, 'duration': 1.261}, {'end': 202.693, 'text': "Make sure it's on pixels and show the rulers by pressing control and colon or semi-colon on the keyboard.", 'start': 194.949, 'duration': 7.744}, {'end': 220.029, 'text': "and also our color scheme we'll be using for this tutorial will be.", 'start': 205.823, 'duration': 14.206}, {'end': 222.31, 'text': 'so just a demonstration.', 'start': 220.029, 'duration': 2.281}, {'end': 240.333, 'text': "we're going to use f8 4242 for our, the red one a flat red and 25252a.", 'start': 222.31, 'duration': 18.023}, {'end': 258.601, 'text': 'this will be for the buttons and the other one will be e5, e5, e5 for the light background.', 'start': 240.333, 'duration': 18.268}, {'end': 261.603, 'text': 'so this will be our color scheme.', 'start': 258.601, 'duration': 3.002}, {'end': 264.345, 'text': 'so this is the scheme we can hide.', 'start': 261.603, 'duration': 2.742}, {'end': 274.461, 'text': 'it can actually use this as the foreground and this will be for the background for the meantime.', 'start': 264.345, 'duration': 10.116}], 'summary': 'The transcript covers services, portfolio, contact info, and design instructions.', 'duration': 228.985, 'max_score': 45.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s45476.jpg'}], 'start': 12.5, 'title': 'Flat portfolio and web design layout', 'summary': 'Covers creating a flat portfolio design with a heather area, services section for web design, mobile, and photography, a flat portfolio section, and a contact section displaying social media links, as well as providing two portfolio designs with grid images and project representation icons. it also involves setting up a web design layout, including downloading resources, adjusting canvas size, and selecting a color scheme for the tutorial.', 'chapters': [{'end': 125.338, 'start': 12.5, 'title': 'Flat portfolio design tutorial', 'summary': 'Covers creating a flat portfolio design with a heather area, services section for web design, mobile, and photography, a flat portfolio section, and a contact section displaying social media links, as well as providing two portfolio designs with grid images and project representation icons.', 'duration': 112.838, 'highlights': ['The tutorial demonstrates creating a flat portfolio design with sections for web design, mobile, and photography, along with a contact section displaying social media links.', 'The portfolio design includes a grid of images showcasing different projects with icons representing web design, mobile design, and photography.', 'The tutorial provides two portfolio designs, showcasing grid images with project representation icons.']}, {'end': 274.461, 'start': 127.836, 'title': 'Creating web design layout', 'summary': 'Involves setting up a web design layout, including downloading resources, adjusting canvas size, and selecting a color scheme for the tutorial.', 'duration': 146.625, 'highlights': ['The chapter involves setting up a web design layout, including downloading resources, adjusting canvas size, and selecting a color scheme for the tutorial.', 'Instructions for downloading resources provided, which can be checked on the links provided.', 'Demonstrates adjusting canvas size to 1600x2800 pixels using the control alt C command.', 'Specifies the color scheme for the tutorial, including flat red, buttons, and light background colors.']}], 'duration': 261.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s12500.jpg', 'highlights': ['The tutorial demonstrates creating a flat portfolio design with sections for web design, mobile, and photography, along with a contact section displaying social media links.', 'The portfolio design includes a grid of images showcasing different projects with icons representing web design, mobile design, and photography.', 'The tutorial provides two portfolio designs, showcasing grid images with project representation icons.', 'The chapter involves setting up a web design layout, including downloading resources, adjusting canvas size, and selecting a color scheme for the tutorial.', 'Instructions for downloading resources provided, which can be checked on the links provided.', 'Demonstrates adjusting canvas size to 1600x2800 pixels using the control alt C command.', 'Specifies the color scheme for the tutorial, including flat red, buttons, and light background colors.']}, {'end': 637.611, 'segs': [{'end': 329.614, 'src': 'embed', 'start': 274.461, 'weight': 0, 'content': [{'end': 293.627, 'text': "so first you're going to do is select rectangle tool and create a rectangle 1600 by 660..", 'start': 274.461, 'duration': 19.166}, {'end': 301.713, 'text': 'So align this by pressing this one and it is properly aligned.', 'start': 293.627, 'duration': 8.086}, {'end': 309.078, 'text': 'So another thing is we need to create a new document.', 'start': 304.515, 'duration': 4.563}, {'end': 314.442, 'text': 'We will be creating a six by six pixel.', 'start': 309.138, 'duration': 5.304}, {'end': 319.746, 'text': 'This will serve as our baseline grid.', 'start': 315.603, 'duration': 4.143}, {'end': 329.614, 'text': 'So what does that mean is it will help us align our text properly as well as other elements.', 'start': 321.428, 'duration': 8.186}], 'summary': 'Creating a 1600x660 rectangle, aligning it, and setting up a 6x6 pixel baseline grid for text and elements.', 'duration': 55.153, 'max_score': 274.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s274461.jpg'}, {'end': 637.611, 'src': 'embed', 'start': 505.526, 'weight': 2, 'content': [{'end': 521.02, 'text': 'The size for this is 16 pixels and make sure you have downloaded the OpenSense font and make this home.', 'start': 505.526, 'duration': 15.494}, {'end': 523.222, 'text': "Make sure it's white.", 'start': 522.16, 'duration': 1.062}, {'end': 531.009, 'text': 'So home, services, portfolio, blog, home.', 'start': 527.045, 'duration': 3.964}, {'end': 535.575, 'text': 'And the distance on each links is 40 pixels.', 'start': 532.472, 'duration': 3.103}, {'end': 542.561, 'text': 'So by pressing shift and the right arrow key, it will create a 10 pixels margin.', 'start': 535.715, 'duration': 6.846}, {'end': 547.205, 'text': 'So one, two, three, four, and that will make 40 pixels.', 'start': 542.601, 'duration': 4.604}, {'end': 549.607, 'text': 'So home services.', 'start': 547.745, 'duration': 1.862}, {'end': 553.81, 'text': 'One, two, three, four.', 'start': 552.85, 'duration': 0.96}, {'end': 556.773, 'text': 'Home services.', 'start': 555.912, 'duration': 0.861}, {'end': 560.076, 'text': "Think it's portfolio.", 'start': 558.054, 'duration': 2.022}, {'end': 572.902, 'text': 'portfolio, one, two, three, four, blog, and hire me.', 'start': 561.772, 'duration': 11.13}, {'end': 579.148, 'text': 'Hire me.', 'start': 578.608, 'duration': 0.54}, {'end': 596.79, 'text': "You're going to align this Again, as you can see, we have a baseline grid, 60 pixels from the top.", 'start': 584.673, 'duration': 12.117}, {'end': 602.612, 'text': "We're going to align it correctly like that.", 'start': 598.87, 'duration': 3.742}, {'end': 628.065, 'text': "And we're going to align the navigation links based on this grid.", 'start': 616.276, 'duration': 11.789}, {'end': 632.048, 'text': 'so something like this will like.', 'start': 628.065, 'duration': 3.983}, {'end': 637.611, 'text': 'that will do.', 'start': 632.048, 'duration': 5.563}], 'summary': 'Design specifications include 16px size, 40px distance between links, and 10px margin on shift-right arrow key press.', 'duration': 132.085, 'max_score': 505.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s505526.jpg'}], 'start': 274.461, 'title': 'Creating grid for web design', 'summary': 'Covers creating a 1600 by 660 rectangle and a six by six pixel baseline grid for text alignment, and designing a web layout with grid-based alignment and a navigation bar with specific pixel measurements and font requirements.', 'chapters': [{'end': 382.88, 'start': 274.461, 'title': 'Creating baseline grid for text alignment', 'summary': 'Focuses on creating a 1600 by 660 rectangle and a six by six pixel baseline grid to align text and other elements, using the rectangular tool and defining a pattern in photoshop.', 'duration': 108.419, 'highlights': ['Creating a 1600 by 660 rectangle Using the rectangle tool to create a 1600 by 660 rectangle for alignment purposes.', 'Creating a six by six pixel baseline grid Using the rectangular marquee tool to create a six by six pixel grid, defining it as a pattern, and naming it for alignment purposes.']}, {'end': 637.611, 'start': 382.88, 'title': 'Designing web layout with grid and navigation', 'summary': 'Covers the process of designing a web layout with grid-based alignment and creating a navigation bar with specific pixel measurements and font requirements.', 'duration': 254.731, 'highlights': ['The process demonstrates how to align elements with a baseline grid and maintain consistent margins of 60 pixels, creating a visually balanced web layout.', 'The navigation bar is designed with specific font size (16 pixels) and color (white), with each link separated by 40 pixels, ensuring uniformity and visual appeal.', 'The tutorial emphasizes the use of the OpenSans font and the creation of a navigation bar with links such as home, services, portfolio, blog, and hire me, providing practical guidance for creating a functional website layout.']}], 'duration': 363.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s274461.jpg', 'highlights': ['Creating a 1600 by 660 rectangle for alignment purposes.', 'Creating a six by six pixel baseline grid for alignment purposes.', 'Demonstrating how to align elements with a baseline grid and maintain consistent margins of 60 pixels.', 'Designing a navigation bar with specific font size (16 pixels) and color (white), with each link separated by 40 pixels.', 'Emphasizing the use of the OpenSans font and the creation of a navigation bar with specific links.']}, {'end': 1070.761, 'segs': [{'end': 743.589, 'src': 'embed', 'start': 637.611, 'weight': 0, 'content': [{'end': 655.972, 'text': "and for the this links, we're going to group this normal and change the fill color to 60, 60 and for this home,", 'start': 637.611, 'duration': 18.361}, {'end': 660.795, 'text': 'this will be the active or the hover state.', 'start': 655.972, 'duration': 4.823}, {'end': 670.78, 'text': "zoom in and we're going to place a underline which is using line tool,", 'start': 660.795, 'duration': 9.985}, {'end': 690.621, 'text': 'create a line and change the fill color to white and place it four pixels below one, two, three, four, and that will do in the header section.', 'start': 670.78, 'duration': 19.841}, {'end': 695.064, 'text': "so make sure it's in the inside.", 'start': 690.621, 'duration': 4.443}, {'end': 698.606, 'text': 'next one will be the welcome section.', 'start': 695.064, 'duration': 3.542}, {'end': 704.971, 'text': 'so, as you can see, hola, this is the heading and this is the text.', 'start': 698.606, 'duration': 6.365}, {'end': 721.215, 'text': "so for the heading, we're going to make it light and the font size will be 72 pt.", 'start': 704.971, 'duration': 16.244}, {'end': 743.589, 'text': 'so, hola, and turn on the baseline grid and place it over right there, something like that, and I think we need to double the spacing.', 'start': 721.215, 'duration': 22.374}], 'summary': 'Designing webpage: fill color changed, heading font size 72 pt, double spacing.', 'duration': 105.978, 'max_score': 637.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s637611.jpg'}, {'end': 956.338, 'src': 'embed', 'start': 818.937, 'weight': 3, 'content': [{'end': 832.479, 'text': 'yes, so by holding shift and up arrow key I mean down arrow key starting from this baseline here like that.', 'start': 818.937, 'duration': 13.542}, {'end': 839.363, 'text': 'Press it three times.', 'start': 838.282, 'duration': 1.081}, {'end': 841.724, 'text': 'One, two, three.', 'start': 839.583, 'duration': 2.141}, {'end': 851.77, 'text': 'As you can see, it is properly aligned and the line height for this one, you can view it right here.', 'start': 841.924, 'duration': 9.846}, {'end': 856.525, 'text': 'The line height is 36.', 'start': 851.83, 'duration': 4.695}, {'end': 863.13, 'text': "so now that we have it, it's time to place the button.", 'start': 856.525, 'duration': 6.605}, {'end': 879.561, 'text': "so for the button, it's very simple create a new layer and group it button and make the open sense to bold and the font size to 16,", 'start': 863.13, 'duration': 16.431}, {'end': 882.903, 'text': "and let's make it what's the text we're placing.", 'start': 879.561, 'duration': 3.342}, {'end': 892.99, 'text': 'view my work, so view my work easy as that.', 'start': 882.903, 'duration': 10.087}, {'end': 899.714, 'text': 'and so here is my the way i create a button.', 'start': 892.99, 'duration': 6.724}, {'end': 905.597, 'text': "i can press ctrl t to transform and i'm looking at the information panel.", 'start': 899.714, 'duration': 5.883}, {'end': 908.087, 'text': 'The current width now is on 112..', 'start': 906.465, 'duration': 1.622}, {'end': 910.89, 'text': "I'm going to add a padding on left and right 20 pixels.", 'start': 908.087, 'duration': 2.803}, {'end': 911.871, 'text': 'That will make it 152 pixels.', 'start': 910.91, 'duration': 0.961}, {'end': 914.294, 'text': "In height, I'm going to stay with 44 pixels.", 'start': 911.891, 'duration': 2.403}, {'end': 936.081, 'text': 'Grab the rounded rectangle tool and set the radius to two pixels.', 'start': 930.376, 'duration': 5.705}, {'end': 938.583, 'text': 'Make sure there is no stroke.', 'start': 936.781, 'duration': 1.802}, {'end': 945.709, 'text': "And for the field color, let's make it..", 'start': 940.384, 'duration': 5.325}, {'end': 949.012, 'text': "What's the field color again? This color.", 'start': 945.709, 'duration': 3.303}, {'end': 956.338, 'text': 'So change it like that and make this..', 'start': 951.934, 'duration': 4.404}], 'summary': 'Align text with line height 36, create button with 152x44 size and 16 font size.', 'duration': 137.401, 'max_score': 818.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s818937.jpg'}], 'start': 637.611, 'title': 'Ui design and button creation', 'summary': 'Covers ui design including styling, layout, and text alignment. it also explains creating buttons with specific font settings, dimensions, and precise layout.', 'chapters': [{'end': 818.937, 'start': 637.611, 'title': 'Ui design: styling and layout', 'summary': 'Covers the styling and layout of a ui design, such as changing fill colors, creating underlines, adjusting font sizes, and spacing for a welcome section.', 'duration': 181.326, 'highlights': ['Creating underlines using the line tool and changing the fill color to white, placed four pixels below the text in the header section.', 'Adjusting the heading font size to 72 pt, enabling the baseline grid, and doubling the spacing to 60 pixels for the welcome section.', 'Grouping links, changing fill color to 60, 60, and setting the active or hover state for the home section.']}, {'end': 908.087, 'start': 818.937, 'title': 'Text alignment and button creation', 'summary': 'Explains how to align text using the shift and arrow keys and create a button with specific font settings and dimensions, including a 36 line height and 112 width for the button.', 'duration': 89.15, 'highlights': ['The line height for the text is 36, ensuring proper alignment and spacing.', "The button font size is set to 16, and the text 'view my work' is placed within the button.", 'The current width of the button is 112, and it can be transformed using the ctrl t command.']}, {'end': 1070.761, 'start': 908.087, 'title': 'Designing rounded rectangle button', 'summary': 'Covers designing a rounded rectangle button with dimensions 152x44 pixels, aligning it below the text, and adjusting the spacing by 120 pixels, ensuring a precise layout.', 'duration': 162.674, 'highlights': ['Designing a rounded rectangle button with dimensions 152x44 pixels', 'Aligning the button below the text and adjusting the spacing by 120 pixels', 'Adding padding of 20 pixels on left and right to make it 152 pixels']}], 'duration': 433.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s637611.jpg', 'highlights': ['Creating underlines using the line tool and changing the fill color to white, placed four pixels below the text in the header section.', 'Grouping links, changing fill color to 60, 60, and setting the active or hover state for the home section.', 'Adjusting the heading font size to 72 pt, enabling the baseline grid, and doubling the spacing to 60 pixels for the welcome section.', 'The line height for the text is 36, ensuring proper alignment and spacing.', 'Designing a rounded rectangle button with dimensions 152x44 pixels', "The button font size is set to 16, and the text 'view my work' is placed within the button."]}, {'end': 2679.938, 'segs': [{'end': 1117.413, 'src': 'embed', 'start': 1074.242, 'weight': 4, 'content': [{'end': 1075.262, 'text': 'Something like that.', 'start': 1074.242, 'duration': 1.02}, {'end': 1087.868, 'text': "So that's it for the header area in the banner.", 'start': 1084.266, 'duration': 3.602}, {'end': 1093.658, 'text': 'And what we can do is to add something on the background.', 'start': 1089.275, 'duration': 4.383}, {'end': 1098.542, 'text': "So as for me, I'm from Philippines.", 'start': 1094.519, 'duration': 4.023}, {'end': 1107.348, 'text': "I'm going to plan a silhouette of a popular place or common in Philippines, which is the Luneta Park.", 'start': 1098.762, 'duration': 8.586}, {'end': 1117.413, 'text': 'So on the resource I provided it, So download it or anything maybe on your country.', 'start': 1109.049, 'duration': 8.364}], 'summary': 'Planning to add a silhouette of luneta park, a popular place in the philippines, to the background of the banner.', 'duration': 43.171, 'max_score': 1074.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s1074242.jpg'}, {'end': 1191.491, 'src': 'heatmap', 'start': 1149.253, 'weight': 0.758, 'content': [{'end': 1165.046, 'text': 'i will pump up the white and the black, so something like that, and going to copy this ctrl, shift c to copy,', 'start': 1149.253, 'duration': 15.793}, {'end': 1184.949, 'text': "merge and head over to this right here and for the base i'm going to paste it now i'm going to resize this one, something like that,", 'start': 1165.046, 'duration': 19.903}, {'end': 1191.491, 'text': 'raise it over right there.', 'start': 1184.949, 'duration': 6.542}], 'summary': 'Pumping up the white and black, resizing and merging images.', 'duration': 42.238, 'max_score': 1149.253, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s1149253.jpg'}, {'end': 1611.774, 'src': 'embed', 'start': 1559.209, 'weight': 0, 'content': [{'end': 1570.853, 'text': "So using the Rectangle Marquee tool, I'm going to Move tool, hit this, I mean this one, Align, as well as here.", 'start': 1559.209, 'duration': 11.644}, {'end': 1577.715, 'text': 'And do the same here for the camera.', 'start': 1575.414, 'duration': 2.301}, {'end': 1584.383, 'text': "Now let's place the heading and text.", 'start': 1582.142, 'duration': 2.241}, {'end': 1588.365, 'text': 'So web design, mobile design, photography.', 'start': 1585.083, 'duration': 3.282}, {'end': 1593.567, 'text': 'And for the color for that will be 11111.', 'start': 1590.225, 'duration': 3.342}, {'end': 1598.789, 'text': 'And the size will be 24.', 'start': 1593.567, 'duration': 5.222}, {'end': 1599.769, 'text': 'So web design.', 'start': 1598.789, 'duration': 0.98}, {'end': 1603.671, 'text': 'Just place it here.', 'start': 1599.789, 'duration': 3.882}, {'end': 1611.774, 'text': "Turn on the baseline grid because it's very helpful.", 'start': 1606.192, 'duration': 5.582}], 'summary': 'Using design tools to align elements and place text for web design, mobile design, and photography, with color 11111 and size 24.', 'duration': 52.565, 'max_score': 1559.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s1559209.jpg'}, {'end': 1760.984, 'src': 'embed', 'start': 1701.93, 'weight': 2, 'content': [{'end': 1726.916, 'text': 'So the font size for that is 15 pt and the color will be 66666, and place it right here and go to type paste the remix zoom,', 'start': 1701.93, 'duration': 24.986}, {'end': 1741.691, 'text': "let's see so about four lines of text And for the line height of this one, by selecting all and going right here we can adjust it.", 'start': 1726.916, 'duration': 14.775}, {'end': 1745.434, 'text': "We're going to make the line height.", 'start': 1742.932, 'duration': 2.502}, {'end': 1760.984, 'text': "On this baseline grid, let's adjust the line height to make it like that so it is aligned properly.", 'start': 1748.256, 'duration': 12.728}], 'summary': 'Font size: 15pt, color: #66666, 4 lines of text, adjusting line height for proper alignment.', 'duration': 59.054, 'max_score': 1701.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s1701930.jpg'}, {'end': 2096.563, 'src': 'embed', 'start': 2060.042, 'weight': 3, 'content': [{'end': 2063.042, 'text': "Here, designer, tools, Photoshop, it's the same.", 'start': 2060.042, 'duration': 3}, {'end': 2069.724, 'text': "For the button, let's create that one.", 'start': 2065.362, 'duration': 4.362}, {'end': 2072.563, 'text': "What's the text? View project.", 'start': 2070.603, 'duration': 1.96}, {'end': 2075.025, 'text': 'Create a button.', 'start': 2074.083, 'duration': 0.942}, {'end': 2079.366, 'text': 'The text will be view project.', 'start': 2077.045, 'duration': 2.321}, {'end': 2086.407, 'text': 'Make it bold and make it white.', 'start': 2080.446, 'duration': 5.961}, {'end': 2093.46, 'text': 'Ctrl T to show the size of the width, so 88 plus 40 pixels.', 'start': 2088.038, 'duration': 5.422}, {'end': 2094.702, 'text': 'that will count as 128.', 'start': 2093.46, 'duration': 1.242}, {'end': 2096.563, 'text': 'so 128 by 44, and change the color to this bad boy.', 'start': 2094.702, 'duration': 1.861}], 'summary': "Designer creates a 128x44 button with 'view project' text in white and bold.", 'duration': 36.521, 'max_score': 2060.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s2060042.jpg'}, {'end': 2530.734, 'src': 'embed', 'start': 2477.338, 'weight': 1, 'content': [{'end': 2485.542, 'text': 'And you will have this complete MacBook Pro, a flat MacBook Pro.', 'start': 2477.338, 'duration': 8.204}, {'end': 2497.555, 'text': 'so where is this one?', 'start': 2491.51, 'duration': 6.045}, {'end': 2514.21, 'text': 'just delete that and you have something like this and select all and make it a convert to smart object, then duplicate it on our 160 grid.', 'start': 2497.555, 'duration': 16.655}, {'end': 2530.734, 'text': "Now we can resize this bad boy and we're going to place it like that.", 'start': 2522.609, 'duration': 8.125}], 'summary': 'Demonstrating the process of creating and resizing a macbook pro image.', 'duration': 53.396, 'max_score': 2477.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s2477338.jpg'}], 'start': 1074.242, 'title': 'Designing web and graphic elements', 'summary': 'Discusses designing banners with background images and text, duplicating and aligning design elements for web, mobile, and photography, creating web design portfolios, and designing macbook pro layouts and flat designs using specific tools and techniques.', 'chapters': [{'end': 1330.467, 'start': 1074.242, 'title': 'Designing banner with background image and text', 'summary': 'Discusses how to design a banner with a background image, including specific steps such as selecting a popular place silhouette, adjusting levels and blending modes, and adding services in the services section.', 'duration': 256.225, 'highlights': ['The speaker shares the process of selecting a popular place silhouette to use as the background image, such as Luneta Park for the Philippines or the Eiffel Tower for Paris.', 'Detailed steps are provided for adjusting levels, blending modes, and opacity of the background image to achieve the desired visual effect.', "The process of adding services in the services section is outlined, including creating a new layer, grouping it, and naming it 'services', followed by placing services such as web design, mobile design, and photography."]}, {'end': 1701.93, 'start': 1331.787, 'title': 'Web, mobile, and photography design tutorial', 'summary': 'Demonstrates the process of duplicating and aligning design elements for web, mobile, and photography, while also specifying dimensions and color codes, emphasizing the importance of baseline grid for consistency and alignment.', 'duration': 370.143, 'highlights': ['The tutorial covers the process of duplicating and aligning design elements for web, mobile, and photography, specifying dimensions and color codes for each, and emphasizing the use of baseline grid for consistency and alignment.', 'The speaker provides specific instructions for resizing design elements, such as setting the browser and iPhone icons to 48 pixels and ensuring alignment and consistency using a 960 grid system.', 'The chapter emphasizes the importance of using the baseline grid for alignment and consistency in design, showcasing its application in placing and aligning text elements for web, mobile, and photography design.', 'The tutorial includes the use of specific color codes (e.g., 11111) and font sizes (e.g., 24) for the text elements, reinforcing the attention to detail and precision in the design process.']}, {'end': 1958.659, 'start': 1701.93, 'title': 'Web design portfolio creation', 'summary': 'Details the process of creating a web design portfolio, including font size, color, line height adjustments, and placement of text and elements, with a focus on creating a read more link and utilizing a specific color scheme.', 'duration': 256.729, 'highlights': ['The process involves adjusting font size to 15 pt and color to 66666, and aligning text properly with line height adjustments.', "Creation of a 'read more' link with a red fill color is emphasized for the portfolio layout.", 'Utilizing a specific color scheme (E5, E5) and centering images with dimensions of 1600 by 696 pixels are key aspects of the portfolio creation process.', 'The chapter also discusses the duplication and placement of text and elements, along with considerations for mobile display and the use of regular or light font.', 'Creating a portfolio group and utilizing a 120-pixel spacing are part of the detailed process for web design portfolio creation.']}, {'end': 2203.215, 'start': 1960.502, 'title': 'Designing macbook pro layout', 'summary': 'Covers duplicating text, adjusting sizes and colors, creating a button with specific dimensions and alignment, and designing a macbook pro layout using photoshop.', 'duration': 242.713, 'highlights': ["Creating a button with the text 'View project' and specific dimensions of 128 by 44 pixels, aligning it properly with the baseline grid, and using a specific color.", 'Adjusting text sizes and colors, including 36 pt for the main text, 13 pt for the date, and 11 pt for another element.', 'Using Photoshop to design a MacBook Pro layout by tracing it with the Rectangle Tool.']}, {'end': 2679.938, 'start': 2203.495, 'title': 'Creating flat macbook pro design', 'summary': 'Demonstrates how to create a flat macbook pro design using adobe photoshop, including specifying color schemes and dimensions, and duplicating and resizing the design according to the 960 grid layout.', 'duration': 476.443, 'highlights': ['The chapter demonstrates how to create a flat MacBook Pro design using Adobe Photoshop, including specifying color schemes and dimensions, and duplicating and resizing the design according to the 960 grid layout.', 'The speaker explains the process of creating the base and front parts of the MacBook Pro design using the Rounded Rectangle Tool and the Pen Tool, with specific dimensions and color codes provided (e.g., C2C2 and E1E1).', 'The speaker guides through the steps of duplicating and resizing the design to fit the 960 grid layout, providing details on aligning and adjusting the size of the design.', 'The chapter also covers the process of creating a screenshot and incorporating it into the design, along with the steps for masking and aligning the design within the 960 grid layout.']}], 'duration': 1605.696, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s1074242.jpg', 'highlights': ['The tutorial covers the process of duplicating and aligning design elements for web, mobile, and photography, specifying dimensions and color codes for each, and emphasizing the use of baseline grid for consistency and alignment.', 'The chapter demonstrates how to create a flat MacBook Pro design using Adobe Photoshop, including specifying color schemes and dimensions, and duplicating and resizing the design according to the 960 grid layout.', 'The process involves adjusting font size to 15 pt and color to 66666, and aligning text properly with line height adjustments.', "Creating a button with the text 'View project' and specific dimensions of 128 by 44 pixels, aligning it properly with the baseline grid, and using a specific color.", 'The speaker shares the process of selecting a popular place silhouette to use as the background image, such as Luneta Park for the Philippines or the Eiffel Tower for Paris.']}, {'end': 3278.825, 'segs': [{'end': 2778.037, 'src': 'embed', 'start': 2680.138, 'weight': 0, 'content': [{'end': 2684.96, 'text': 'Just create a shape, something 310.', 'start': 2680.138, 'duration': 4.822}, {'end': 2687.921, 'text': 'You can see my alignment here.', 'start': 2684.96, 'duration': 2.961}, {'end': 2696.624, 'text': 'The spacing is thin pixels.', 'start': 2691.182, 'duration': 5.442}, {'end': 2704.042, 'text': "310 on the small blocks and for this wide block, it's 310.", 'start': 2696.644, 'duration': 7.398}, {'end': 2706.784, 'text': 'so double the size.', 'start': 2704.042, 'duration': 2.742}, {'end': 2721.773, 'text': 'so 310 plus 310 plus this 10 pixels that will count as 610 in width, but the height will stay the same.', 'start': 2706.784, 'duration': 14.989}, {'end': 2735.109, 'text': 'and for this full width and this big block here that will be 610 by 610, I mean 640 by 630.', 'start': 2721.773, 'duration': 13.336}, {'end': 2741.131, 'text': 'and what you can do is just play some screenshots.', 'start': 2735.109, 'duration': 6.022}, {'end': 2747.653, 'text': 'and for the and for the font here.', 'start': 2741.131, 'duration': 6.522}, {'end': 2756.536, 'text': "so i'm, i'm using helvetica for this one, but for this computer i don't have it.", 'start': 2747.653, 'duration': 8.883}, {'end': 2765.228, 'text': 'so yeah, and for the icons still the same, and the width for that is the original size.', 'start': 2756.536, 'duration': 8.692}, {'end': 2772.974, 'text': 'so 32 by 32 and place it on the top, i mean in the bottom left corner.', 'start': 2765.228, 'duration': 7.746}, {'end': 2778.037, 'text': 'so 20 pixels, one, two, one, two, one, two, one, two.', 'start': 2772.974, 'duration': 5.063}], 'summary': 'Creating shapes of specific dimensions, using pixel measurements and alignment, adjusting font and icon sizes.', 'duration': 97.899, 'max_score': 2680.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s2680138.jpg'}, {'end': 2869.183, 'src': 'embed', 'start': 2831.856, 'weight': 5, 'content': [{'end': 2839.74, 'text': 'now that we have it, we can now create another folder and name it contact.', 'start': 2831.856, 'duration': 7.884}, {'end': 2852.277, 'text': "for that contact We're going to use this font size here 72, open size.", 'start': 2839.74, 'duration': 12.537}, {'end': 2862.501, 'text': 'You can say hello, make it one, one, one, one, one, one.', 'start': 2852.297, 'duration': 10.204}, {'end': 2863.981, 'text': '72, open size, light.', 'start': 2862.521, 'duration': 1.46}, {'end': 2866.422, 'text': "It's light.", 'start': 2865.642, 'duration': 0.78}, {'end': 2869.183, 'text': "It's good, it's light.", 'start': 2867.922, 'duration': 1.261}], 'summary': "Creating a new folder named 'contact' with font size 72 and light weight.", 'duration': 37.327, 'max_score': 2831.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s2831856.jpg'}, {'end': 3184.795, 'src': 'embed', 'start': 3104.222, 'weight': 6, 'content': [{'end': 3108.043, 'text': 'And we are good to download this.', 'start': 3104.222, 'duration': 3.821}, {'end': 3112.924, 'text': 'And place it here.', 'start': 3110.044, 'duration': 2.88}, {'end': 3126.208, 'text': 'And resize this bad boy to 32 pixels, I think.', 'start': 3119.666, 'duration': 6.542}, {'end': 3132.95, 'text': "Let's see if it's 32.", 'start': 3129.269, 'duration': 3.681}, {'end': 3143.316, 'text': "or I think it's 48, something like that.", 'start': 3132.95, 'duration': 10.366}, {'end': 3159.026, 'text': 'Align it, change the color overlay to this one, the red color.', 'start': 3144.737, 'duration': 14.289}, {'end': 3170.009, 'text': 'And do the same for Facebook, Twitter, this Instagram and Dribbble.', 'start': 3162.325, 'duration': 7.684}, {'end': 3184.795, 'text': "So to make it quick, I'm going to duplicate this group to show you and raise it right over there.", 'start': 3170.889, 'duration': 13.906}], 'summary': 'Resizing to 32 pixels, changing color overlay, and duplicating for efficiency.', 'duration': 80.573, 'max_score': 3104.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s3104222.jpg'}, {'end': 3278.825, 'src': 'embed', 'start': 3248.816, 'weight': 4, 'content': [{'end': 3258.625, 'text': 'You have a nicely laid out flat portfolio design which is very hot now on the web design industry.', 'start': 3248.816, 'duration': 9.809}, {'end': 3261.248, 'text': 'So flat everywhere.', 'start': 3259.766, 'duration': 1.482}, {'end': 3271.437, 'text': "so i'm going to provide a psd for this one, for the this version and this version.", 'start': 3263.809, 'duration': 7.628}, {'end': 3278.825, 'text': "so that's it, guys, and i hope you learned something from this tutorial and i'll see you guys on the next one.", 'start': 3271.437, 'duration': 7.388}], 'summary': 'Tutorial on flat portfolio design with psd provided.', 'duration': 30.009, 'max_score': 3248.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s3248816.jpg'}], 'start': 2680.138, 'title': 'Design element sizing and flat portfolio design', 'summary': 'Discusses the sizing and placement of design elements, focusing on specific pixel measurements and font/icon dimensions. it also covers the creation of a flat portfolio design with modern web design approach and emphasizes the trend of flat design in the web design industry.', 'chapters': [{'end': 2778.037, 'start': 2680.138, 'title': 'Design element sizing and placement', 'summary': 'Discusses the sizing and placement of design elements, with a focus on width and alignment, using specific pixel measurements such as 310, 610, 640, and 630, as well as the font and icon dimensions of 32 by 32 pixels and the placement of 20 pixels from the bottom left corner.', 'duration': 97.899, 'highlights': ['The wide block has a width of 610, while the full-width block has dimensions of 640 by 630, showcasing specific measurements for design elements.', 'The font used is helvetica, and the icons maintain their original size of 32 by 32 pixels, demonstrating consistency in design elements.', 'The icons are placed 20 pixels from the bottom left corner, emphasizing precise placement of design elements.', 'The spacing is thin at 310 pixels, and there is a mention of alignment, indicating attention to detail in design layout.']}, {'end': 3278.825, 'start': 2778.037, 'title': 'Flat portfolio design tutorial', 'summary': 'Covers the creation of a flat portfolio design, including font sizes, colors, and layout guidelines, aiming to provide a modern web design approach. it also highlights the use of specific font sizes, colors, and icon dimensions, emphasizing the trend of flat design in the web design industry.', 'duration': 500.788, 'highlights': ['The tutorial covers the creation of a flat portfolio design, emphasizing the use of font sizes, colors, and layout guidelines for a modern web design approach.', "Specific font sizes and colors are discussed, such as a font size of 72 for 'hello,' the color red for 'hello,' and a text color of 123456666, providing clear design specifications.", 'The dimensions of icons are highlighted, with specific resizing instructions for the mail icon, Facebook, Twitter, Instagram, and Dribbble, showcasing the attention to detail in the design process.', 'The tutorial emphasizes the trend of flat design in the web design industry, stating the relevance of the presented portfolio design in the current web design landscape.']}], 'duration': 598.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4M8FDqVie2s/pics/4M8FDqVie2s2680138.jpg', 'highlights': ['The full-width block has dimensions of 640 by 630, showcasing specific measurements for design elements.', 'The font used is helvetica, and the icons maintain their original size of 32 by 32 pixels, demonstrating consistency in design elements.', 'The icons are placed 20 pixels from the bottom left corner, emphasizing precise placement of design elements.', 'The spacing is thin at 310 pixels, and there is a mention of alignment, indicating attention to detail in design layout.', 'The tutorial covers the creation of a flat portfolio design, emphasizing the use of font sizes, colors, and layout guidelines for a modern web design approach.', "Specific font sizes and colors are discussed, such as a font size of 72 for 'hello,' the color red for 'hello,' and a text color of 123456666, providing clear design specifications.", 'The dimensions of icons are highlighted, with specific resizing instructions for the mail icon, Facebook, Twitter, Instagram, and Dribbble, showcasing the attention to detail in the design process.', 'The tutorial emphasizes the trend of flat design in the web design industry, stating the relevance of the presented portfolio design in the current web design landscape.']}], 'highlights': ['The tutorial covers the process of duplicating and aligning design elements for web, mobile, and photography, specifying dimensions and color codes for each, and emphasizing the use of baseline grid for consistency and alignment.', 'The tutorial demonstrates creating a flat portfolio design with sections for web design, mobile, and photography, along with a contact section displaying social media links.', 'The chapter involves setting up a web design layout, including downloading resources, adjusting canvas size, and selecting a color scheme for the tutorial.', 'The tutorial provides two portfolio designs, showcasing grid images with project representation icons.', 'The process involves adjusting font size to 15 pt and color to 66666, and aligning text properly with line height adjustments.', 'The tutorial emphasizes the trend of flat design in the web design industry, stating the relevance of the presented portfolio design in the current web design landscape.', 'Creating a 1600 by 660 rectangle for alignment purposes.', 'The full-width block has dimensions of 640 by 630, showcasing specific measurements for design elements.', 'The spacing is thin at 310 pixels, and there is a mention of alignment, indicating attention to detail in design layout.', 'Designing a navigation bar with specific font size (16 pixels) and color (white), with each link separated by 40 pixels.']}