Adobe Photoshop CC Tutorial

In honor of school starting, and the process of switching to Adobe creative cloud, I decided to create a tutorial for a new tool in Adobe Illustrator (and so I can get a grade in this class). For this tutorial, I decided to do 3D text, which was a lot simpler than I thought it would be so I think you all shouldn't have a problem with it.

First things first, to create the document. Now the sizes I listed to the left aren't necessarily the sizes that you absolutely have to use, you can pretty much use any size you want as long as it fits your text, but keep in mind that the bigger the document, the longer the process will take.

This is the text I chose, I simply just did my name and I put a line shape underneath it so the 3D text will pop more. Next you're going to right click on the text layer and click "convert to shape". This should outline your text and now you can click on the text layer as well as the shape layer and merge them together using command E. After that, right click on the layer and all the way at the bottom it should say  "New 3d extrusion from selected layer". Click that, and it should look like the picture below.

 Now that we've converted to the 3d layer, we're going to experiment with the 3d tab and the layers so read carefully. You're going to go back to the layers panel and right click on background, then go all the way to the bottom and click postcard. All this does is put the background behind the 3d layer. Next, you'll combine the background and the text layer together and you should get the next picture below.











After that, you can experiment with the 3d layers and figure out how you want your text to show up, but all I did was lower the extrusion depth slightly. Now you're going to click the cube in the properties layer (picture on the left) and it should start to render your layer, so it gives off the effect that really pops your 3d text. This process usually takes around 5 minutes for me, but again it depends on how big your document is.








Now this is your final product! Feel free to change any colors of the size or your text, but this is what I ended up liking the most. Thanks for reading!

eMagine

My Photo Composition Site

This is my Photo Composition site and in this site I stated all the rules of Photo Composition and took pictures to give an example of each rule. I really liked this project because I love photography and I got to find different spots within town that I've never come across before. I made a responsive version of this site, which is the last picture, and my Mac n' Cheese site is also responsive and I got to take another path for this tutorial then I did for my Mac n' Cheese site, which was really interesting. If I had to do anything different, I would look into different pictures for my header and spending more time on my header to make sure it matches my color scheme. What I really like about this site is the strokes on the sidebar, header, footer, and main because I think it gives a really cool effect throughout the site.

So what is responsive Web Design? Basically, having a responsive website just ensures that if you're using a tablet, mobile phone, or any other different sized screens, that your page will change to make it easier to see all your content, pictures, and other links. This is a very important process of making a website. When putting it together, you put a "media queries" in the top of your source code on all your pages so that it applies when you go to upload it to your server. Breakpoints occur when your making the page small and it gets to a certain size where your sidebar and images get small or move around your text. In my last screenshot, notice that my side bar goes to the bottom of the page.

I've also found a responsive website, and you can see that as I go smaller, the text starts getting smaller and the email request box is now stacked. I think they did a great job with keeping everything the same size so we can still see it and it's the same information.


Here's a link to my responsive Photo Composition site:
Photo Composition Site

Here's a link that goes back to my project page:
Ava's Index Page 

Touch of Fun Mock-Up Website

In this project we chose to screenshot a website of our choice and recreate it with a new topic and images using Adobe Illustrator. I chose this layout for my mockup website because it was simple yet it still gives the same amount of information as any other website. What I really liked about this website is how different it is compared to some other websites. If I could do something different next time, I would find pictures that have a different background color, like the original website, just to make it a little more modern and interesting.

Illustrator Projects

I made these 3 projects using Illustrator and Photoshop. During the first project (1st picture) I used the pen tool and made my own brush pattern to create different style lines and patterns.
The second project (2nd picture) We used the gradient mesh tool, and if I were to do this project again I would learn how to use that tool properly as well as the clipping mask and the direct select tool. We made our name look like a blueprint of a project and made different lines and arrows using shapes and made our names look more like a chalkboard.
The 3rd and final project (3rd picture) was my favorite. We got to create a mascot roly-poly icons using Illustrator and I really liked this project because you get to make cute little icons and I got to learn how to make a simple gradient shadow as well as how to make it look like a 3D object.

Past Present Future Website

During this project, I learned how to make individual slices in photoshop and then save them and put them in a div in dreamweaver to make it look good and work good. I really liked this project because we got to discover new ways to use our server on internet exploer and make it presentable for both macs and windows computers.

