Day 56 – Lesson 4 (Web Design Fundamentals)

Today’s lesson dealt with the sort of tools I’ll need to make my workspace more efficient, and of course the most important thing to start on is the computer/laptop I’ll be working using.

It seems that a laptop will be pretty essential for the designing process for more mobility reasons, while having a computer will provide a desktop to use for as a dual monitor, which will also help in efficiency.

Over the summer, I built my first PC and again I was a total “newb” at this, but I was able to pick up some basic knowledge of what parts were more important than others. CPU and GPU were my tow big spenders for my computer, but I didn’t really realize the importance of RAM, nor the difference  between a Solid State Drive (SSD) or a Hard Disk Drive (HDD).

As far as the operating system, before today the last Windows I worked with was when Windows Vista came out. Since then I’ve been using a Mac, so I’m more familiar with the OS operating system then Windows 10 or 8.1.

The training video that I’m watching says use the system that you’re more comfortable with. Honestly, I feel it would be beneficial to have a basic working knowledge of both because there are many that will swear by Windows, just as there are many that will swear by Mac.

screen-shot-2016-10-31-at-1-56-41-pm

Something else that is really important for anybody who uses computers or laptops daily is storage. It is just as important to consider backup storage as it is my SSD or internal HDD. External HDD and flash drives are good to have for temporary backup storage or for on-the-go use.

Of course, another essential tool to have for web design is a code editor, and there are many considerations to think about  when choosing one. First, for those who are just learning about web design and coding, like myself, is user friendly and basic. Another is speed. If it lags, it will interfere with work efficiency. And finally, what sort of features does it have. Something to remember is the more features it has the slower speed of the code editor.

Here are a list of some features that you might want to take into account:

screen-shot-2016-10-31-at-2-19-58-pm

After finding a good code editor and graphics editor (like Adobe Photoshop and Dreamweaver) you’ll need testing tools to test websites on multiple browsers and devices. Web browsers like Chrome, Firefox and Opera are easy to install, but Safari and Internet Explorer are specific to their operating systems like Mac and Windows (respectively).

For Internet Explorer, will be helpful to use Microsoft’s modern.ie website to help develop specifically for IE whether on a Mac or PC. Unfortunately, Safari doesn’t really have this.

Another thing to do is create a device lab to test websites on multiple mobile devices like iPhones, Samsung Galaxy, tablets and iPads. This could be expensive, so it may be better to use one iOS device and one Android device in both phones and tablets.

…And I though coding was going to be the most overwhelming thing I would need to know for web design. Regardless, I’m still committed to learn more about this, because these are all things that I’ve alway been interested to know how they work, and even how other web developers got their websites up and running on multiple devices. I’ve opened websites that you can immediately tell that they were not tested for mobile devices, which is frustrating. Using your phone or tablet for web browsing is just as common as browsing on the computer or laptop anymore, so being able to test websites for as many devices as possible will come in handy.

Day 55 – Lessons 2 & 3 (Web Design Fundamentals)

So today’s videos and absolutely no hands-on stuff for me to do, so I didn’t actually do anything but I did gain some resources and information (as well as advice) on becoming a new web designer.

Prior to watching these videos, I had heard the terms front-end, back-end and full stack developers but didn’t really understand what those meant. In lesson 2, that was one of the things I went through in understanding what a web designer is. Front-end deals with the more visual side of web designing while the back-end is more programming. We didn’t really go over full-stack, my assumption is their kind of the “jack-of-all-trades.” Full stack basically has a deeper understanding of multiple layers in both the front-end aspect and the back-end of web developing.

That being said, there are still many other aspects of web developing such as UX Designers who deal with study of human behavior and tendencies and design accordingly, Motion Graphic Designers and CMS (Content Management System) Specialists to name a few others.

Here is another below:

screen-shot-2016-10-28-at-1-19-25-pm

While choosing one pathway as a focus gets my foot through the door to web developing, it’s important to realize that I may have to add another skill set that belongs to another pathway or focus like motion graphics, maybe some understanding in human behavior on the Internet and even content management for the website.

Lesson 3, was all about getting started with the website, and the easiest (and fastest) way to do that is by choosing a blog site. Of course they’re are free blogs out there (I’m using one now), and while they can give you immediate online presence, they do have their limits.

screen-shot-2016-10-28-at-1-46-29-pm

When creating  a website, James pointed out that one of the most important decisions to make is choosing your web host. To choose, I need to understand what are the needs of my site, what will it be used for and how will its needs grow in the future. A web host that James recommended was Bluehost.

