jacob-westmore-design.com/

#WELCOME



ANIMATIONS!

💡

My Personal Logo in animation, rendered out to 4k simply to exemplify the amount of detail I put into an often 1 inch logo.



GO TO:








✌️

Nike Under Zues' Bolt "NICE (Nikê). 1. The goddess of victory, or, as the Romans called her, Victoria, is described as a daughter of Pallas and Styx..."

SOURCE

Designing a 'Study' on Greek and Roman Mythology went suprising smoothly from a 3D graphics perspective, even though complicated the 3 things (Tree, Statue, Pillar) I NEEDED to complete the scene were easily found on CGTrader.com! My frustration in part was found in the fact that I had set my heart and mind on destruction physics with a thunderbolt from Zues, although the only statue of a Greek God or Goddess available for free was Nike (aka. Victory). There had never been a fued between Zues and Nike, so my render is not accurate to any lore of Mythology, yet due to the assets available I'm chalking it up to swap it in with Hades any other time. As for now Nike's defeat references entandre to her namesake from Zues' Bolt.




GO TO:




Still scenes from the animation, starting with a zoom and pan out until the camera settles on a full view of the temple, then slow and action stikes as the lightning hits, leaving rubble skattered everywhere.





🐍

Medusa has been said to turn people into stone upon looking at her in Greek Mythology.

SOURCE


GO TO:




Screenshot of a mesium goer after having had looked at Medusa's head, turning to stone on camera, apparently Medusa's curse has taken another...





♨️

An animation based off my #RETRO80's theme again, looped video of a dancer over a VAPORWARE background.

SOURCE


GO TO:




The terms Glitch Art, VAPOWARE, Retro, 80 child, and a few others might come to mind when looking at similar designs. Mainly a visual experament of looped animation.















#GALLERY

Portfolio img
Portfolio img
Portfolio img
Portfolio img
Portfolio img
Portfolio img
Portfolio img
Portfolio img
Portfolio img

Above are Poster Designs that I have been making since junior year of high school. Some were required in college, others made for examples to the industries I dream to work in someday. The few I upload to display are only that of the highest quality I can produce. True examples of my abilities, especially in Photoshop. As a designer over an artist I feel I am constantly thinking of the intention behind the design, the over arching meaning of each portion one put time into. I can only hope my vision translates to each viewer well enough, for every corrilation an intentional nuance I laybored over.








#COMP & CONT



|
VOTE
|


|
 Website 1
 Website 2









The very first website I deaigned to host my designs... I was aiming for a very 'Retro' 90's animated theme. Based off an idea I came up with in highschool, this site incorperates 3 dimentional animation everywhere it can taking the retro vibe and exemplifying it in HTML5's newest features. Three dimentional float in menu pannels and the 3D image Gallery set up the groundwork for viewing in 3 dimentional layers. Something which just like in retro sci-fi movies, can be implimented into 3 dimentional displays and holograms once they exist. My only fear is that the use of classic and modern standards was so loosely followed that the design comes off as too futuristic in underlying idea, while possibly too dated from current design style and expectations... even though this was my intent.







The second page I created to host my design content, honestly, was formulated from the most polarly reformative feedback I recieved about my first website's design. I went back to the drawing board, thinking "Wow, I still really want something modern, but less flat than the most popular current trending style of - full page, ample white space, large color washs of flat colors, and avoid drop shadows - style that has emerged." That in mind I went for a strong use of shadows and gradations, while still showing off as much 3 dimentional design as possible. Leaning towards simplistic in look and feel while retaining the details people expect in a designer's website. Subtly including api's, javascript, and animated style sheets, everywhere I could goes to show the behind the scenes complexity bult into this site.










Beeple:























My Study:

















Design Study

I did this small design study as a side project for a book I wrote for my Senior Thesis. Intentionally trying to mimic Micheal Winkelmann's [aka. Beeple] daily designs in hopes of understanding how they were made; Learning the techniques and tools Mike used to create his work was my goal. In the program Cinema 4D, the same one Mike uses, I began to recreate each scene, decyphering what features and effects he applied to develope his work. Examining the textures, geometry, lighting, shadows, reflections, glow, and camera settings was an arduous process. Each of my renditions took approximately 8 hours, when Beeple creates a new design every day... Clearly still with enough time to spare for his comissions. As my skill with design improves I've begun to appreciate designers as talented as Mike. His work inspires me future endevors, guilding my efforts to the carrer of a lifetime.


