Patterns

Repeating Pattern

This project taught me how to use adobe illustrator pattern making. The pattern creating in AI makes the processes of creating a pattern way easier than trying to tile a pattern yourself. I started of the project by making a lot of patterns, after asking my friends around me I kept on getting less and less and finally got the pattern I liked the best. Before I submitted it I changed the colors to fit the design feel we agreed on. In my next project I can apply the patterns I made to the fill of shapes to speed up the process.

Motif

This project is pattern that can be split into four different sections and has a center point. The motif was harder for me to create than the repeating pattern. Once I learned how to combine the shapes it made making the motif a lot faster. Radial patterns, they start in the center and are a circle

All about Colors

HTML Color

There are four different ways to use colors in CSS. You can use RGB, RGBA, Hexadecimal, and color names. They all have advantages some are easy to use than others, this tutorial will show you all the different types and situations to use them in. With RGB, RGBA, and Hex there are 16,777,216 different colors but you can only use 256 on the web.

Color words

Colors words are the easiest out of the four ways to add colors to word in HTML but they also do the least. To add colors words to tags you just add the name of the color you want. Color words are the least used way because they are very limited in the amount of colors you can use in your web page.

Ex.

<p style="color: Red;">Hello</p>

Hello

Links:

All the color words

Hexadecimal

The hex system for colors is base 16 and are 6 digits long(Hex meaning 6 in latin), and look like #FF0000. The system goes from 0-F Both RGB and Hex codes have the same amount of colors for the web. The order for hex codes go "RRGGBB" Red Green Blue. Each one of the values you be a character from 0-F. F being the most of one color and 0 being none of that color. Web colors are all hex codes that are doubled like #00FF33 or #55DD22 but like #12FC5A

Ex.

<p style="color: #FF0000;">Hello</p>

Hello

RGBA and RGB

RGB and RGBA are almost the same system they use different amounts of red green and blue. Each color goes from 0-255 (256 different numbers).The a on RGBA stands for alpha it is a value from .0-1 it is the transparency value.

Ex.

<p style="color: rgba(255,0,0,1);">Hello</p>

Hello

<p style="color: rgb(255,0,0);">Hello</p>

Hello

Here is a picture of how transparency can be used.

In Conclusion

All of the different types of color choices work in HTML 5 and they all have there different uses. You can refer to my other blogpost for examples of each type.

Links:
HTML Color Picker
HTML Colors

RGBA Transpareny

The scope of this project was to teach us how to use transparency in the web instead of relying on hex codes.

Begging

I started off this project by creating 5 div tags.

The container tag held all of the 1-4 tags and had CSS that applied to all of the IDs.

Middle

In this project we learned how to use the DIV tag and specify special CSS properties for each one like transparency. The default way to use colors was using HEX codes you had to change it to RGBA for this project

Each one of the DIV tags had differing levels of transparency from 20%-80%

Final Product

When all of the tables and tags were set up correctly each div had different levels of transparency for each tag. In future projects I can apply how to use Divs

Basic HTML projects

Tim Berners-Lee Page

In this page I learned how to insert a image into the web page and float the image to the right direction. We also added padding the the right side of the image so the text wouldn't be directly touching it.

Hex Codes Page
In this project we used the div tag and changed from inline CSS to Internal CSS. Instead of putting most of the CSS inside the tags to putting the CSS in the header of each page. I learned how to use HEX codes instead of the name of each color to get a wider variety of colors. The hex codes are a 16 base system going from 0-F Each code is 6 digits long. The order goes red red green green blue bluee.

Adobe Illustrator projects

Tutorial

I started by doing the tutorial and finishing the basic pencil. This taught me how to use the polygon tool to create shapes and use the arrow keys to choose how many points they have. Once I was done I was able to group everything together and use the live paint bucket like a coloring book to color in each of the spots on the pencil and cup.

Customized Pencil

After I finished the basics of Adobe Illustrator I could move on and build my own mechanical pencil. The cup on the left also has the word "Pencil" on it that is stretched around the cup to make it look more realistic. Again I used my knowledge of the first pencil and was able to use the live paint bucket to finish my custom pencils colors.

The other pencil is the tutorial pencil stretched out to make it look more like a real pencil and not just a stub of one.

Creation

This was the final custom piece we had to make. The two parts of it are the flag and the flag pole. The American flag was easy to make except the stars because they are not on a perfect grid, to go around this I made two separate grids of stars and put them together to get the right look for the American flag. I made the grid using the vertical and horizontal align center tools. This was I only had to line up 8 stars (4 for each grid) and than I was able to just copy and center align the rest of them. I think it looks just like a real American flag.

Wayback Machine 3 different Websites

Amazon

Amazon 1999

Amazon 2015

Amazon HTML 1999

Amazon HTML 2015

Design

The 2015 Amazon layout is a lot better than the 1999 one. It is more streamlined and has more of an appeal for the eye. The old layout has a small search section expecting people to look through the site, it also lacks a lot of color. Amazon's 2015 layout is much cleaner with more colors.

HTML

There is a lot more code in the new version of Amazon than the old version. The site has loads of emty spaces sometimes 100+ lines im not sure why. Amazon2015 also has more <scrips> and less basic HTML than Amazon1999

Ebay

Ebay 1997

Ebay 2015

Ebay HTML 1997

Ebay 2015 HTML

Design

The old Ebay design seemed like a place holder for an idea. The after one year passed updated a lot and looked closer to how it is today. There is almost no code because the site is so small. The newer Ebay has an updated logo that is less 3D and looks more modern.

HTML

I found it super interesting that whenever you look into Ebay's source code you find a note using "<!--" showing a logo made out of characters and a job site if people are interested in make sites and looking at HTML.

Reddit

Reddit 2005

Reddit 2015

Reddit HTML 2005

Reddit HTML 2015

Design

Reddit has kept its design almost exactly the same. There are slight changes but most of it is the same. In the newer version is shows screenshots of each link submitted. The Reddit logo hasn't changed in over 10 years.

HTML

The code for Reddit looks very similar as well. You can see same text in both of the source codes. Reddit is very link based website so you can see a lot of them in the code.

What is Graphic Design?

Overview

http://www.emoneypresents.com/graphic-design/

Graphic design is involved in everyones life everyday. You use graphic design to convey words and images to make a message. You experience graphic design whenever you see products logo or see typography on any platform. There is an idea or image each designer conveys when ever you see there design its supposed to make you have a sense of beauty whenever you see it. Its an universal language that everyone can understand.

Personal

Graphic design is important to me because I see it all the time. I want to be able to get good at creating things that follow CARP and are pleasing to look at. Olathe Northwest has loads of opportunities to use the skills you learn in e-Comm like in making tee shirts designing the year book ect.