Price isn’t the only thing I need to pay attention to. Other important things to be aware of is the uptime of the web host, data transfer, storage space. If I’m hosting a site that will have heavy traffic, what is the web host’s policy on how much bandwidth they’ll allow before charging extra.

Another resource that could help with one these is to measure the site’s uptime with UptimeRobot. Don’t expect 100% uptime, that will NEVER happen, but it is reasonable to expect 99.9%. If they don’t meet your expectations, don’t use it.

Another thing that’s important is the domain name of the website. If it’s for a company, realize that the company’s name may already be taken as a domain name for another website, so be flexible when creating the domain name. Have other options.

screen-shot-2016-10-28-at-2-10-19-pm

Day 54 – Lesson 1 (Web Design Fundamentals)

Ultimately, I want to know how to design websites. I think in today’s work force, this is an important skill set because everyone (anymore) needs a website to promote their product and their customer’s needs. So I’ve started a new video called Web Design Fundamentals by James Williamson on Lynda.com.

In Lesson 1, I started out with setting up up my text editor, which is jus the Mac’s stock option for coding called Text Edit. James mentioned two other text editors called Brackets and Sublime Text, or Windows’ stock option: Notepad.

I’ve briefly used some coding years ago, but not much to where I had a great understanding of it.

To start, I learned some very basic html coding, starting my bare, basic website.

lesson-1-exploring-html1

Next, I made “My First Page” as a heading, or h1, and “Exploring HTML” as the title of the page.

After, I went further to create the a paragraph in the body of the webpage underneath the heading.

lesson-1-exploring-html4_body

Next, I did some CSS creating the style of the body, which includes the heading and paragraph, by changing the color of text red. I then changed the heading’s style by changing the font, size and color to separate it from the paragraph.

To finish, I used a Java Script to create a button that would change the color of the text from red to green and back by using “If, then” logic.

The final video, didn’t really show me any hands-on to coding, but what is important to learn when going into web design for someone who is completely new. Like I said, I have a very “newb” beginner’s knowledge of coding. I understood the concept of starting a heading and and ending it like: <h1>Heading Title</h1>, but that was it. So I’ll admit, the prospect of learning how to code (HTML, CSS, and JavaScript) is a bit overwhelming, but I realize that there’s no way to get around it if I want to learn how to create websites.

Day 53 – Lesson 13 (Illustrator Essentials)

One of the final lessons of Illustrator CC Essential Training (2015) was about working with images and the Links panel.

First thing was placing an image on a document by going to the File menu then clicking on “Place…” This works much in the same way it does on InDesign by either putting the image on your cursor (if nothing is selected), or in anything that is already selected. Using the cursor I can click and drag anywhere on the document for the image to be placed, then use the selection tool to move the image where I want it.

Next was learning more about the Links panel, which is found under the Window menu. From the Links panel, I can check info on the image, its location and even update the link if the image has been altered or edited in any way. For example, I could open the image in Photoshop to apply some editing such as adding more vibrance and saturation to the photo to make the colors pop more, then adjust the curves. Once I’ve finished, I simply save the photo, then Update the link in the Links panel in Adobe Illustrator.

 

Day 52 – Lesson 12 (Illustrator Essentials)

In lesson 12 of Illustrator Essentials I worked with different ways I could edit text to make it more interesting using a poster.

There are two ways to add text to a page using the text tool. I could use point type, which is simply click anywhere on the document then begin typing. This allows me to type as much as I want without having to adjust the type field. Then there is area type, which is clicking and dragging over an area to create a type box.

I can also change either field into its opposite by selecting the field, going to the Type menu then click “Convert To Point Type” or “Convert To Area Type.”

lesson-12-creating-type_converting

I then went through and formatted the text how I wanted it to look on the poster by first selecting “The Great Justini” and changing the font color to white, then changing the font type to Playbill. After making those adjustments, I increased the font size to 72 pt and the text spacing to 15. Once I had finished with editing, I moved the text to center of the poster.

With the information I typed earlier in the area type field, I went to an RGB Basic color swatches to have more options for font color. I chose a light brown, then changed the font to Trajan Pro before increasing the font size of the “One Night Only” and decreasing the size of the rest. I aligned the text to center before moving the text field to center.

I then learned more about text wrap in Illustrator. I’ve used this in InDesign, but this is the first time I’ve gone over text wrap in Illustrator.

In order for Text Wrap to work on the text, I first had the select the object I wanted it to wrap around. Once I’d done that, I went to the Object menu, scrolled to “Text Wrap” then clicked “Make.”

The text doesn’t wrap around the object just yet until I right click on the object (or control+click), scroll down to Arrange then click on “Bring to Front” (or Shift+command+J). With the object now in front of the text, the text wraps around it. I adjusted the wrap by going to the Object menu, scroll to Text Wrap and click on “Text Wrap Options…” I change the Offset from 6 pt to 4 pt to finish.

