Graphic Design Production Blog

Creating an Interactive PDF

About PDFs: The destination for your PDF and who you are creating it for are two of the main considerations that govern why you use different settings for your PDF. Formats for Print ScreenSave the InDesign document provided in the following formats:

  1. High Quality Print, Single pages, No Bleed or Crop Marks
  2. High Quality Print, Single pages, WITH Bleed or Crop Marks
  3. Smallest File Size, Page Spreads, No Bleed or Crop Marks
  4. Printer’s Spreads: Print Booklet > to Postscript file Marks and Bleeds > Open in Distiller > Create PDF.

Orgainizing/Naming for Web


Organization is Essential. To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS. Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place.For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.

Working With Content

Working With Images Example

Images for web have specific file formats depending on the kind of image. The formats all have adjustments that you can make when saving them in order to achieve the highest quality with the smallest file size. This process is called Optimization. You will want to optimize all of your web images before you use them in a website. The most common file formats developed for the web are:

CSS Links

css example stylesheet

STYLES SHEET: Start a new page and Save it as 'styles.css'. Add rules sets for the headings and paragraphs as seen in the connections-stylesheet screenshot: Now we will create rule sets for the text links.

Remember that links have four states:


Exercise example

We are going to continue using our 'connections' site from last week's exercises (X04).Copy your 'connections' root folder to your desktop.Now, add the images you found to represent your own past, present and future to your images folder. Make sure your images are named to reflect the content. (If needed you can use the provided placeholder images.)

HTML/CSS: Background Images

background image example

Using Images in the Background Just like changing the background color of an HTML element, we can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page.

Set the background with CSS Open your styles.css page and locate the style for your body element. In order to indicate an image we need to tell the browser to find the address of that image, and in this case, the address is inside the images folder which is inside our root folder. Since we are already inside the css folder, we need to tell the browser to back out of this folder, then go into the images folder. The signal to the browser is by using two periods in front of the slash. So the code looks like this:

The Box Model/Spacing, Sizing and Type on Screen

box model exercise example

Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.

padding is like the packing peanuts inside the box, border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.), and margin equates to spacers or bumpers attached to the outside of a box.

Width and Height The last two properties that we can change on our box is the width and the height. It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well.

Text Alignment We have already discussed controlling the space inside and outside of the box using padding and margin. We can also control how the content is situated inside the box.Default alignment for all elements in HTML is left. It makes sense that browser use this as a default because we know that left aligned text is easiest to read. That's why novels, textbooks, and almost all other longer form text is always left aligned.Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that. The CSS declaration we use to do this is text-align: and the acceptable values are left, right, and center.

Navigation and Unordered Lists

anchored link example

Anchored LinksAn anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two requires that we learn a new HTML attribute, the id= attribute. This particular attribute is used to identify (id) the HTML element being anchored to. Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best.

For an anchored link the address is very simple. You use a # (hashtag, pound sign, or another weird name is the octothorpe symbol) and then 'call it' by name. The # indicates an id= attribute and the name specifies which one.

Responsive Design Mode In order to work properly on our mobile first design, we’ll need to change our browser settings so we can easily preview our site using the correct dimensions for a small mobile device. In Chrome go to View > Developer > Developer Tools. There are lot's of settings to choose from. Experiment to view the different options.

Dealing with Images There are many techniques out there for handling images, some more technologically advanced than others. We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. It doesn’t matter the screen size or if it is ever changing, the image will take on an elastic personality

The Hamburger

hamburger exercise example

The Hamburger ButtonOne conventional method to indicate navigation is to use an icon made of three lines which is refered to as the hamburger button. The set of navigation links is usually hidden from view until it’s accessed by the user. There are lot's of ways to hide and show navigation, but almost all of them require knowing the programming language called javascript. Later on we’ll learn a little about this language, but today we'll accomplish this using only HTML and CSS.

ID and Class Attributes

Example of ID

The most specific we can get is to use the element as the selector coupled with it’s id attribute. Remember when we added the id attribute to our h2s? We discussed adding this for anchored navigation but it has a second use, which is even more powerful. Giving an element and id attribute (id=), means you are giving it a name, but not just any name… an absolutely unique name. You should not ever repeat an id. Think of them like social security numbers, every person has one of their own. Classes can be reused on multiple elements, but id’s are all unique and should not be reused for any reason.Because the id is unique, then if you use the element and it’s id in the CSS, there can be no other element that has that in common and you can style just that single element if you so choose. A good example of an element that might need to be uniquely styled would be the logo of our website. It seems to be sitting awfully close to our hamburger button. It might be better to give it just a little bit of breathing room by setting it to have some margin on the left.Now, we wouldn’t want to do this to all images, so using img as a CSS selector doesn’t seem appropriate. We could use a class, but there is only one logo image so that doesn’t seem appropriate either. Instead, we will use an id – because id’s are for elements that only appear once one the page.

USING an ID When we use the element or HTML tag, along with an id attribute, we can target an element very specifically. A while ago when we added the id attribute to our h3s, we used this process to make them anchored links. Most recently we used the id attribute to specify our mobilenav. Giving an element and id attribute (id=), means you are giving it a name. Most importantly, a name for an id is an absolutely unique name. Once the id name is used on a page, it should not ever be repeated. You can think of the id like a license plate or a VIN number, because every car has one that is unique to itself.

USING a CLASS While, the id attribute should only be used for one thing on a page, the class attribute, on the other hand, can be reused for multiple elements. We created and applied classes for several different parts of our text (.when for the days, dates and times; .where for the locations; .event for the kinds of events) so we could style these in a similar way.

APP Website Work

Project Wiredframes
User Journey

Over the semester we had an APP project, each of us were in charge of creating our own original app idea. Once we had our idea figured out. we sketched thumbnails for what we would want our wireframes to look like. All together, we made a user journey, wireframes, an icon, a logo, and coded our own website based on the app.

Custom Fonts/Favicon

fonts test exercise

Custom Fonts Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.

Commenting Your Code

example of comments

All comments are written with opening and closing characters and are used to demarcate a category or an area of similar things. Earlier we looked at using comments in our HTML to identify areas in the code. Today we are going to add comments to our CSS to help us organize our growing lists of styles. In HTML Comments are written with an angle bracket and an exclamation point. Comments in CSS are written starting with a forward slash followed by an asterisk and a space. To close the comment, the characters are reversed.It looks like this: /* LAYOUT & GRID */

Copyright 2017