ztdigitalstudies2
ztdigitalstudies2
Digital Studies Semester 2 - University Of Suffolk
13 posts
Don't wanna be here? Send us removal request.
ztdigitalstudies2 · 8 years ago
Text
Adobe Autopsy 2
Q1
What are the uses and benefits of using Muse?
Adobe Muse is a program that allows the user to have full control over creating a website without any prior knowledge of coding with .HTML or .PHP.  Like all other adobe programs, muse is very easy to use thanks to Muse’s wide array of widgets, users can easily add slideshows, forms, menus and social media links. Muse can also be used in combination with other Adobe programs such as Photoshop and Illustrator.
Q2
How can you use Adobe Muse to improve your work or develop work for industry?
With muse i now know how to create a website that could be used to present my work in a different way, it also gives me complete control and creative freedom in things such as layout and parrolax scrolling effects otherwise unachievable by websites such as wix or squarespace.
Q3
What are the three things to consider when designing your website?
Page Design and Composition
Making sure the website works on all formats such as Computer, Mobile and Tablet.
Make sure every page is easily accessable.
Q4
One of the most important things when creating a website is your user. For your self promotion website what would you need to consider?
That it is easy to navigate and looks professional or at least looks appropriate to the way i would like to present myself as a designer as well as social media links and a contact page so potential clients can get in touch with me.
For a clients website what would you need to consider?
Once again that it is easy to navigate and user friendly as well as looking appropriate to how the client wants to present themselves by considering things such as colour, layout, font and imagery.
Q5
What does HTML stand for?
Hyper Text Mark-up Language
Q6
What is hosting and why do you need it?
Hosting is essentially running your website through a serivce (such as ehost.com or x10hosting.com which is what i used for my website), this service makes your website viewable and accessible to the public.
Q7
What is a domain name and why do you need it?
The domain name is the URL of your website, its what people type into thier browser or search engine such as Google or Bing in order to find your website, without a domain name noone would be able to find your website.
Q8
How much would it cost you to run your own website for 2 years?
It could cost anywhere from £12+ depending on the host so roughly the cheapest you could pay for 2 years would be around £24
Q9
What does FTP stand for and what is it for?
File Transfer Protocol
Q10
What is an index page?
The index page is the first page of a website that is shown if the viewer dosent specify a page they want to view in the search bar (E.g. ‘Fakesite.com’ would take you to the index page however ‘Fakesite.com/Store’ would take you to a specific page on that site).
Q11
What is a root folder?
A root folder is the folder that all of a website’s files are stored in.
Q12
Why would you need to chose web safe fonts? Name 5 web safe fonts:
Arial, Verdana, Courier New, palatino and Comic Sans are all web safe fonts that can be found at the top of the font menu in muse under the name ‘Standard Fonts’
Q13
How do you make your webpages scalable to the browser window?
In order to make a webpage scalable you need to right click the purple bar at the top of the screen in Muse and click on ‘Fluid Width’, this will make the page scale with the browser window. You can also right click the bar again and click ‘fluid width’ again to change the site back into a fixed width.
Q14
How can you use master pages in Muse? What are the benefits?
The master page in muse affects every page in the site map, if you add or remove something from the master page, the change will be made to all other pages. The benefits of this are that you can add a header and footer to every page by only setting it up once on the master page.
Q15
What are widgets? And when could you use them?
Widgets are interactable applications that can be added to a website, these kinds of applications include slideshows, contact forms and menus. You would use these apporpriatley depending on the page (E.g. use the email contact form on a contact page).
Q16
What are the uses and benefits of using After Effects? (include an understanding of motion graphics)
After Effects is one of the most utulised programs in motion graphics, it can be used to aimate anything from simple animated logos to special effects work used in big budget films such as Iron Man. It’s fairly simple interface, use of key frames and wide range of effects allow people to easily animate shapes, objects and text.
Q17
How can you use Adobe After Effects to improve your work or develop work for industry?
I can use animations to help promote myself with things such as animated logos or promotional videos and as someone with a love of pixel art i can combine both photoshop and after effects to make some fun and intersting little animations. I can create these types of animations or promos for clients as well.
Q18
What is a composition?
A Composition is essentially a file used to store all of your layer, images, text, keyframes, put simply, it is the after effects equivelant to an artboard or document.
Q19
What is the function of keyframes in After Effects?
Key frames are essentially the main key points in the video, they allow you to lock an object’s scale, position, rotation, opacity or anchor point to a specific value at a specific point in the composition, then if you change the vlaue and add another keyframe later on in the composition after effects will take care of getting the object from one key frame to another.
Q20
What effects work well in your animations? Why do you think this?
Honestly i haven’t really used many effects in my work however after looking into the topic i can say some effects i think work well include Stroke as it allows you to easily animate lines and generate some cool looking ways of making text appear. Gaussian blur as it allows you to turn an image or video into an interesting looking gradient that makes for a nice background for a logo or some text. FInally i also like 3D camera tracker as it is a cool looking way of showing text, similar to the opening sequence of the film ‘Zombieland’.
Q21
What is CTI and what is the function of CTI?
CTI stands for ‘Current Time Indicator’ which is the blue line on the timeline used to show what point in time you are at in the composition.
Q22
How do you export your after effects file?
To Export your file as a video you Go Composition > Add to Render Queue. This will open the render queue at the bottom of the screen, from here you can use the drop down menus on the left to adjust your compositions Render settings, Output module and Where your Video will output to. Once everything is in order click the Render button on the right and wait for the video to finish rendering.
For alternate ways of Exporting your file go to File > Export.
Q23
What are the 5 transform functions you can alter in After effects?
Anchor Point
Position
Scale
Rotation
Opacity
1 note · View note
ztdigitalstudies2 · 8 years ago
Video
vimeo
Promo Animation - Evaluation
I began this project by drawing out an initial idea which i used as the basis of this promo, after i had finished the initial concept i felt something was missing so i looked into other graphic designer’s self promotion and decided to add a little bit of text introducing myself. I also finally used an idea i wanted to incorporate in my animated logo by giving some personality to the cat face and making it wink at the beginning. I used the element of shape by once again using the triangles that build up my logo, this time I placed my artwork into the triangles which all come together to form the logo at the end. The materials used include Abode Illustrator and Adobe After Effects, I used illustrator to clipping mask the examples of my work into the triangles and then used after effects to put them all together into an animation. I wanted to convey a friendly tone whilst keeping it sophisticated and serious as that is the kind of message I try to get across in person as well and I felt it made sense to advertise my brand the same way I want to advertise myself. I feel I was successful in doing this, the music in the background has quite a calming a friendly feel to it and the winking cat face helps in re-enforcing this friendly feel whilst the use of the colour black and the fact it isn’t too flashy help in keeping it sophisticated. Overall I am very happy with the final outcome of this promo video, I achieved what I wanted to both visually and in the message that it conveys, it particularly like how clean the ending looks when all the triangles slot together. I don’t really think I’d change anything, perhaps I could have added some more text explaining who I am but I’m happy with it as it is.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Promo Animation - Research
I looked into several promotional videos made by other graphic designers to understand what they often contain and help in influencing mine.
Apple
youtube
Apple is a multi-billion dollar company which has been around for decades so obviously they have alot of money and resources to spend on thier promotional material and i wont be able to create anything like this in the time given. I find the ideas in this video very creative and interesting, making me believe that apple is a company with creative and interesting ideas. The music used it quite inspirational but seems a tad overdone and so i’d like to avoid using this type of music in my video. They use mostly blacks, whites and greys to maintain their sophisticated look and it all ends with a simple flash of thier logo which is so easily recognisable at this point i would like to consider these aspects in my video.
Kick Starter
youtube
Kick Starter is a website where people come to sell thier ideas for anything from buissnesses and services to films and video games, this one is for an educational app. Firstly i hate the music choice, every single kick starter video uses this ‘cheerful’, ‘uplifting’ Ukelele music and its pretty much a cliche at this point and so i will definatley be avoiding this in my promo. This video dosen’t do such a good on selling an idea to me, it dosen’t really show any footage of the app, just two screenshots, a few arrows (that dont have fully transparent backgrounds) and some text written by a png of a hand holding a marker, the entire video just looks very amatuer and dosen’t make me feel like the creators put alot of quality into thier work. To combat this i won’t use pictures i find online and only use things i have created myself.
Rachael Park Design
vimeo
This promo is very similar to what i woul like to achieve, it shows the areas of design Racheal works in and in a visually interesting way. I like how the shapes that make up the icons all come in individually, it’s much more interesting that just moving the icons move in from off screen or fade in. I also like her use of sound effects as the icons pop in and move around and the music is much more different than the typical piano or ukelele song.
Wesley Parsons
youtube
This along with quite a few others begins with the person saying “Hi” either with the text or with a voice over (in this case both) and a small introduction explainng who the person is. I would like to have this in my video in some form but would like to perosnailse it in some way, rather than saying just “Hi” i would like to introduce myself in a new way. He also uses mostly blacks and whites except for examples of his work, this is what i would like to do as it fits in with the style i have been using throughout all the self promotion breifs.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Promo Animation - Development
Tumblr media
I Began by sketching up my initial idea which was once again based around triangles, i planned on placing my work into the triangles, then having them fly out from the centre of the screen and float in place for a second before they fly off out of borders of the screen. Then to finish it off, i’d have all the triangles fly into place and form the zeta kat logo.
Tumblr media
Firstly i counted how many triangles i needed to fill in order to form the logo, i counted 21 and so i went through all of my work from college, uni and personal projects and picked some of my best and most different. I Clipping masked all of these pieces of work into triangles and exported them as PNGs to keep their transparency.
Tumblr media
I then imported all the PNGs into after effects and put them in place like the solid black triangles from the animated logo.After forming all the shapes into the logo I moved the cti to later in the compositon and made key frames for all the triangles scale, anchor points, opacity, rotation and position so no matter what I do, the triangles will always end up in that position, i also moved the cti before adding keyframes to each triangle so they would slot into place at slightly different times.
Tumblr media
I then moved the cti to earlier in the video and adjusted each individual triangles poition and scale so they all come flying in from different directions, i also moved the cti for each triangle so they all come in at slightly different times.
Tumblr media
I then highlighted all of the triangle layers, right clicked and made them into a pre-comp so there were less layers cluttering the composition, i also did this incase i wanted to adjust the size, position, roatation, etc. as a pre-comp only needs you to adust keyframes on one layer rather than adjust multiple layers.
Tumblr media
I then placed a png of the zeta kat logo ontop and adjusted the opacity to make it fade in and the pre-comp fade out. I then essentially recreated my animated logo by scaling the logo down, moving it to the side, drawing a unique, white shape behind it and finally having the ‘Zeta’ emerge from behind it. 
Tumblr media
This time i also drew a line which extends out below the logo by having two keyframes with 0% opacity and a very thing line at the same point and another two later in the video with 100% opacity and a longer line. I also had text saying ‘Graphic Design’ and ‘visit zetakat.com’ fade in by adjusting thier opacities. 
Tumblr media
I used the same areas of graphics from the website 'pixel art', 'illustration' and 'digital', I didn't use animation as I was already showing my animation skills by making this video (and I didn't exactly know how to place an animation inside a triangle, nor did I have enough good examples). 
Tumblr media
I then wrote out 'pixel art' using the text tool and adjusted it's opacity so it would fade in, I then adjusted the scale and position of the pixel art triangles so they come flying in from the outside of the screen, similar to the pre-comp but this time i adjusted thier position every few frames so they jitter around and look like they,re moving fast. I then adjusted the opacity to make ‘pixel art’ disappear and adjusted the triangles scale, position and opacity so they shrink into the centre of the screen and disappear to look like they are flying out of sight.
Tumblr media
I repeated this process for the others.
Tumblr media
I then looked for music to play in the background which was different from the typical ukele music, i tried rock, techno, 80s Synth and in the end i could find anything that worked. I wanted to use some slower calmer music to fit in with my own calm nature,so i went in and removed some of the keyframes that make the triangles jitter so they would move slower and fit in better with my desired type of music. 
Tumblr media
After a bit of searching on Youtube i came across this video that fit in quite well (https://www.youtube.com/watch?v=cZq7vDKqrQ4), so i downloaded it via a ‘YouTube to MP3′ website, impoted it, lined it up with the visuals and added some audio level keyframes so it would fade in.
Tumblr media
I felt something was missing so i looked into other promo videos and deicided to add and extra 12 seconds by going composition > composition settings and changing the duration from 0:00:20:00 to 0:00:32:00. I wanted 10 seconds  in the beginning for a short introduction and 2 seconds at the end so the logo and ‘visit zetakat.com’ would stay onscreen a bit longer. 
Tumblr media
I dragged the existing layers towards the end of the video so what i had so far started at around 10 seconds in.
Tumblr media
I then typed out “I’m Z”, “A”, “K”, “T”, “A”, “T” and “E” sepreatley so i could adjust each ones opacity and poistion so it would fade out, move position and fade back in to make it re-arrange from “I’m Zak Tate” to “I’m Zeta Kat” which both introduces me and gives some context to the brand name.
Tumblr media
I then placed the Zeta Kat face and adjusted it’s Position and rotation so it floats down into the centre stays in place for a second then floats down off screen. I wanted to give some personality to the face and make the promo a bit more fun so i drew a unique black shape and adjusted it’s opacity and position to cover the face’s eye for a second and make it look as if it’s winking. To bring more attention to the wink i then downloaded a “Ding” sound effect off youtube and lined it up to when the eye gets covered.
Tumblr media
I found I had 3 seconds to fill in between the wink and the first set of flying triangles so i decided to add a bit of context to the flying triangles with a simple bit of text reading “I’m a graphic designer who is capable of the following:”. After writing it out i simply adjusted it’s position so it moves in form the left of the screen and off to the right.
Tumblr media
Finally i added it to the render queue, rendered it out as a video and uploaded it to vimeo.
0 notes
ztdigitalstudies2 · 8 years ago
Video
vimeo
Animated Logo - Evaluation
I began this project by drawing up my initial idea and as soon as the idea was on paper i got to work in Adobe After Effects. Once the logo was in place i looked up a few other animated logos to see what i could do to make the ‘Zeta’ appear and used the ‘Hype Films’ logo for inpiration.
I have used the element of shape by recreating the logo with a bunch of triangles, this allowed me to have them all fade in and out at different times, leading to a visually interesting way of making my logo appear.
I animated the entire thing within Adobe After Effects which is a program i have experience with but havent used in a year or so and this project was good refresher, i also learned how to create triangles with after effects.
I wanted my animated logo to convey a sophisticated yet light hearted message, i feel i was successful in creating sophisticated message however i would have liked to do something more with the ‘Zeta Kat’ head in order to give it some personality if i had more time on this project.
Overall i am very happy with the final outcome, the way the logo appears on screen is very cool looking and i think the ‘Zeta’ emerging from behind the logo looks quite clean and professional.The only thing i would proabably chnage is the lack of emotion and personailty in the ‘Zeta Kat’ head, it would have been more fun and light hearted if it smirked or winked or something like that.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Animated Logo - Research
The Definition of Motion graphics is “pieces of digital footage or animation which create the illusion of motion or rotation, and are usually combined with audio for use in multimedia projects.” Motion Graphics are essentially the link between animation and graphic design that is used for anything that wants to visually communicate some information (E.g. presentations, advertisments, Promotional material, etc.).
Tumblr media
I feel as though this logo is quite relevant to my own as they both feature a stylised animal head that is based almost entirely on one shape. I quite like this logo as adds a level of personailty to the bear, i would like to try and incorporate this idea into cat face but not exactly sure how yet.
Tumblr media
I quite like how this animated logo introduces its main element (the megaphone) first in a interesting way and then has the rest of the name appear from behind the logo. i would like to accomplish something similar to this however i doubt i can learn to animate something quite as intrecate as this within the time given.
Tumblr media
Personally i really like this logo but i doubt it can be truly appreciated by the general public, as a design student  i understand his use of anchor points in this logo. However i feel this interesting element of the logo may be lost on potential employers and people without much experience in digital graphic design. This isn’t a major issue as the way the actual logo forms and moves around is still quite interesting but i dont think i’ll incorporate any design elements such as this in mine. 
Tumblr media
This one is very visually interesting and i quite like it however im not sure doing something like this would not be appropriate for my more sleek and sophisticated design as this one uses what looks like more rough and rigid pencil strokes. This is another logo that i think is a bit too intricate for this project but i would like to learn how to do something like this in future.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Animated Logo - Development
Tumblr media
For my animated logo i decided to utilise the fact that my original logo was made up using triangles using after effects, i made some initial sketches showing how the triangles in the logo would fade in.
Tumblr media
 I made triangles by using the pentagon tool to create a pentagon, opened the pentagon’s shape layer and went to Contents> Polystar 1 > Polystar Path 1 and changed the shape’s points from 5.0 to 3.0. After making the initial triangle i just copied and pasted it 20 times to get 21 individual triangles then placed them in the right positions to form the logo.
Tumblr media
I changed the opacity of one of the triangle’s layers to make it fade in, then copied and pasted the points that indicate the change in opacity onto the other triangle layers but moved the points sightly further in the timeline so they all faded in at different times. 
Tumblr media
Once i finished the fading effect on the logo I selected all of the triangle layers, right-clicked and clicked Pre-compose to essentially put the fading triangles in a separate composition. This allowed me to easily scale and move the fading triangles without having to adjust each and every triangle layer’s Scale and Position.
Tumblr media
Next i adjusted the pre-comp so it would shrink and move to the right side of the screen so that the “Zeta” could be placed next to it, inspired by the ‘Hype Films’ logo i found in my research. I wanted to have the “Zeta” look as if it was coming out of the Logo so i wrote “Zeta” in after effects with the horizontal type tool in the correct font and had it come in from the right side of the screen. 
Tumblr media
The problem was that you could see it coming in from behind the logo and it made the eyes in the logo look strange so i used the pen tool to draw a unique shape that would cover up the type as it was coming in from the right. I coloured the shape white (same as the background) and placed it behind the logo so the logo wouldn't be covered up and the type couldn’t be seen through the eyes anymore.
Tumblr media
Finally I placed moved the ‘Zeta’ back over to the right and placed the pre-comp back into the centre of the screen. I then opened the pre-comp back into the centre of the screen  opened the pre-comp and then adjusted one of the triangles opacities to make it fade out, i then copied and pasted these opacity points onto the other triangles layers in a similar way to before so that they would fade out in a similar fashion to how they faded in. This essentially made the animation play in reverse so the ‘Zeta’ went back into the logo and the triangles faded away in the same order they faded in.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Website - Evaluation
Tumblr media
My website can be accessed at: http://zetakat.x10host.com/zetakatdesigns/index.html
I began this project by looking into other portfolio websites and how designers advertise themselves, the two main inspirations were Urbanape.uk and Mikekus.com which both advertise themselves differently. I liked the slightly more sporadic nature of Ubranape’s homepage by showing a bunch of areas of design he works in and in no particluar order however i preferred Mikekus’s more organsied layout and sophisticated look so i took these elements from both to inspire my website.
I’ve used the element of shape by placing all images into ‘Zeta Kat’ Heads with the exception of my portfolio page which use slideshows instead. I’ve used only blacks and whites in my design (excluding the colourful images used) which give off a more sophisticated look.
I used Adobe Muse to create this website which (i can assume) was a lot easier than actually coding my own website and the overall experience was a bit frustrating at times but in the end i achieved my goals and made an intersting website that reflects the sleek design of my logo. It was my first time using muse in a few years and my first time actually doing anything web design related but i feel i’ve learned quite a bit about site maps, widget, states and why you shouldn’t just copy and paste things from illustrator straight into muse.
In the end i am happy with my final website, i like my use of the ‘Zeta Kat’ head to frame the images and feel the layout makes the page look clean and easy to navigate. If i could change anything would probably be my portfolio pages, i only added two specific pages and one miscellaneous one, i did this to show how i would layout all of my future projects if they were to be added to the site but i feel i could have done a couple more. I also would have liked to experiment with my slideshows on the portfolio pages, they are servicable but they could be abit bigger when you click on them.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Website - Research
I began my research by looking into other designer’s potfolio webpages.
Urban Ape
Tumblr media
http://urbanape.uk/
Urban Ape is a portfolio page belonging to a London based Graphic Designer called Jack Freeman. I really like how he has laid out his front page to show how the areas he works in, the sites overall look is quite fun and creative, i’d like to create something similar to this for my website.
Tumblr media
Instead of a header he uses these areas of design on his front page to link to other pages showing all of his work relating to said area. This to me seems abit unorganised and i would like to incorporate a header in mine and have a couple of portfolio pages.
Tumblr media
He Also uses Slideshows on his homepage to show off some of the branding and logo work he was done, this is cleaner and more interesting than if he were to just place all of them there in a grid or something.
Mike Kus
Tumblr media
http://mikekus.com/
This portfolio site belongs to Mike Kus who is a UK based graphic designer. I Quite like the simplicity of his website by using only black and white for the headers, footers and essentially everything but the images he uses.
Tumblr media
He also uses the ‘Mike Kus’ text on the left as a Home button which makes the whole header look cleaner and easier to navigate.
Tumblr media
I also like the way he has an individual page for each project in his portfolio, by seperating everything it makes the website look more organised and less crowded.
Template Sites
Tumblr media
(Squarespace Template Site)
Template Sites are websites that allow people to make thier own custom website using one of many pre-designed Templates. Some Examples of Template Sites include www.strikingly.com/, https://www.weebly.com/uk, www.squarespace.com/ &  
www.wix.com which i used to create a website for my old Youtube Channel a few years ago.
Tumblr media
Web Hosting
Web Hosting can be fairly expensive, that is why free hosting sites exist such as:
000Webhost.com
Freehostia.com
FreeHosting.com
Zymic.com
Byethost.com
Awardspace.com
and x10hosting.com (which is the site i used to host my own website)
These sites all use dfferent web adresses than the standard ‘ZetaKat.com’ as addresses like that can cost anywhere from £15 to £90 depending on the host. That is why free hosting sites and template sites will often use addresses that include the host’s name Such as ‘http://zetakat.wixsite.com/zeta-kat’ or ‘http://zetakat.x10host.com/zetakatdesigns/index.html’.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Website - Development
Tumblr media
I began by opening a new Muse document, from there the site map tab opened automatically, i used the little + signs next to each page to create a “Home” Page, “Contact” Page & “Portfolio” Page.
Tumblr media
I double clicked the homepage from the site map and created my first version of the homepage which was based on a portfolio site by the graphic designer known as Mike Kus, i treid placing a portfolio right below the header but decided against it because it would make the portfolio pages i planned on making pointless.
Tumblr media
I then started again, double clicked the Master page to create a header and footer to be used across all pages. The Zeta Kat logos and Icons next to ‘contact’, ‘portfolio’ and ‘store’ were all made in illustrator with the pen and shape tools which i then exported as jpegs and placed in Muse.
Tumblr media
To make sure the page links on the header worked i clicked on the icon/ text and used the hyperlink menu so that it would send you to the contact, and portfolio pages. I did the same thing for the store a social links but instead i placed the URL for my Facebook, twitter, Instagram and society6 pages.
Tumblr media
I also used states so that the tabs on the header would highlight when you hover over them with the mouse.
Tumblr media
I found a portfolio site for someone who calls themself “Urban Ape”, i quite liked the way they used thier home page to show what areas of graphic design they specialise in and so decided to do something similar.
Tumblr media
I opened some pictures of my work, my face and a nice forest into Illustrator and used clipping masks to place my work into the shape of my logo, i then expoted them as JPEGs, placed them into muse and added the writing around them.
Tumblr media
I originally just copied and pasted the SVG files straight from illustrator to muse but it made these weird scroll wheels appear around everything so i had to go back and export all of these assets as jpegs.
Tumblr media
To Make the animated gif still move while inside a Zeta Kat logo I had to open illustrator and draw a white box, i then placed a zeta kat logo onto and created a compound path to essentially make a white frame for the gif that would blend in with the white background. I also had to add some white boxes around the edges to cover up the gif.
Tumblr media
On the contact page i used a simple contact form widget, then double clicked the text and boxes to change the fonts and colours of the form to fit in with the style of the rest of the site.
Tumblr media
On the Portfolio Pages i used a Lightbox slideshow to present my work, firstly i dragged and dropped a Lightbox widget onto the page, then i dragged the thumbnail box and thumbnails themselves to make the thumbnails bigger. I then dragged the Lightbox display to make it bigger as well, then i placed several images into the slideshow by clicking the thumbnails when placing the images, finally i clicked each individual thumbnail and changed the text at the bottom of the display so it described each image.
I did the other portfolio pages using this method.
Tumblr media
This is my Final version of the Site Map.
Tumblr media
Finally i uploaded the website by creating an account on x10hosting.com and opened Muse to go File > Upload to FTP Server then used the info given from x10hosting.com to upload the site to my domain.
The Site can be viewed here: http://zetakat.x10host.com/zetakatdesigns/index.html
0 notes
ztdigitalstudies2 · 8 years ago
Text
Self Promotion - Evaluation
Tumblr media Tumblr media
I Began this project by jotting down ideas on graph paper and developing them on-screen, after quite a few failed logo designs I decided to take a different approach and come up with a better name for my brand rather than just using my own name. I eventually came up with the idea of scrambling the letters in my name to create some form of anagram and from this came the name “Zeta Kat” and after that it was quite easy. I came up with a nice simple Cat face logo to relate to the word “kat” in the name and added the word Zeta next to it, with this I finally had my logo.
I’ve used the element of shape by creating the logo using loads of small triangles, I did this because some of my early logos were made with this and I quite liked the process, I also used it because it gave the cat face a more professional look and if the face looked rounder I feel it may have come out looking more childish.
I have used both digital and traditional methods in creating this logo, a lot of my early trial and error logos were made with pen/ pencil and paper meanwhile as the project went on I began creating more logos with Adobe Illustrator as the program is vector based and practically made for producing this kind of work.
I wanted my logo to look professional and I wanted something unlike what I have done before (I.e. Pixel Art), I also wanted the kind of logo that was simple enough that it can be implemented into many different things. After experimenting with the logo using different clipping masks and mock-ups I can clearly see that my goal of creating a logo that can be applied to many different things has been reached.
Overall I am very happy with my final logo, it looks professional, it looks new and different from what I have accomplished in the past and I find the name “Zeta Kat” as an anagram of my name quite creative. I also like the fact that a cat face would be used to advertise my work as personally I'm a fan of cats and I have no objections to using a stylised one in my logo.
If I could change anything it may be the logo in general, although I am very pleased with this logo and I feel it is very professional looking I am not sure it looks too serious and in turn does not reflect my personality, however this is a logo to advertise my work and not me as a human being so it doesn’t bother me that much. Another thing I would not mind trying it experimenting with is the word “Zeta”, in the final I just used a font that looked good alongside the cat face but if given the time I would like to try spelling out “Zeta” with triangles like how I made the cat face just to see if it would look any better.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Self Promotion - Research
Logos
Bird Logo by Will Paterson
Tumblr media
He Began by opening a photo of a bird into Illustrator then changing its opacty and locked the layer so it can be used as a template, he then created a new layer above it and drew several cirlces, the first was to line up with the top of the birds head and beak and the others were to seperate the beak and eye from the rest of the design.
Tumblr media
He then selected the Shape builder tool and held Alt to remove the parts of the circles he didn’t need, from here he had the base of his logo.
Tumblr media
He then used the live paint bucket tool to fill the shapes in and turn it into a silouhette, he then went to Object > Expand and clicked Ok. He then ungrouped the shapes to make them all seperate so he could use the fill tool to colour them in.
Tumblr media
He then followed the same process of drawing circles and removing sections with the Shape Builder Tool to add Shading and to Remove Sections of the logo to make it look more feather-like.
Tumblr media
This Technique is known as a “Logo Grid”, its when a logo is made up using a bunch of different shapes and has been used in logos such as Apple and Twitter. It’s not exclusive to circles however, some use squares and some just use lines.
Personally i quite like the idea of creating a logo using a bunch of shapes as a base, i believe this will keep the entire logo consistent.
Upward Church Logo by Will Paterson
Tumblr media
He Began by drawing a simple Mountain inside of a circle using the shape and pen tools, he then went Object > Path > Outline Stroke. He then selected the whole thing and used the merge tool in the pathfinder window, after that he released the compound path and deleted the outline part of the shape to get the negative space logo. Finally he used the direct selection tool to round the edges and added colour with the fill tool.
This is quite an interesting looking logo and i would like to attempt doing something similar to this possibly with my initials.
Hipster logo generator
Tumblr media
I used the online Hipster Logo Generator to create this example of What Not to Do in my logo, these logos are very common today and just look cheap and uninteresting and so i will try my best to not create something that looks visually similar to this.
0 notes
ztdigitalstudies2 · 8 years ago
Text
Self Promotion - Development
Tumblr media
I began this project by drawing out some ideas on triangular graph paper before trying to recreate them in illustrator, i based most of my drawings around my initials as i believed that would be a decent starting point.
Tumblr media
Here are the logos i generated from the ideas on the graph paper, i didn’t use any of these as i didnt feel they were strong enough, though i do like some of them they all felt very boring in my eyes for example the top right is just a simplified version of my youtube logo, the logo based on my glasses is boring as ive used glasses and a beard to define me for a few years now, the bottom left was an unfinished pixel based logo which is a style i have used alot and wanted to stary away from a little bit and overall they didnt feel new, i wanted to create something unlike what i have done before.
Tumblr media
I Began by coming up with a new name, i ended up with the name Zate which is a combination of Zak and Tate and took inspiration from one of my favourite pixel artists “Kearu” whos logo is often used in the bottom corner of his work along with a link to his website and stands out nicely from its background.
Tumblr media
I then started trying to make bold, simple and flat looking logos based around the letter Z and quite like some of the outcomes however still didn’t feel satisfied.
Tumblr media
I was really happy with this lightning bolt one until i noticed it is essentially just the screw attack logo.
Tumblr media
I decided to change the name again but this time took influence from one of my favourite music artists “nujabes” who’s name comes from spelling his own name “Seba Jun” backwards but found that “Etatkaz” didn’t really roll off the tongue so I found an word scrambler online and tried finding a good anagram of my name. From here I found the name “Zeta Kat” which sounded cool to me and as a cat lover I jumped at the opportunity of having a cat be the base of my logo. 
Tumblr media
Relating back to the graph paper used at the beginning I decided to create my cat face using small triangles, the first version looked good to me at the time and so I experimented using it with different fonts and text placement but over time the cat face started to look more like a pig and so I changed it to the slimmer version, then due to feedback from friends I was told there wasn’t enough detail so I added the eyes.
Tumblr media
To test that this logo could be implemented in many different ways i decided to try using one of my personal favourite colour schemes, CMYK just to see how it looked and ended up with a nice paint splatter textured icon and a cool looking wallpaper/ backgorund.
0 notes