GO TO MIKE'S SITE:















-VS-






.PNG
size: 36.2Kb
type: 8-bit [\24&32-bit]
Colors: 16 [\256 @ 8-bit]
'Custom' Color Pallet
'Noise' Dither at 100%
64% Web Snap
Bicubic Sharpener







.JPG
size: 35.2Kb
type: 24-bit [\32-bit]
Colors: 16MIL [@ 24-bit]
'Optimized' Color Pallet
'Medium' Quality at 41%
0% Blur
Nearest Neighbor





⚠ IMPORTANT ⚠

When trying to compress and save images for the web, JPG's reign king in web use, vastly outnumbering the use of PNG's. Mainly because of PNG's bloated file size for certain features, such as transparency and better upscaling, which is why they are still used seldomly for logo's or icons on websites. Most overlooked is the 8-bit PNG, due to its very limited color profile of only 256 maximum colors. The detail retained during any scaling in a PNG of any format is more than worth it in the case of large images [ ~ over 1000px × 1000px] or when scaling images to anything other than origonal size. Which is exactly why I expressly use 8-bit PNG's on my site. Was it apparent? When scaled up or down PNG's re-render their color profile to fill in the missing colors between each pixel, approximating the new color for the screen on the fly and preserving crisp lines and edges. JPG's on the other hand save washes of single colors to points within the frame, then blending the color to another color saved elsewhere with a gradient [a very similar process, just very different forms of compression]. This causes artifacts and pixelation, even while at origonal size, and far more apparent when up and down scaled. Also because of PNG's limited color profile, images saved over a certain size preserve their clarity and sharpness while being drastically smaller than JPG's, especially while using the correct 'Custom' colors, and 'Web Snap'. Lastly, both formats are lossy files, yet compressing the colors of a PNG to 8-bit is far easier to undo, compared to trying to recreate the lost data in a JPG. All it takes is a quick 2 to 3 pixel blur, then a matching 2 to 3 pixel sharpen; Smoothing and completing the colors within gradients and then resharpening the images edges. JPG's on the other hand are nearly impossible to gain the lost information back once compressed or downsized, without the origonal file.



