Design and Media

Description of the video:

[MUSIC] Hello, my name is Beth and today I'll introduce you to the interfaces of the most commonly used Adobe Creative Cloud programs. I'll be covering the essential elements of Photoshop, Illustrator, InDesign, and Dreamweaver. This video specifically focuses on the 2017 edition of Creative Cloud, but the applications look and behave similarly in older versions of the Creative Cloud suite. There are certain parts of the Adobe interface that most programs in the Creative Cloud suite share. Knowing what these are can help us out as we move between different programs in Creative Cloud. The first one is the Menu bar. This is in the top left-hand corner of the screen at the very top of the Adobe window. There are different menu options available, depending on which program you are using, but they'll all be located at the top of the screen. All of the Adobe Creative Cloud programs make use of panels, which collect tools and options for working with specific parts of your document. The Tools panel is also present in almost all of the Creative Cloud programs. It contains icons that represent all of the tools available to us in a specific program. To activate a tool in the Tools panel, you can simply click on it or use the associated keyboard shortcut. Hovering your mouse cursor over the tool will display a tool tip with the keyboard shortcut in parentheses. You may see a small triangle at the bottom right corner of a tool. This indicates that this tool has hidden tools underneath it. To expand the list of tools. [MUSIC] Simply click and hold on the desired tool, then point to the tool you wish to activate and let go of the mouse button. Some programs in Adobe Creative Cloud have a control panel present somewhere on the screen, this is sometimes called the Options bar. Each of the programs in Creative Cloud have workspaces, these are different collections of panels that are bundled together to help you accomplish specific tasks in a given program. For example, in Illustrator there's a workspace that presents panels that will help you create web graphics. And in InDesign, there's a workspace that focuses on working with text. You can even create your own workspaces based on the panels that you use most in a specific program in Creative Cloud. Now that we know the different elements that programs in Creative Cloud all share, let's look at Photoshop. Photoshop is a program that focuses on editing digital photos, as well as creating digital works of art. When we first open Photoshop, we're greeted with a Start interface. This is new to the design programs in Adobe Creative Cloud 2017, we can see our recent files here as well as easily create a new document. You can change many settings about our documents here. But, for now, I'm going to quickly create a new document by clicking on New, then Create. [MUSIC] Photoshop will give us a blank canvas to work with. Now that we have a document open, let's explore the interface. [MUSIC] Across the top of the screen is the Menu bar. Along the left side is the Tools panel, and, as you can see, a number of these tools have hidden tools stacked underneath them. Simply click and hold on the desired tool, to have the list of hidden tools pop out. And then point to the tool you wish to use and let go of the mouse. Just underneath the Menu bar is the context sensitive Options bar, which is also often referred to as the control panel. As you choose various tools from the tools panel, this area will show us options based on what tool we've got selected. We also have a number of panels available to us in the panel dock at the right side of the screen. By default, when you open up Photoshop for the first time, the Color, Properties, Layers, and Libraries panels will be visible. There are other panels grouped with these and you can access those by clicking on the tabs inside of each panel. The panels we have available to us right now are part of the essentials workspace in Photoshop. We can access more workspaces in the upper right-hand corner of the Photoshop window by clicking on the workspaces icon. There are a number of work spaces available in Photoshop that help us accomplish various tasks. We can also create our own if we want to and save the panel configuration we use the most so we can easily reload it when we need to. In the middle of the screen is our document area. This is where we'll edit a photo or create digital artwork. Now that we've had our introduction to Photoshop and have seen the different parts of its interface, we'll see how similar the layout is in the other design related programs of the Creative Suite. Next we'll explore Adobe Illustrator. Illustrator is a program that allows us to create and edit vector graphics, and its interface is similar to that of Photoshop. Much like Photoshop, when we open the program, we're presented with the Start screen. I'll quickly make a new document by clicking on new and create, so we can see the Illustrator interface better. [MUSIC] Now that we have a new document open, let's look at the interface. We can see the Menu bar across the top of the screen as always. We can also change how we view the documents we're working with from here. Just like in Photoshop, we have the Tools panel available on the left side of the screen. One important thing about the Control Panel in Illustrator is that it changes not only based on what tool we're using, but also what object we're working with. This gives us a lot of control over what we put on our art board and how it looks. In Illustrator the panel dock may be minimized to allow us more space to work in. We can click on the double arrow icon at the top right corner of the doc to expand it and see all the panels available to us. Once expanded, we can see a number of different panels. The essentials workspace shows us the Color panel, Symbols panel, Gradient panel, Libraries panel and the Layers panel by default. Again, like Photoshop the workspace switcher is at the top of the screen and there are a variety of workspaces we can choose from. You can also make a new workspace to meet our needs. Last, but certainly not least, is the art board. We can have a number of these in our illustrator document and this is where we create our artwork. Let's transition from graphic design to page layout and learn about the InDesign interface. InDesign is Adobe's page layout program, it allows us to layout posters, brochures, books, and other print documents. Its layout is similar to Illustrator and Photoshop. Just like with Illustrator and Photoshop, InDesign gives us a new Start workspace whenever we open it. We can quickly create documents in the same way we've done earlier, so I'll go ahead and create a new document with InDesign's defaults now. Let's go ahead and explore the interface. InDesign has a Menu bar across the top of the page, but there are also some icons included in the menu bar. We can open Adobe Bridge or Adobe Stock if we need to, zoom in or out of our document, or change options about how we view our document, and also how we view the documents that we're working with. As we've seen in Illustrator and Photoshop, we have the tools panel to the left and the context sensitive control panel on top of our document window. The control panel offers many different options to help us use the tools in the tools panel more efficiently and some tools actually have multiple control panels such as the Type tool. [MUSIC] The panel doc looks slightly different in InDesign. The panels are collapsed into buttons and when we click on one fo the buttons the panel we need will pop up. If we need a panel to stay out, we can press ad drag it away from the panel doc and place it wherever we wish on our screen. We also have the workspace switcher with a number of workspaces for us to choose from based on the task we want to accomplish. Now we'll switch gears entirely and switch from design to web development and explore the Dreamweaver interface. Dreamweaver is one of many programs that Adobe offers for web authoring and is also the one that has undergone the most changes when moving to Creative Cloud. Dreamweaver allows us to use four different views Code, Split, Live and Design view to work on our website in the way we're most comfortable with. While some elements of the interface are different than Adobe's design programs, the layout should be somewhat familiar to you. Across the top is the Menu bar, just like in the other Adobe Creative Cloud programs. [MUSIC] The left side of the screen shows us a quick access toolbar which we can customize if we want to by clicking on the three dots that are at the bottoms of that panel. The right side of the screen chose the panel dock. By default, it shows the files panel and the DOM or document object model panel. The center of the screen shows the workspace. As mentioned earlier, we can work with our document in a number of different views to suit our website construction workflow the best. And last, but certainly not least, we have the workspace switcher at the top of the screen, allowing us to choose from standard or developer workspaces. By default, Dreamweaver opens in standard. Now that you've got an introduction to the interfaces of the various Adobe Creative Cloud programs, you're ready to jump in and start working. I hope this introduction has been helpful and thank you for watching.