Finally, to add another effect to the type, I used the “Type on a Path” tool.

I first, moved the heading “The Great Justini” to my pasteboard, then used the Pencil tool (N-key) to draw a smooth, curved line across the poster. I used the “Type on a Path” tool and clicked on the pencil path to begin typing “The Great Justini”, then added the Heading paragraph style to use all the adjustments I made to the previous heading to this one.

I then decreased the font size slightly so that the heading would be able to fit on the path.

lesson-12-type-on-a-path9_finished

Day 51 – Lesson 11 (Illustrator Essentials)

For Lesson 11, I learned how to use the pen tool and how to use it to create simple objects, as well as trace over artwork.

I first went over how to create a simple rectangle, which I could use the shift key to keep my lines straight when I clicked on the page. After I used the ellipse tool to create a circle, then went over each of the pen tools (Add anchor points, Delete anchor points and the Anchor point tool).

After going over each of those, I used the pen tool to trace over a flower pot artwork.

screen-shot-2016-10-24-at-2-22-45-pm

By clicking and dragging I was able to create curved lines and try and shape them to the contours of the flower petals. After I was finished, I fine tuned by using the Direct Select tool to shape the curves better. Using the direct selection and option+click and dragging on the handles I was able to better shape those curves against the artwork. After finishing, instead of trying to do the same to the inside of the flower petals, I copied my first selection (command+c) and then pasted it to the front (command+f) then scaled the selection to fit to the inside.

I used the pen tool to trace over the rest of the artwork, then selected the whole artwork and filling it in with a black fill in the Swatches panel. Earlier I had only did one of the leaves, so I used the reflection tool on the left-hand side. placing the reflection at the bottom corner of the leaf as the orientation point, then option-click+dragging I was able to duplicate the leaf.

Finally, I used the Shape Builder tool, then option+clicked on the highlight section to delete the black fill.

Day 50 – Magazine Project (finishing elements)

So for the Wednesday, I did some of the final touches on my magazine cover by creating a text banner on the corner and a mock sticker that showed the issue date, website and twitter handle.

For the banner, I created a text frame, and initially I chose the phrase “College Football News”, but later chose “NFL Playoff Projections.” I chose the Britanic Bold font, and a fill for the frame of a dark blue. I later changed the opacity of that blue to 60%. In the “Text Frame Options…” under the Object menu, I could make the text center align to the text frame. Rotating the text frame, I moved the frame to the position I wanted it.

Next, I created a sticker with the issue date, website info, and twitter handle while using a sticker effect.

First I wrote down the text with the information I wanted and decided to add a gradient effect on it to give it a shine. For the sticker, I placed an ellipse by shift+click and dragging till I got the size I wanted. I filled the circle with the same blue I used for the banner, and gave it no stroke. I then used the scissor tool to create to anchor points at the bottom. Using the selection tool, I selected the portion that I cut, changed the orientation point in the control panel then  flipped that cut section vertically to give the sticker a “peel” look.

To give that bottom section more definition, I created a “New Gradient Swatch…” in the swatches panel. After applying the gradient, I used the gradient tool in the left-hand panel to choose how I wanted the gradient to be applied across that section. I then went to the Effect panel and applied a dropped shadow to give it even more definition. After applying the shadow to that flipped section, I added another dropped shadow to the circle before grouping the text and circle together (command+g) and adding the item to the cover.

The only thing left I have to add to this is the barcode.

 

Day 49 – Magazine Project

Since I only have some minor elements to add to this cover before adding the final touches, I wanted to add a stamp element for my “Big 12 Expansion” cover line. The reason for this is because this is the only article that will feature a college level team rather than a professional team, so I wanted to add another element to it.

I used Adobe Illustrator to create this stamp, first using the ellipses tool to with a thick stroke of 10 pt. I then went to the Object menu, scrolled to Path and clicked on “Offset Path…” setting it to -80 pixels before clicking OK. This created an inner circle. I selected the outside path and repeated the same process, this time setting the Offset to -13 pixels. I decreased the stroke to the inner circle to about 5 pt, and decreased the other circled to about 3 pt.

I then added a rectangle with a stroke of 3 pt to the very center of the circle.

screen-shot-2016-10-18-at-1-41-19-pm

In the layers panel, I duplicated the center circle so that I would be able to keep the stroke for the next step. I used the scissors tool to cut the anchor points on the center circle to separate the paths. Using the “Type on a Path” tool, selecting the the top path of the center circle, I clicked on the anchor path with the tool to begin typing along that top stroke.