As a great example of my workflow and quality of work, this poster of the 'Halo' franchise I designed at the end of my junior year. It took aproximately 8 total hours in Photoshop, and 20 hours in the Screen Printing Lab. The goal of the project was to create a CMYK color seperation of a digitally composed image to merge the lines between a photoshoped image of air brushes, 3D GCI, and designed logos, into a more physical unified reporduced poster print. My distributables and final products include: 9 [6 perfect prints, 3 rejects], 24-inch by 10-inch Half-Tone CMYK Screen Prints, and unlimited reprintable 8-foot by 3-foot [30000 × 10800 Pixel] Plotter Prints. Below are the Screen Print of the design, a video of the origonal images creation sped up 20 times, and some process photos of each step durring the CMYK printing. (The images on this site are mainly 8-bit PNG 256 'Selective color & Noise/Diffusion based' images, for full color PNG's use the links!)

GO TO 5K BACKGROUND:
















A closer look at these characters shows heavier missalignment on the left, thus due to misalignment from monitor type [NTSC/PAL to Square Pixel]. This can only be confirmed in FontForge, the program I used to create this new revision; Or any other font designer/editor. The origonal misalignment was easily fixed with snap to grid features, while also perfectly maintianing a 40 point line width.

The obvious tell tail from one to the other is clearly the accent mark, or embelishment added to each alphabet or digit [excluding symbols & glyfs]. In intention its purpose is to make the words stand out from offset <commands>... but that is entirely up to your opinion. At 12 point font the embelishment is designed to stick out no more than 1 pixel in any direction. Changing almost ever facit and aspect of this type might have transformed it into more of a display font. Yet the basis of my design relies directly in coding and programming use. Where here I hope my Version 2.2 of IBM’s 3270 font shines.

NEW FEATURES:
> From 500 to 480 points wide [Total character map width], while also redicing the actual character width by 40-80 pounts respectively.
> Fixed pixel missalignments for modern non-NTSC/PAL screens [Square pixel screens].
> While maintaining 100% even stroke width [MONO Stroke], and while keeping each and every character the same total width and height per map [MONO Block].
> Accented for easier code skimming through and reading [Designed to make 200+ phonetic alphabetical characters stand out amoungst symbols & glyfs].
> Kept geometric look and feel with 45° angles and sharply rounded corners.
> From 1000 to 900 points tall [Total character height map], thus fixing an NTSC 1.32 ratio by a factor of 100:[~30:20] smaller font sizing in points.

IBM 3270 V2.2:












#WEB-TOP

2 File Browsers at the same directory, & reading a .REG file; + 'collapsed' Media Player.
.REG in File Browser, Text Editor as XML, & Proxy Browser; + 'minimized' apps.
Doom 1995 running, the Image Editor in action, & the Application Menu open.

This "#WEB-TOP" site is a long time vision and dear personal project of mine. Designed around the idea that, through a web server I can get work done from most any computer or phone anywhere that I have an internet connection; Using any of the files I leave on it, simply by signing in. It is still a work in progress, I am constantly adding new web apps and features to it. As it is live currently, there are 2 file browsers, a text and code editor, an image editor, a media player, online proxy browser, an online code compiler, the game Doom, and a Web Camera program. The theme of design also comes from a very personal place, my favorite movie, 'The Matrix'. The sign in feature currently only blocks the more powerful file browser from being accessed, otherwise my "#WEB-TOP" is accessable to anyone with the URL. Payed login accounts will be added once it gets enough attention.



GO TO:





Made from a still of my 'Cloud 9 Major Victory' montage after they won the 2018 Boston E-League International Counter Strike: Global Offensive Tournament, turned into a background the frame still shines.


GO TO:





From EG, an old YouTube company I worked for shortly, this is simply a background of their logo I designed; Clean, simple, and elegant yet flashy this render shows the versitility of 3D programs.


GO TO:





I created this background for one of my favorite online entities, APLFISHER, a twitch streamer whom specializes in Counter Strike: Global Offensive, the video game represented in this graphic.


GO TO:





This is a personal background designed from my old LogoType and YouTube branding 'NOTECH4U' or 'NOTECH4Uproductions' as I'm known on YouTube. The theme I think is self described in my screen name pretty well...


GO TO:





Another Twitch streamer I did some pro-bono work for named 'JustFoxii', sent a shout out to her followers needing backgrounds for her channel and desktop, this was my contribution.


GO TO:





Google holds an 'IO' conference every year with competitions on advertising and homepage designs, I made this graphic for their 2018 conference to show off the power of what 3D rendering agents can do with color.


GO TO:





A local Dubstep artist was asking for a logo, so upon designing the logo I used it to make a desktop wallpaper, jade being his favorite stone I set the LogoType in it and re-emphasised the origonal logo's outline.





An old friend whom DJ's and Produces beats reached out to me for a logo, so for 'FLOW' I also designed a background with his logo, really trying to push the meaning of his name.







#RANDOM

> 

Over the summer of 2019 I decided to do a case study on the Retro, New Wave, Glitch Art, 80's Era Pop Culture 'asthetic' that seems to have punked sub-culture over the past few years. Taking insperation from anything with a key word I made the above two GIF's, each is linked to a 1080p Youtube Video version, just click. Below is an in web layover of two of the better frames from each, creatively putting my two ideas together to form a more cohesive still of what I call '#RETRO80'.




The information graphic on Personal Time Usage in the above gif is a barely finished project from college. I compared myself to national statistics, both of my age, and in general, to figure out how much time we use for what activities. In an endevor to strengthen my coding skills with a new Google analitycs api, and better understand information graphics by clearly portaying complex material, I sculpted this graphic from HTML.

GO TO:

Revive Energy Drink was a Packaging and Display project my junior year of college. The goal was to creatively redesign the packaging to a drink. I chose to create the above Packaging Design for a healthier 100% real fruit juice enegey drink, with minimal sugar, and a unique combination of suppliments. The fact that the pure juice from blueberries, cranberries, and cherries is all naturally red, and the aim of an energy drink is to keep you awake and alive, I designed Revive. Everything from the shape of the non-full coverage lable to show its red contents, to the design of the back lable to look like a blood bag sticker, were intended to portay the feel of serious, or extreme even. More details, and more images are hosted on the packagings web page...


GO TO:







Fallout Trilogy Shelter Box was the first project for Packaging and Display for me at UMN. Designed for the concept that older video gamers are into retro revivals of their favorite games in collectable sets. This trend got me to thinking how I might personally create a box set for the Fallout franchise. Included are an accordian folding 3 DVD set of the first three Fallout titles, a stand for the origonal CD and DVD cases, the DVD's, and the box itself. More details, and more images are hosted on the packagings web page...


GO TO:




High Land Heir is the product design of a T-shirt company targeting the Northern UK with high end boxed 100% cotton shirts. The branding provides a feel of Celtic Royalty to it, in revival of the freedoms won in Scottland, the highlands of United Kingdoms mainland. Inspired by their midevil victory over opression of the oligarques, this company requires solum respect to others from it's supporters and patrons. More details, and more images are hosted on the packagings web page...


GO TO:









One of the projects from my Advanced Web Design class at the UMN asked to redesign and animate the cover of a book completely in HTML, CSS, and JavaScript. I chose the book: 'The Splintering of the American Mind: Identity Polotics, Inequality, and Community on Today's Collage Campuses' by William Egginton. Recreating it with a literal splintering american mind blowing out the title with a huge graphic, which upon clicking splinters into oblivion. Yet as the subtitle subtly scrolls by with the authors name emphasised below that, all surounded by large quotations to give the title a sense of words again.


GO TO:







#HTML TUTORIAL

0]

