title
Flat Mobile App Design in Photoshop CC - Weather App

description
http://goo.gl/BBse40 - Design + Code a Professional Android App from Scratch Project files: http://designcourse.com/videos/flat-mobile-app-design-in-photoshop-cc/17 - Learn how to design a beautifully flat mobile app design for a fictional weather app in Adobe Photoshop CC. Then learn how to take the final design and place it into a 3d perspective phone. 3D Phone Link/Credit: http://www.pixeden.com/psd-mock-up-templates/3d-view-iphone-5-psd-vector-mockup Water Link/Credit: http://galaxiesanddust.deviantart.com/art/Raindrops-Texture-395338613 Follow us: Facebook: http://www.facebook.com/designcourses Twitter: http://twitter.com/designcoursecom Google+: http://plus.google.com/+DesignCourse - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Flat Mobile App Design in Photoshop CC - Weather App', 'heatmap': [{'end': 1026.15, 'start': 988.896, 'weight': 0.728}, {'end': 1590.443, 'start': 1521.036, 'weight': 0.724}], 'summary': 'Focuses on designing a fictional weather mobile app, covering weather interfaces, creating icons, illustrating temperature, designing time visualization, creating a weather preview, and designing a weather app in 25 minutes with a 3d view of an iphone psd, emphasizing the engagement with mobile app design.', 'chapters': [{'end': 109.957, 'segs': [{'end': 81.175, 'src': 'embed', 'start': 52.945, 'weight': 0, 'content': [{'end': 57.271, 'text': "but if you're viewing this, maybe three months, four months a year down the road,", 'start': 52.945, 'duration': 4.326}, {'end': 61.196, 'text': 'it may be up already and you could definitely check that out for a more robust course.', 'start': 57.271, 'duration': 3.925}, {'end': 63.46, 'text': "All right, so let's go ahead and get started.", 'start': 61.637, 'duration': 1.823}, {'end': 72.626, 'text': "Okay, so the first thing I want to do, or you're going to want to do, is download the project files, which is in the link below this video,", 'start': 65.259, 'duration': 7.367}, {'end': 75.87, 'text': 'and open up the apptemplate.psd.', 'start': 72.626, 'duration': 3.244}, {'end': 81.175, 'text': 'So we have the status bar up here, which is in its own group, and then just the background layer right here.', 'start': 76.51, 'duration': 4.665}], 'summary': 'Instruction to download project files and open apptemplate.psd for status bar and background layer.', 'duration': 28.23, 'max_score': 52.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE52945.jpg'}], 'start': 12.386, 'title': 'Designing a weather mobile app', 'summary': 'Emphasizes designing a fictional weather mobile app, providing guidance on the design process, and offering project file downloads. the video is the 11th of the year, emphasizing engagement with mobile app design.', 'chapters': [{'end': 109.957, 'start': 12.386, 'title': 'Designing weather mobile app', 'summary': 'Focuses on designing a fictional weather mobile app, providing guidance on the design process and offering project file downloads. the video is the 11th of the year, emphasizing engagement with mobile app design.', 'duration': 97.571, 'highlights': ['The video is the 11th of the year, emphasizing engagement with mobile app design. The video marks the 11th of the year, highlighting the focus on mobile app design for a fictional weather app and encouraging engagement with the design process.', 'Guidance on the design process and offering project file downloads. The chapter provides guidance on the design process for a mobile app, offering project file downloads to facilitate hands-on learning and practical application.']}], 'duration': 97.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE12386.jpg', 'highlights': ['The video marks the 11th of the year, highlighting the focus on mobile app design for a fictional weather app and encouraging engagement with the design process.', 'The chapter provides guidance on the design process for a mobile app, offering project file downloads to facilitate hands-on learning and practical application.']}, {'end': 484.054, 'segs': [{'end': 242.483, 'src': 'embed', 'start': 211.946, 'weight': 5, 'content': [{'end': 214.207, 'text': 'well yeah, shift and alt will get you right there.', 'start': 211.946, 'duration': 2.261}, {'end': 222.789, 'text': "okay. and then we're going to take the direct selection tool over here in this window that pops up or up here.", 'start': 214.207, 'duration': 8.582}, {'end': 231.611, 'text': "we're going to get rid of the foreground or the fill rather, and we're going to give it a white.", 'start': 222.789, 'duration': 8.822}, {'end': 232.651, 'text': "let's try one pixel.", 'start': 231.611, 'duration': 1.04}, {'end': 233.972, 'text': 'I may.', 'start': 232.651, 'duration': 1.321}, {'end': 238.039, 'text': 'I may put 0.8 there All right.', 'start': 233.972, 'duration': 4.067}, {'end': 241.062, 'text': 'And then we can move this up as needed.', 'start': 238.86, 'duration': 2.202}, {'end': 242.483, 'text': 'All right.', 'start': 241.082, 'duration': 1.401}], 'summary': 'Using shift and alt, changed fill to white, 1 pixel, moved up as needed.', 'duration': 30.537, 'max_score': 211.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE211946.jpg'}, {'end': 305.102, 'src': 'embed', 'start': 270.349, 'weight': 4, 'content': [{'end': 274.453, 'text': 'I want everything to be organized in layer groups here.', 'start': 270.349, 'duration': 4.104}, {'end': 278.417, 'text': "I'll just call this rain alright.", 'start': 274.453, 'duration': 3.964}, {'end': 282.814, 'text': 'so now we can move on I basically over here to the right.', 'start': 278.417, 'duration': 4.397}, {'end': 287.776, 'text': "I'm gonna have a water or like basically water drop icon.", 'start': 282.814, 'duration': 4.962}, {'end': 295.658, 'text': "so what we're gonna do is zoom up here to 100% and you can always hit ctrl 1 to get there automatically.", 'start': 287.776, 'duration': 7.882}, {'end': 303.181, 'text': "I we're gonna go to view, show grid and then view.", 'start': 295.658, 'duration': 7.523}, {'end': 305.102, 'text': 'make sure snap to grid is on.', 'start': 303.181, 'duration': 1.921}], 'summary': 'Organize design in layer groups. create water drop icon at 100% zoom with grid and snap to grid on.', 'duration': 34.753, 'max_score': 270.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE270349.jpg'}, {'end': 367.361, 'src': 'embed', 'start': 340.171, 'weight': 0, 'content': [{'end': 343.915, 'text': 'and with the Direct Selection tool, hit CTRL-C to copy.', 'start': 340.171, 'duration': 3.744}, {'end': 347.839, 'text': "We're going to delete that layer, and then CTRL-V to paste.", 'start': 343.935, 'duration': 3.904}, {'end': 353.125, 'text': 'So the paste is on a layer and it all becomes one single layer, basically a shape layer.', 'start': 348.34, 'duration': 4.785}, {'end': 360.838, 'text': "Alright, so then what we want to do is right-click, we'll duplicate that again, I'm gonna move it right here.", 'start': 353.145, 'duration': 7.693}, {'end': 367.361, 'text': "I'm gonna temporarily just change the color to the background, so double click on there to get the color picker up,", 'start': 360.898, 'duration': 6.463}], 'summary': 'Using direct selection tool, ctrl-c to copy, ctrl-v to paste, and duplicate layer to change color.', 'duration': 27.19, 'max_score': 340.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE340171.jpg'}], 'start': 109.957, 'title': 'Weather interface and icons', 'summary': 'Covers layer blend modes and opacity adjustments for weather interfaces, emphasizing the need for multiple assets. it also explains the process of creating weather icons using adobe photoshop, highlighting the importance of layer organization and use of tools.', 'chapters': [{'end': 161.615, 'start': 109.957, 'title': 'Layer blend modes for weather interface', 'summary': 'Explains the use of layer blend modes and opacity adjustments to create different weather interfaces, such as for rain, in app development, emphasizing the need to provide multiple assets for different weather conditions.', 'duration': 51.658, 'highlights': ["Using layer blend modes like 'screen' and adjusting opacity to signify different weather conditions is crucial for creating weather interfaces in app development.", "It's essential to provide multiple assets for different weather conditions, such as sunny, cloudy, and rainy, when working with app developers.", 'Adjusting the interface for rainy weather by utilizing layer blend modes and opacity settings can enhance the user experience and realism of the app.']}, {'end': 484.054, 'start': 161.615, 'title': 'Creating weather icons', 'summary': 'Demonstrates the process of creating weather icons, including a temperature icon and a water drop icon, using adobe photoshop, emphasizing layer organization and use of tools.', 'duration': 322.439, 'highlights': ['The chapter demonstrates the process of creating weather icons using Adobe Photoshop, including a temperature icon and a water drop icon.', 'The narrator emphasizes the importance of layer organization and utilizes tools such as the Ellipse tool, Direct Selection tool, and shape tools in Adobe Photoshop.', 'The chapter provides step-by-step instructions for duplicating, flipping, and manipulating shapes to create the water drop icon, highlighting the use of shortcuts and techniques for efficient design.', 'The narrator discusses adjusting transparency and merging layers to achieve desired visual effects in the weather icon design process.']}], 'duration': 374.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE109957.jpg', 'highlights': ["Using layer blend modes like 'screen' and adjusting opacity to signify different weather conditions is crucial for creating weather interfaces in app development.", "It's essential to provide multiple assets for different weather conditions, such as sunny, cloudy, and rainy, when working with app developers.", 'Adjusting the interface for rainy weather by utilizing layer blend modes and opacity settings can enhance the user experience and realism of the app.', 'The chapter demonstrates the process of creating weather icons using Adobe Photoshop, including a temperature icon and a water drop icon.', 'The narrator emphasizes the importance of layer organization and utilizes tools such as the Ellipse tool, Direct Selection tool, and shape tools in Adobe Photoshop.', 'The chapter provides step-by-step instructions for duplicating, flipping, and manipulating shapes to create the water drop icon, highlighting the use of shortcuts and techniques for efficient design.', 'The narrator discusses adjusting transparency and merging layers to achieve desired visual effects in the weather icon design process.']}, {'end': 815.468, 'segs': [{'end': 592.71, 'src': 'embed', 'start': 551.588, 'weight': 4, 'content': [{'end': 556.012, 'text': "So I'm just going to type in Cleveland OH.", 'start': 551.588, 'duration': 4.424}, {'end': 560.036, 'text': 'Scale that up just a bit.', 'start': 558.575, 'duration': 1.461}, {'end': 563.279, 'text': "We don't want it to be as big as this text.", 'start': 561.738, 'duration': 1.541}, {'end': 565.702, 'text': 'And I may change this from light to regular.', 'start': 563.8, 'duration': 1.902}, {'end': 581.306, 'text': "alright, and basically I'm going to have a silhouette of the state, so this would be Ohio,", 'start': 572.563, 'duration': 8.743}, {'end': 592.71, 'text': "and I'm going to just use Google Images and I'm off screen here typing this in and I'm, you can do the same thing, use any state you want I,", 'start': 581.306, 'duration': 11.404}], 'summary': 'Designing a silhouette of ohio for a project in cleveland, oh.', 'duration': 41.122, 'max_score': 551.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE551588.jpg'}, {'end': 649.513, 'src': 'embed', 'start': 620.402, 'weight': 1, 'content': [{'end': 622.723, 'text': "And let me go like this so I can see what's going on.", 'start': 620.402, 'duration': 2.321}, {'end': 626.143, 'text': "I'm hitting control Z.", 'start': 624.423, 'duration': 1.72}, {'end': 628.264, 'text': "I'm just letting myself be able to see what's beneath that.", 'start': 626.143, 'duration': 2.121}, {'end': 629.33, 'text': 'All right.', 'start': 629.09, 'duration': 0.24}, {'end': 631.273, 'text': "And then we'll delete that layer.", 'start': 629.751, 'duration': 1.522}, {'end': 635.079, 'text': 'Take this, scale that down a lot.', 'start': 632.135, 'duration': 2.944}, {'end': 637.643, 'text': 'Maybe even more.', 'start': 636.822, 'duration': 0.821}, {'end': 640.127, 'text': 'Select move tool, hit apply.', 'start': 637.663, 'duration': 2.464}, {'end': 640.788, 'text': 'All right.', 'start': 640.147, 'duration': 0.641}, {'end': 641.569, 'text': 'That looks pretty good.', 'start': 640.808, 'duration': 0.761}, {'end': 649.513, 'text': 'So now, if I go ahead and zoom out alright, that looks pretty good.', 'start': 642.29, 'duration': 7.223}], 'summary': 'Digital image editing process, scaling, and applying changes to achieve desired results.', 'duration': 29.111, 'max_score': 620.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE620402.jpg'}, {'end': 714.663, 'src': 'embed', 'start': 682.964, 'weight': 0, 'content': [{'end': 684.704, 'text': 'those outlines all right.', 'start': 682.964, 'duration': 1.74}, {'end': 686.265, 'text': "so we're 10 minutes in.", 'start': 684.704, 'duration': 1.561}, {'end': 687.646, 'text': 'we have the top portion done.', 'start': 686.265, 'duration': 1.381}, {'end': 690.668, 'text': "so we're moving along good down here.", 'start': 687.646, 'duration': 3.022}, {'end': 699.494, 'text': "i i just kind of came up with a random idea as a way to kind of illustrate the temperature that's going to be throughout the day.", 'start': 690.668, 'duration': 8.826}, {'end': 703.957, 'text': 'so what i want to do is take the ellipse tool.', 'start': 699.494, 'duration': 4.463}, {'end': 709.561, 'text': 'oh, first of all, i want to take these layers before we continue and group them up appropriately, appropriately.', 'start': 703.957, 'duration': 5.604}, {'end': 714.663, 'text': "So I'm going to take move tool with layer selected, auto select.", 'start': 710.041, 'duration': 4.622}], 'summary': '10 minutes in, top portion done, random idea for temperature illustration.', 'duration': 31.699, 'max_score': 682.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE682964.jpg'}, {'end': 752.381, 'src': 'embed', 'start': 728.731, 'weight': 5, 'content': [{'end': 737.789, 'text': "Okay So we're going to hit control G and we'll just call this, uh, I don't know.", 'start': 728.731, 'duration': 9.058}, {'end': 739.291, 'text': "I'll just call it rain cloudy, whatever it is.", 'start': 737.809, 'duration': 1.482}, {'end': 740.191, 'text': 'All right.', 'start': 739.871, 'duration': 0.32}, {'end': 742.153, 'text': 'So now what I want to do.', 'start': 740.251, 'duration': 1.902}, {'end': 750.3, 'text': "I'm going to create a new layer at the top here and go ahead and take that ellipse tool, hold, shift and scale up right around here.", 'start': 742.153, 'duration': 8.147}, {'end': 752.381, 'text': 'All right.', 'start': 752.061, 'duration': 0.32}], 'summary': 'Creating a new layer and resizing an ellipse using shift key.', 'duration': 23.65, 'max_score': 728.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE728731.jpg'}, {'end': 815.468, 'src': 'embed', 'start': 785.534, 'weight': 2, 'content': [{'end': 789.116, 'text': "For the size, I'm going to go down to 6 points.", 'start': 785.534, 'duration': 3.582}, {'end': 791.817, 'text': 'And leave it right around here.', 'start': 790.517, 'duration': 1.3}, {'end': 795.079, 'text': "And then I'm going to duplicate that.", 'start': 793.598, 'duration': 1.481}, {'end': 801.057, 'text': 'And you should set up a shortcut for duplicate because we do it so often.', 'start': 796.513, 'duration': 4.544}, {'end': 807.982, 'text': 'And I need to fix mine because my screen recording software uses it.', 'start': 801.817, 'duration': 6.165}, {'end': 814.347, 'text': 'So whenever I try to use that shortcut, it tries to do something else with the application.', 'start': 808.022, 'duration': 6.325}, {'end': 815.468, 'text': 'So I need to fix that.', 'start': 814.387, 'duration': 1.081}], 'summary': 'Adjusting font size to 6 points and setting up a duplicate shortcut for frequent use.', 'duration': 29.934, 'max_score': 785.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE785534.jpg'}], 'start': 484.054, 'title': 'Creating icons and illustrating temperature', 'summary': 'Demonstrates creating a location icon with specific color codes and font styles, and illustrating daily temperature using ellipse and text tools to create a clock-like representation. it also emphasizes the importance of grouping and organizing layers appropriately.', 'chapters': [{'end': 682.964, 'start': 484.054, 'title': 'Creating location icon', 'summary': 'Demonstrates the process of creating a location icon, including scaling text, choosing font styles, and adding color using specific color codes.', 'duration': 198.91, 'highlights': ["The process involves scaling down text, such as 'rain and cloudy' and 'Cleveland OH', to the desired size for the design.", "The tutorial explains the selection of font styles, such as changing the font from 'thin' to 'light' to improve visibility at smaller sizes.", 'Specific color codes, like DCA 966, are utilized to enhance the appearance of the design, demonstrating attention to color details.']}, {'end': 815.468, 'start': 682.964, 'title': 'Illustrating daily temperature', 'summary': 'Discusses the process of illustrating daily temperature using ellipse and text tools to create a clock-like representation, while grouping and organizing layers appropriately.', 'duration': 132.504, 'highlights': ['Using ellipse and text tools to create a clock-like representation of daily temperature.', 'Grouping and organizing layers appropriately to manage the design elements effectively.', 'Utilizing keyboard shortcuts to streamline the design process and improve efficiency.']}], 'duration': 331.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE484054.jpg', 'highlights': ['Demonstrates creating a location icon with specific color codes and font styles.', 'Illustrating daily temperature using ellipse and text tools to create a clock-like representation.', 'Emphasizes the importance of grouping and organizing layers appropriately.', 'Utilizing keyboard shortcuts to streamline the design process and improve efficiency.', 'Specific color codes, like DCA 966, are utilized to enhance the appearance of the design.', "The tutorial explains the selection of font styles, such as changing the font from 'thin' to 'light' to improve visibility at smaller sizes.", "The process involves scaling down text, such as 'rain and cloudy' and 'Cleveland OH', to the desired size for the design."]}, {'end': 1009.107, 'segs': [{'end': 963.371, 'src': 'embed', 'start': 888.456, 'weight': 0, 'content': [{'end': 895.518, 'text': "will change it to regular and I'll take that degree and we'll take down that.", 'start': 888.456, 'duration': 7.062}, {'end': 909.047, 'text': 'I change that to 0.4 for the stroke right and then finally we can Right-click and duplicate that.', 'start': 895.518, 'duration': 13.529}, {'end': 911.629, 'text': "We'll duplicate this a few times, just three more times.", 'start': 909.127, 'duration': 2.502}, {'end': 915.652, 'text': 'And I want these ones to be light.', 'start': 912.97, 'duration': 2.682}, {'end': 921.657, 'text': 'And I want to change them to white.', 'start': 918.374, 'duration': 3.283}, {'end': 924.299, 'text': 'Same thing with this degree.', 'start': 923.178, 'duration': 1.121}, {'end': 926.961, 'text': 'Oops Come over here.', 'start': 924.319, 'duration': 2.642}, {'end': 928.622, 'text': 'Change that to white.', 'start': 927.742, 'duration': 0.88}, {'end': 934.727, 'text': 'And then take the group itself and take the opacity down a little bit.', 'start': 931.044, 'duration': 3.683}, {'end': 938.308, 'text': 'And you know what? I do want to make one more change.', 'start': 936.547, 'duration': 1.761}, {'end': 941.989, 'text': "We'll go back to 72 and change this to extra light.", 'start': 939.108, 'duration': 2.881}, {'end': 944.09, 'text': 'All right.', 'start': 943.81, 'duration': 0.28}, {'end': 949.532, 'text': "So the opacity is at 60% here and I'm going to change it.", 'start': 944.89, 'duration': 4.642}, {'end': 954.694, 'text': 'So, you know, throughout the day, the hottest is usually around, you know, obviously 12 to three.', 'start': 949.632, 'duration': 5.062}, {'end': 957.295, 'text': 'So then it starts to cool down.', 'start': 955.874, 'duration': 1.421}, {'end': 963.371, 'text': "So we'll say 67.", 'start': 958.655, 'duration': 4.716}], 'summary': 'Adjusting stroke to 0.4, duplicating 4 times, setting opacity to 60%, and changing degree to 72 extra light. temperature peaks at 67.', 'duration': 74.915, 'max_score': 888.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE888456.jpg'}], 'start': 816.289, 'title': 'Designing time visualization', 'summary': 'Demonstrates the process of creating a time visualization element, including duplicating and arranging elements, adjusting opacity, and changing text attributes. the final element represents the hottest time of the day at 70% opacity.', 'chapters': [{'end': 1009.107, 'start': 816.289, 'title': 'Designing time visualization', 'summary': 'Demonstrates the process of creating a time visualization element, including duplicating and arranging elements, adjusting opacity, and changing text attributes, with the final element representing the hottest time of the day at 70% opacity.', 'duration': 192.818, 'highlights': ['The process involves duplicating and arranging elements, adjusting opacity, and changing text attributes to create a time visualization element.', 'The final visualization represents the hottest time of the day at 70% opacity.', 'The opacity of the element is adjusted to 60% to signify the cooling down period of the day.', 'Specific times are mentioned, such as 4:30, 67, and 55, to indicate the progression of the day.']}], 'duration': 192.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE816289.jpg', 'highlights': ['The process involves duplicating and arranging elements, adjusting opacity, and changing text attributes to create a time visualization element.', 'The final visualization represents the hottest time of the day at 70% opacity.', 'The opacity of the element is adjusted to 60% to signify the cooling down period of the day.', 'Specific times are mentioned, such as 4:30, 67, and 55, to indicate the progression of the day.']}, {'end': 1477.949, 'segs': [{'end': 1176.964, 'src': 'embed', 'start': 1141.85, 'weight': 0, 'content': [{'end': 1144.553, 'text': "And then we'll go to Edit, Transform, Flip Horizontal.", 'start': 1141.85, 'duration': 2.703}, {'end': 1149.539, 'text': 'And hit Control-T to scale that down just a little bit.', 'start': 1145.875, 'duration': 3.664}, {'end': 1154.625, 'text': "And let me see what it looks like if it's this color.", 'start': 1152.083, 'duration': 2.542}, {'end': 1157.788, 'text': "Nah, what we'll do is give it a stroke.", 'start': 1155.806, 'duration': 1.982}, {'end': 1165.494, 'text': "So I'll just double click over here, go to stroke, change this down a lot, maybe around three.", 'start': 1158.248, 'duration': 7.246}, {'end': 1172.56, 'text': 'Maybe drag it down just a tad.', 'start': 1165.514, 'duration': 7.046}, {'end': 1176.964, 'text': 'All right, so Monday will be cloudy.', 'start': 1173.961, 'duration': 3.003}], 'summary': 'Tutorial on editing and transforming with control-t, changing stroke, and weather forecast for monday: cloudy.', 'duration': 35.114, 'max_score': 1141.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE1141850.jpg'}], 'start': 1009.147, 'title': 'Creating weather preview and designing icons', 'summary': 'Demonstrates creating a five day weather preview at 16 minutes in the video, using a rectangle tool and changing the foreground color, then adding abbreviated names for five days with an opacity of 12%. it also involves designing weather icons for a 5-day forecast, including designing icons for cloudy, rainy, and sunny days using tools like ellipse and rounded rectangle, and organizing them in a 5-day layout.', 'chapters': [{'end': 1080.153, 'start': 1009.147, 'title': 'Creating five day weather preview', 'summary': 'Demonstrates creating a five day weather preview at 16 minutes in the video, using a rectangle tool and changing the foreground color, then adding abbreviated names for five days with an opacity of 12%.', 'duration': 71.006, 'highlights': ['The chapter demonstrates creating a five day weather preview at 16 minutes in the video, using a rectangle tool and changing the foreground color, then adding abbreviated names for five days with an opacity of 12%.', 'Using the rectangle tool and changing the foreground color to create the weather preview.', 'Adding abbreviated names for five days with an opacity of 12%.']}, {'end': 1477.949, 'start': 1080.153, 'title': 'Designing weather icons for 5-day forecast', 'summary': 'Involves creating weather icons for a 5-day forecast, including designing icons for cloudy, rainy, and sunny days using tools like ellipse and rounded rectangle, and organizing them in a 5-day layout.', 'duration': 397.796, 'highlights': ['Creating weather icons for a 5-day forecast, including cloudy, rainy, and sunny day designs using ellipse and rounded rectangle tools.', 'Organizing the icons in a 5-day layout, grouping them and adjusting the layout for better presentation.', 'Using tools like Control-G for grouping, Control-E for merging, and Control-T for scaling and duplicating elements.', 'Experimenting with colors, strokes, and layout to enhance the visual representation of the weather icons.']}], 'duration': 468.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE1009147.jpg', 'highlights': ['Demonstrates creating a five day weather preview using a rectangle tool and changing the foreground color.', 'Adding abbreviated names for five days with an opacity of 12%.', 'Creating weather icons for a 5-day forecast, including designs for cloudy, rainy, and sunny days using ellipse and rounded rectangle tools.', 'Organizing the icons in a 5-day layout and adjusting the layout for better presentation.', 'Experimenting with colors, strokes, and layout to enhance the visual representation of the weather icons.']}, {'end': 1638.964, 'segs': [{'end': 1590.443, 'src': 'heatmap', 'start': 1508.791, 'weight': 0, 'content': [{'end': 1521.036, 'text': "So bring up the description below this video and you'll see a source or a credit to a link, and that is going to bring you to this page right here.", 'start': 1508.791, 'duration': 12.245}, {'end': 1528.239, 'text': 'pixyden.com. and they have this free 3d view of an iphone psd and you could download it right here.', 'start': 1521.036, 'duration': 7.203}, {'end': 1532.88, 'text': "it's a large download, so i did not include that in the um project files for my site.", 'start': 1528.239, 'duration': 4.641}, {'end': 1534.821, 'text': "um, so it's like 67 megs.", 'start': 1532.88, 'duration': 1.941}, {'end': 1542.384, 'text': "but once you have it, uh, you want to open that up, so i'm going to pause this and just get that open on my computer.", 'start': 1534.821, 'duration': 7.563}, {'end': 1544.986, 'text': "And this is what you're presented with.", 'start': 1543.224, 'duration': 1.762}, {'end': 1551.271, 'text': "So if you take this group and drop it down, you'll see this right here called Your Screen.", 'start': 1545.246, 'duration': 6.025}, {'end': 1554.733, 'text': 'You want to double click on that and just hit OK.', 'start': 1551.831, 'duration': 2.902}, {'end': 1558.396, 'text': "And we'll go back to our original design.", 'start': 1555.714, 'duration': 2.682}, {'end': 1566.305, 'text': 'hit Control A, Edit Copy Merged, and then Select the top layer and just hit Control V, and that will paste that in.', 'start': 1558.396, 'duration': 7.909}, {'end': 1569.508, 'text': "And then if you want, you don't have to, you can delete those layers.", 'start': 1567.026, 'duration': 2.482}, {'end': 1571.27, 'text': 'Hit Control S to save.', 'start': 1569.528, 'duration': 1.742}, {'end': 1573.793, 'text': 'And there we go.', 'start': 1572.611, 'duration': 1.182}, {'end': 1575.074, 'text': 'So let me zoom up quite a bit.', 'start': 1573.893, 'duration': 1.181}, {'end': 1575.755, 'text': 'This is large.', 'start': 1575.094, 'duration': 0.661}, {'end': 1576.595, 'text': "It's only 16.7% view right now.", 'start': 1575.775, 'duration': 0.82}, {'end': 1581.353, 'text': "I'm going to zoom out.", 'start': 1579.491, 'duration': 1.862}, {'end': 1587.64, 'text': 'And then we can change the background down here to any number of these that they gave us to use.', 'start': 1581.854, 'duration': 5.786}, {'end': 1590.443, 'text': 'But I kind of just like this flat background right here.', 'start': 1587.68, 'duration': 2.763}], 'summary': 'Transcript demonstrates how to download and use a 67mb 3d iphone psd file from pixyden.com.', 'duration': 49.605, 'max_score': 1508.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE1508791.jpg'}], 'start': 1483.174, 'title': 'Designing a weather app', 'summary': 'Discusses the process of designing a weather app in 25 minutes, using a free 3d view of an iphone psd from pixyden.com. it involves steps such as downloading, pasting, and saving, and concludes with a mention of an upcoming paid course for mobile app design on designcourse.com.', 'chapters': [{'end': 1638.964, 'start': 1483.174, 'title': 'Designing a weather app in 25 minutes', 'summary': 'Discusses the process of designing a weather app in 25 minutes, using a free 3d view of an iphone psd from pixyden.com, involving steps such as downloading, pasting, and saving, and concludes with a mention of an upcoming paid course for mobile app design on designcourse.com.', 'duration': 155.79, 'highlights': ['The process of designing a weather app in 25 minutes is demonstrated, including the use of a free 3D view of an iPhone PSD from pixyden.com, and the completion of the design.', 'The speaker mentions a large download size of 67 megs for the 3D view of an iPhone PSD from pixyden.com.', 'The speaker plans to offer a full paid course along with certification for mobile app design on designcourse.com in the future.']}], 'duration': 155.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/I9ix0ECNuyE/pics/I9ix0ECNuyE1483174.jpg', 'highlights': ['The process of designing a weather app in 25 minutes is demonstrated, including the use of a free 3D view of an iPhone PSD from pixyden.com, and the completion of the design.', 'The speaker plans to offer a full paid course along with certification for mobile app design on designcourse.com in the future.', 'The speaker mentions a large download size of 67 megs for the 3D view of an iPhone PSD from pixyden.com.']}], 'highlights': ['The process of designing a weather app in 25 minutes is demonstrated, including the use of a free 3D view of an iPhone PSD from pixyden.com, and the completion of the design.', "Using layer blend modes like 'screen' and adjusting opacity to signify different weather conditions is crucial for creating weather interfaces in app development.", 'The video marks the 11th of the year, highlighting the focus on mobile app design for a fictional weather app and encouraging engagement with the design process.', 'The chapter provides step-by-step instructions for duplicating, flipping, and manipulating shapes to create the water drop icon, highlighting the use of shortcuts and techniques for efficient design.', 'Demonstrates creating a five day weather preview using a rectangle tool and changing the foreground color.']}