website!

Here are two of my layout ideas for my website

This is the piece that inspired my website. I used the colors and the red banner in the hood in my website.

Here is an idea of how many images I used for my website.

header that I created in Illustrator and edited in Photoshop

These are the headers that I made in Illustrator

  Here is my website! I liked how it turned out! I struggled a lot with using code, but I really think the overall website turned out well!

Resume

Here are the steps that I took to create a resume and then the finished resume. Our assignment was to write a resume using only code. For some reason the file and the picture that is shown are different because in the picture the font keeps getting smaller. I do not know why it is coming up this way, but this is just a sample and it shows that I completed the project. This project was a challenge for me considering that I have never worked with using code before. It was frustrating, but I'm glad that I was able to finish it.

Tutorial Notes

1st weblink about HTML.

Home-

Intro- HTML stands for - Hyper Text Markup Language. A markup language is a set of tags, which are tags to describe web pages.

Getting Started- To get started with an HTML, you do not need an HTML editor, a web server, or a website, and you can copy and paste links off of the website to get started.


Basic- HTML paragraphs are defined with the <p> tag. HTML links are defined with an <a> tag, and the HTML images are defined with the <img> tag.

2nd weblink about CSS.

Home- In the home screen there are examples of CSS and code. There is also a quiz offered that viewers can take.

Intro- CSS Stands for Cascading Style Sheets. Styles define how to display HTML elements which were added to HTML to solve a problem. CSS saves a lot of work because it defines how HTML elements are displayed.

Syntax- The syntax shows examples like code which makes something work like a color, size and typeface.

ID & Class- CSS allows you to specify your own selectors which are the "id & class." The id is used for specifying a single unique element. It is defined with an "#".

Styling-

Background- Backround color is the color behind an element and it is also determined by entering code. An example is - Body ( background-color:#b0c4de;) The first word color will be an actual color like blue or red, and the RCG value is the second set of numbers and values to make the color, and then the Hex is the last thing seen.

Styling Text-Text formatting is the way the text is seen like spacing and colors. The colors, RGB and hex are also considered when styling text as well. Here is an example- body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Box Model- The term " box model is used when talking about a design or layout in CSS. The box model consits of elements- the content, padding, border and margin. The box model's purpose is so that it can arrange space and elements.

Border- A border that goes around the paddding and content which are the inner box. There are all different types of borders,- dotted lines, solid border, double lined ect.

Outline- The outline is the overall box that surrounds all- margin, border, padding & content. There are different styles, widths and colors for outlines.

Margin-  The margin is usually set by the browser but it depends on the length and percentage of it. An example of a way to change it by using code is: margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;


Padding- Padding clears the area around the content inside the border. The padding is affected by the background color of the element.  It also depends on the length and percentage.  An example of it is:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

questions

We were given a list of questions at the beginning of this project, and as you can tell, my answers for these questions definitely were answered and were resolved differently than I had anticipated.

Katie Starr
Baking Magazine Questions
" Decadent Delights- Baking Made Easy"

Who is your target audience? My target audience for my magazine would be anyone who enjoys baking or  anyone would like to learn how to bake.

What is the name of your Magazine? Why? Connotations? The name of my magazine is entitled "Decadent Delights."  I thought this was a very fitting name since it was a baking magazine and I thought that it was catchy as well.

What will your masthead look like? Do you have any ideas for fonts? My masthead will have the title and then the subtitle so it will say " Decadent Delights ( really big) and then underneath it, " Baking Made Easy.. or Simple." ( fairly small, but still noticeable.) I would like to use a script font for my magazine because baking is thought of as being beautiful and almost an art if it is done correctly. I think that the script font would also relate well to the idea of baked goods because people usually use cursive writing when they write words onto a cake.

What images will be on the cover and why? I am not entirely sure what I will scan for my image yet, but I know that I will be baking something to take a picture of.. ( most likely cupcakes.) I think that cupcakes would be cute on the cover because it will reflect the title and overall concept.

What will be your sell lines to entice your target audience? I am not entirely sure what my sell lines will be, but they have to go along with the picture that I choose and also the fact that it has to be semi easy since my subtitle line says " Baking Made Easy." I could  also simply have overall ideas like- " 3 recipe desserts," which would most likely be more professional sounding and less condescending. I think I will probable go this route because then I would not be reiterating the low skill level required to make the items.

ALL FINISHED! :)

Here is my finished magazine cover! I am proud of how it turned out! :) My blog is documented out of order ( because I kept finding different things to add to it, ) but the processes for  this project are all there!

Finished Magazine in both Illustrator & InDesign

Here are the finished magazine covers from both Illustrator ( top) and InDesign ( bottom) I really liked how they turned out! :)

Picture Process!

I wanted to get the picture just right with the correct background, lighting and angle, so here are two pages worth of the 3 pages of pictures in Iphoto that I took for this project. It was difficult picking between all of them!!

Baking for my picture!

These were the beginning of my project pictures. I actually made the cupcakes for my cover and took my own pictures. There were a lot more pictures that I took of the process, but Here is just an idea of the process I went through to bake these cupcakes. I made 3 different kinds with 3 different cake batters, 3 different icings, and 3 different toppings. The flavors were- Classic Margarita, Strawberry Daiquiri, and Pina Colada. All were delicious might I add :)

This was the beginning of my project. I actually

more masthead exploration

Because the image had different colors in it than I had anticipated, I decided to do more Masthead exploration with different colors and drop shadows. I thought that I would use the one that is circled in red, but I didn't actually use any of the ones shown, although this was a helpful guide in coming to my Masthead conclusion.

Background change!

I decided that I didn't want a plain teal background, and the easiest way to make a pattern was to delete the background, this took me a while to figure out because there were a lot of different layers in both Illustrator & photoshop.

Scanned salt & photo combined in Photoshop!

 

Here is the scan combined with the photo. In this process I used both Photoshop and Illustrator.

Margarita Salt Scans

 

I decided that I didn't want to use the other scans that I took of the eggs and the sugar and flower so instead I scanned Margarita salt, which was more fitting to the theme of my magazine.

Picture that will be used for cover!

This is the image that I am using for my magazine cover and it has been partially edited in Photoshop but there is more work to be done.