This quick video walks through the Responsive Website my NEW TUTORIAL produces. The whole tutorial can be found on the #HTML TUTORIAL page under the menu. MOSTLY ALL of the CODE we will be USING can be FOUND under this URL:

w3schools.com/

TUTORIAL BELOW!

GO TO:




Demo Site is Live! Even though it is built all in 1 page, please refrain from downloading it if you plan to follow the tutorial... Much thanks to "W3SCHOOLS.com" for the vast majority of the coding instructions and code itself. Feel free to DOWNLOAD the entitre tutorial, once it's uploaded on this page. I highly reccomend using "CODEBUNK" or "HTML Editor" to do any coding depending on type, that is if you dont have Adobe Dreamweaver, NetBeans, Atom, or whichever coding enviroment you might prefer. Certainly the best online compiler I've ever seen.




1]

STARTING WITH DREAMWEAVER'S AUTO SCRIPTED HTML PAGE SETTUP, READ THROUGH ALL THE CODE YOU'RE GIVEN BEFORE USE! Just an exsample of how to open Adobe Dreamweaver and make a new HTML document. MOSTLY ALL of the CODE we will be USING can be FOUND under this URL:

w3schools.com/

2]

FOR EACH LINK, SCROLL DOWN TO "Try It Yourself>>" AND OPEN THAT LINK! Allows for best copy, paste of raw HTML seen as one complete document to another, this will help with learning how to read the code...

w3schools.com/html/html_responsive.asp

3]

This video simply outlines the sections to our One Page Site. Generally each of these sections are saved in sepperate .HTML, .CSS, .JS, .PHP, ETC files, then linked to eachother with: <style src=""> / <script src=""> / <link src="">.

w3schools.com/html/html_comments.asp

4]

FOLLOW ALONG CLOSELY AS TO WHERE THE COPIED CODE IS PASTED INBETWEEN! <div> and every other <> cascades to its child </div>, affecting everything inbetween.

w3schools.com/howto/howto_js_full_page_tabs.asp

5]

This video focuses mainly on CSS editing to change the flavor and feel of the visualized compiled code. CSS attributes can also be applied directly to any <_> though the style="" command.

w3schools.com/

6]

THE BULK OF THE BEGUINNING OF ANY DESIGN SHOULD BE STARTED WITH PLANNING AN ORGINIZATION TO YOUR PRE-GATHERED CONTENT. Copy and Inject the HTML and CSS on this web page:

w3schools.com/howto/howto_js_accordion.asp

7]

Once you have a repository of HTML pages you have coded yourself much of your' effort will have been saved. Then copy and pasting layouts you prefer will become easy. Copy and Inject the HTML and CSS on this web page:

w3schools.com/howto/howto_css_blog_layout.asp

8]

STILL READING THROUGH ALL THE HTML YOU'RE COPING? Make sure each page is similar in look by using the same header, footer, and generically any repeatable CSS/style sheet content as much as possible.

w3schools.com/

9]

Most responsive websites work using: Percentages, View Height/Width, and @Media (CSS) size restrictions. Follow along with the directions on this web page:

w3schools.com/howto/howto_css_image_grid_responsive.asp

10]

Always make sure you check each and every setting/attribute in newly pasted code... even class labels and id tags, ANY GIVEN NAME TO THE CODE, could BE repeated, an unnessisary duplicate, or even overiding the wrong element.