Using the Minion Pro font, bold, I increased the font size to fill as much of the space as I could. I then repeated the process on the bottom path as well.

Screen Shot 2016-10-18 at 2.10.14 PM.png

To add another effect, I used the star tool to create three, six-point stars and grouping them together, adding them to each side of my rectangle by option+clicking to duplicate. I then finished up with my final text.

I added a Burgundy type red to the fill of the stamp before adding my final touches to give a worn look.

screen-shot-2016-10-18-at-2-30-28-pm

I used the pen tool and created a curve. I then went to the Brushes Panel, where I changed the stroke to an Artistic Brush with a chalk stroke.

I increased the stroke, changed the color to paper, then added it to my logo.

screen-shot-2016-10-18-at-2-47-59-pm

I haven’t yet finished it to make it ready for my cover, but this is what the “stamp” logo will look like.

 

Day 48 – Magazine Project (contd.)

Since I had finished combining my cover image with the masthead last week, I wanted to to work on adding my cover lines. These would be my “articles” with a short summary of what they’re about to draw readers to this issue.

My four “stories” involve my main subject, Dak Prescott (QB of the Dallas Cowboys), and what will happen to him once Tony Romo comes off the injury report. Cam Newton (QB of the Carolina Panthers) and his continued sulking during press conferences when games don’t go his way. The MLB Playoffs and the Chicago Cubs fighting to end their 108 drought – they haven’t made the World Series since 1908. And the Big 12 Conference are planning to add two to four teams to their conference after losing teams like the Nebraska Cornhuskers and the Texas A&M Aggies

To start off, I added a text field to the past board and then typed each of my article titles, summaries and by lines (with page numbers) in just the default text. I would edit them once I began to cut and paste each into the magazine cover.

I selected “Dawn of a New Era? Dak Prescott’s stellar performance presents QB controversy for the Dallas Cowboys”, pressed Command+x to cut the text, then placed a text field on the magazine cover, then pressed Command+v to paste the text.

I then selected the title of the article “Dawn of a New Era?”, changed the font to Britannica Bold, increased the size to 36 pt, decreased the tracking to -25, and changed the font color to a gold with a black stroke to give the title more pop. I then proceeded to edit the summary where I changed the font to a simple Minion Pro with a font size of 16 pt, a leading of 14 pt, and tracking of -25. I used a white font color, since most of the image is darker, and bolded and italicized Dak Prescott’s name. With the byline, I used the same font as the title with an 11 pt font size.

Once I finished with that, I created paragraph styles for each of these and labeled the title as “kicker 1,” the summary as “explanatory 1,” and the byline as “byline 1.”

I then went through each of my titles, summaries and bylines on the pasteboard and applied each of my paragraph styles before cutting and pasting them to the cover.

I wanted them to be slightly smaller than my main article on the cover, so I did do some reformatting while adding new Paragraph Styles based off the originals.

I will be adding other elements to the cover later, but thus far the right image is the latest I have.

Day 47 -Magazine Project (contd.)

Today I combined my cover image with the masthead (title), and since I’m basing this off a Sports Illustrated that’s the title of the magazine I am creating.

I decided to go with the Dak Prescott (quarterback of the Dallas Cowboys) image for the cover. Opening the image in Adobe Photoshop, I used the Quick Selection and Lasso tools like I did on the previous image. After, I clicked on the “Refine Edge” in the control bar, I began to clean up my selection as much as possible.

in the Refine Edge menu, I changed the menu to Black & White. In the Edge Detection section, I checked the “Smart Radius”  then scrolled it to about 6.2 px to soften the edges, but not make them transparent.

Changing the view to “Overlay”, then using the “Refine Radius” and “Erase Refinement” tool I was able to clean up the edges. After making sure that this would add a New Layer with a New Layer Mask, I clicked OK.

Switching from Adobe Photoshop to Adobe InDesign, I added a graphic image box to the front cover where I will be placing my cover image. Going to the File menu then “Place…”, or Command+D, I was able to place the photo image I want to use for the magazine cover.

I then switched to Adobe Illustrator to finish up the masthead that I wanted on the front cover. I chose the font “Paragon” from dafont.com, which I thought was the closest one to Sports Illustrated‘s magazine covers.

Once my masthead was typed, I increased the font size, decreased the leading, and changed the font to a gold color and decreased the opacity to 85% so that some of the background image would come through. I then right-clicked on the masthead and clicked on “Create Outlines.” This allowed me to make some custom changes to the font. After saving the masthead, I added it to the cover.

To make my main subject on the cover come to the forefront, I used the subject from Photoshop and placed it on top of the subject in InDesign to make it appear over the masthead.