You can find my full site below:
Past Present Future Website

Topic Website - KC Mac n' Cheese

The main idea of making this project is for me to get a broader perspective of using Dreamweaver, as well as all the features it has that can embed a video, graphic, menus, and certain rollover images.

When I first started this project, I thought of making a website about Broadway or Photography, one of my many hobbies after school. In the end, I decided to go with something that made me happy and I could find plenty of information on. Along the way, I learned many new ways to add in coding, different color schemes, plenty of new information on Mac n' Cheese, and embedding images and videos.

Next time, I might try to find a better place to put the side bar so the website looks more natural, as well as changing the background on the sidebar. I really liked how I made the logo, and I tried to make it in a Mac n' Cheese shape, but ended up choosing a fun font to incorporate the feel of fun and lovable Mac n' Cheese. I also really liked how I did the background around the whole thing with the transparency, except maybe I next time I might try to make the Mac n' Cheese more at the top and then fade into black.

This project definitely helped me learn how to do width and rounded corners that I will most defiantly use for future projects. I think I'll change the layout more next time and try to experience some new feature with Dreamweaver that I haven't tried yet. I really loved this project because we got to incorporate everything we've learned and I got to write about something that I'm passionate about. Check out all my pages, as well as the website it self with the link below!

Ava's Biography

HTML Colors!

Today we'll be reviewing Hexadecimal codes, RGB, and RGBa. All 3 codes involve colors, but can give them different forms or give them a different look, or also how much we control the shade of the color.

Hexadecimal Codes

Starting off with Hexadecimal codes, you can use letters and numbers, and they can either be 3 or 6 characters. It ranges from 0, being black, to 9 and then A to F, being white. Any of the numbers or letters in between can determine what shade of color you'd like, and usually the characters are in pairs and they can be either red, green, or blue and you can higher or lower the codes on those to establish different colors.

RGB & RGBa Codes

RGB coding involves no pound sign (#), no letters, 3 numbers, and it can go up to the number 255.You can use this for regular coloring, but if you want to add some transparency you can set your settings to RGBA. The only difference is that there are 4 numbers in RGBA, it can go up to the number 225, and the A at the end stands for alpha and is used to determine the transparency. It normally ranges from 0-1. Zero being see through and 1 being almost a completely white background. You can use the numbers in-between, such as 0.2 and 0.8, to determine how much you want to see through your box.

Above is what an RGBa code would look like, you can see the last number, the alpha, is a decimal and since I want my box to be partially see through, I made it a low number and the other 3 numbers just determine what shade I want the background to be.

We need this skill to make websites and we want to make a box with information in it, but have it show through to some pictures in the background. Anyone wishing to have maybe a slideshow in the background or a lighter feeling of their website should use this tool because they can still have information about their website on their page but at the same time being able to see the whole thing.

In conclusion, there are many different ways to use color codes and many different ways you can make them appear.

Below are some websites you can access to make you codes the best of the best:

HTML Color Picker
Color Explanations
RGB Color Channels

Then and Now

                                                                   

                       

                           


This is Club Penguin 2005 vs 2015. Obviously, the layout has changed drastically and while they look quite similar, the 2015 version is a little big more detailed and gives the website more attraction, but the 2005 version gives more information on the home page and 2015 shows more of what it looks like inside the website. The coding used in 2005 used a lot more
and while the 2015 coding is more

and class coding.  

Webkinz 2005 vs 2015.  2005 was more of a click and go and basically showing you some of the things your pets can do, and the 2015 version shows more ads and merchandise and shows through slides what you can do inside Webkinz. The coding is different in that the 2005 version shows less options of where to go, therefore less coding, and the 2015 coding has more tabs and more links to click making a larger coding.

    

Skype 2004 was very... old. The buttons were robotic and while in the 2004 version, it gave a lot of information on what you could do, the 2015 version has more of a slide show, making it look more appealing to the eye while at the same time giving us the same information we would get from the 2004 version. They also changed the color concept from red to blue. The 2004 coding was more spacious and had lots of wording, and Skype 2015 was laid out to be more tight and while maybe it's the same amount of writing, it's not all at once, and gives us more understanding of what the software  can do.