w3schools.com/

11]

THIS is the first instance of code copied, pasted, and repeated or reused within our site. Doing this saves time and ensures usability and readability within your' site.

w3schools.com/

12]

You are going to want to be CONSTANTLY GROOMING your' site for MISSING and other intentionally REPEATED PEICES & parts to any given page.

w3schools.com/

13]

Replacing placeholders will become a very common part of coding. As seen later in this video it is always important to use the shortest possible link to SRC, URL, HREF, and so on with file directories.

w3schools.com/

14]

MORE replacing placeholders... and DO NOT FORGET about right click, INSPECT ELEMENT. <- IS very USEFULL when using any other code editor other than DreamWeaver.

w3schools.com/

15]

HOW TO INSERT EMBED-able CODE! Lots of embeded code has restrictions on it, based through the api, javascript, or even iframe its being sent through; Work around them and/or check the support page of the host site for help.

w3schools.com/

16]

One MUST FIX any incorrect setting, overflow error, console error, and/or visual error ETC after every major change. Adjustment to connected pages involved or major paste of code, included.

w3schools.com/

17]

Just a couple more examples of embeded code from another site using iframes.

w3schools.com/

18]

Examples of some simple page embelishment one can add. The visual look and flavor of your' page should be similar thoughout, with cohesive colors, spacing, fonts, and graphic usage.

w3schools.com/

19]

WE ARE STARTING TO REPEATE STEPS... Keep going through and repeating what's needed to/for effect. Follow along with the directions on this web page:

w3schools.com/howto/howto_css_zig_zag_layout.asp

20]

Starting to streamline and efficize the code we have [USE REPEATE CODE AS LITTLE AS POSSIBLE]. Clean up anything unnessisary by: deleting useless code, refresh/'F5' your' page in the browser, see how the page was effected, if good leave it, if bad back to code editor and 'CTRL + Z' to undo, and repeat the process.

w3schools.com/

21]

Making of a table, for the footer, to be placed at the bottom of every page. Easy in DreamWeaver, but Table Makers are easy to find too, or just follow the given code structure.

w3schools.com/

22]

What information to add to your' footer, along with how to make it scroll back to the top.

w3schools.com/howto/howto_js_scroll_to_top.asp

23]

Even more footer formatting. (Generally contrains some of the most helpful and detailed information on the entire site)

w3schools.com/

24]

Adding a PHP Contact Form to the footer. PHP is exacutible server command code, or 'Hypertext Preprocessor' made for communicating between servers, yet ONLY works once hosted live on the internet.

freecontactform.com/email_form.php

25]

Follow along with the directions on the prior video, continue to get your contact card to mesh.

w3schools.com/

26]

Creating & Inserting a Google Serch bar. Follow along with the directions on this web page:

cse.google.com/cse/all

27]

Adjusting some minor visual elements, wrapping up the web page for filler and content.

w3schools.com/

28]

Getting the search bar to also be responsive like the rest of the page...

w3schools.com/

29]

Rollover Images make for very unique buttons... rewrite the code verbadem if in another editor.

w3schools.com/

30]

Lastly coding a standard button... and gooming over some of the minor background chages made to really complete the site's look, feel, and usability!

w3schools.com/



#ABOUT

HI! My name is Jacob Westmore – I am a 24 y/o Graphic Design student at the Univerity of Minnesota - Twin Cities. My forte is within the sector of Three Dimentional Graphic Design. Everything from designing something in 3 dimentions for real world use to designing something that looks 3D for 2 dimentional use or designs. I dream of some day becomeing a CGI artist or Advertising Animation Designer for a company like Pixar, Dreamworks, or possibly Bungie, or Electronic Arts. The design route I have taken to my career goals has developed a valuable sense of creating for an audience, designing for an intent, a purpose, and a practical use. The function of everything we interact with intregues me; Through the areas of Web, Editorial, Poster/Billboard or Advertising, and Three Dimentional Design (interactive digital and all other visual incuded) is my passion. Fell free to contact me for any type of design though, my education from the UMN has consisted of a very diverse curriculum on design, I feel prepared for most any project proposed to me.


FREELANCE RATES

2D Graphic Design Work
3D Graphic Design Work
Website Design Work



$18/hr
$20/hr
$25/hr

Estimates and Quotes Availible!
Cell Phone
E-mail



612-293-2522
westm104@umn.edu
westmorejacob@gmail.com







Logo

🔍 \