almightybearddigitalssemest-blog

[almightybearddigitalssemest-blog]

Adobe Autopsy 2

Q1

What are the uses and benefits of using Muse?

Muse allows people/designers to create personal and professional websites with out having to know how to code websites. Muse also offers a handful a helpful tools for creating websites that allow users to add things such as slideshows without having to code them to work themselves.

Muse being from Adobe means it is very compatible with other programmes such as Photoshop and Illustrator. 

Q2

How can you use Adobe Muse to improve your work or develop work for industry?

Using Muse allows you to upload work onto a site quickly and easily meaning you can use this to make a gallery/portfolio for your work giving off a higher quality in design. Muse is also easy to use and can be uploaded to the web quickly using export features so that making websites for clients is easier to do. The programme is kept up to date with modern standards allowing the designer to keep all his work up to date with newer software/technology.

Q3

What are the three things to consider when designing your website?

When building a website you need to consider Implementation, Composition and Accessibility. Websites need to work well and support the amount of traffic running through them whilst also looking appealing to the viewer. They also need to be accessible to the client so that any needed changes are easy to do.

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?

The site needs to look good and professional and appropriate for what i am trying to portray about myself. It needs to be easy to navigate and has a way for contacts/clients to get a hold of me.

For a clients website what would you need to consider?

For this type of site it needs to be user friendly and easily adjustable. It also needs to be appropriate for viewing and represent the client in the ways they wish to be seen.

Q5

What does HTML stand for?

HTML stands for Hyper Text Markup Language. 

Q6

What is hosting and why do you need it?

Without hosting the website would not run or be able to be found on search engines. Hosting sites will upload your files onto the web servers allowing people to view it.

Q7

What is a domain name and why do you need it?

The domain name is the name of the website/Url inside the network address that allows users to search for the site directly.

Q8

How much would it cost you to run your own website for 2 years?

The cost depends on the size and upkeep of the website as well as the hosting providers own set prices. On average a website hosting will cost $10-$15(£7 to £12) a year, For two years it will cost around £14 to £24 pounds.

Q9

What does FTP stand for and what is it for?

The term FTP stands for File Transfer Protocol, it is used for transferring computer files from a server to a client using the Client–server model on a computer network.

Q10

What is an index page?

The index.html page is the most common name used for the default page shown on a website if no other page is specified when a visitor requests the site.

Q11

What is a root folder?

A root folder holds all the files present on the website in one single place.

Q12

Why would you need to chose web safe fonts? Name 5 web safe fonts:

Helvetica

Times New Roman

Georgia

Verdana

Arial

Q13

How do you make your webpages scalable to the browser window?

To make a webpage scalable you need to enable Fluid Width by right clicking the purple bar at the top of the screen. This allows the page to scale to the size of the browser. You can always change back to a fixed width by doing the same process.

Q14

How can you use master pages in Muse? What are the benefits?

Master pages allow you to design a base page with rules that every linked page will follow. In websites this is useful for when creating assets such as the navigation bar and footer bar which will be shown on every page regardless so theres only need to create it once on the master instead of individually on each page.

Q15

What are widgets? And when could you use them?

Widgets are interactive pieces pieces on websites, these include items such as slideshows, contact forms and other things like the navigation bar. You would use these on pages like the contact pages to add forms to allow clients to email you or adding slideshows to display work.

Q16

What are the uses and benefits of using After Effects? (include an understanding of motion graphics)

After effects is very helpful as it is a simple and easy to navigate animation programme. Anything from small logos to animated series and even full cgi films can be made using this programme. Motion graphics are pieces of digital footage or animation which create the illusion of motion or rotation.

Q17

How can you use Adobe After Effects to improve your work or develop work for industry?

Animated videos provide a much more interesting way to show off my work than using static images. It also allows me to do animation work for clients in the future on a simple to use programme.

Q18

What is a composition?

A composition is like projects of animation. Its essentially what a page is in programmes like Photoshop. It contains layers that will be animated in After Effects ready to be rendered. You can also place multiple compositions into a larger composition to combine different animations into a larger one in the programme for example an intro can be a separate composition you add onto other videos.

Q19

What is the function of keyframes in After Effects?

Key Frames are used to plot points on a timeline where something will happen. Add 2 key frames and the change between the two will animate such as a change in opacity causes a fade or changes in scale make items of the animation grow or shrink. 

Q20

What effects work well in your animations? Why do you think this?

I have used a few effects in my video that i feel works rather well in my animation.

Typewriter - I used a base typewriter effect to bring in text which i randomised. I feel this works better than using a base animation such as movement and fades as i feel it adds a higher quality.

Scale Logo - I like how my logo comes in by scaling separate bars as i feel it adds a sense of flow and movement to the design.

Faded work - My work fades in and out over the top of each other and i feel it works well as its and easy way of doing it thats simple and easy to pull off.

Q21

What is CTI and what is the function of CTI?

CTI stands for Computer Telephony Integration. It is a name for any technology that allows interactions on a telephone and a computer to be integrated or coordinated.

Q22

How do you export your after effects file?

To export a video or animation you want to add your composition to the render queue, from here you will need to choose the settings for the file by clicking on where it says lossless. Go to video format and for the animation such as mine choose from the drop down H.264. Then choose where to save the file in my case to my documents and hit render and allow the animation to render through.

Q23

What are the 5 transform functions you can alter in After effects?

Anchor Point - It will determine the position of the object in comparison to where the Anchor Point is but is used predominantly to adjust the actual position of the centre Anchor Point.

Position - Moves an entire object including its anchor point across the X, Y and even Z axis to move an object across or towards the camera.

Scale - Scale adjusts the size in ratio depending on the position of the centre anchor point.

Rotation - Rotates the objects around the position of the anchor point.

Opacity - Determines if the objects is visible used with key frames to show fades.

[almightybearddigitalssemest-blog]

Animated Logo Evaluation

Here is a GIF file showing my animated logo with its full looping motion. I really like how it turned out. Due to the nature of my logo i found it easy to have it move by bringing in aspects one by one which matches my idea of having this quick and simple loop. To make sure i didn't over complicate my design i just reversed the sequence for the loop instead of working on a more complex way of the logo exiting but i feel this works a lot better than if i was just to fade it out. The way the text comes in could be worked because i do not like how we see the text stretching i would prefer it to reveal using a layer mask or something similar but in my opinion i feel it works well as it is and could be changed at a later date..

Above is a linked video to my Promotion i have uploaded onto YouTube. The video didn't work completely as its has been shrunk and has a black border but i think its an issue i had with the render so it should be an easy fix. I really like the animation and think it works well and will fit on my website with no hassle. With the display of my work i think it could be a little better, i feel areas of it are rushed and i would also like to remove the use of mock ups as the come with an ugly rectangular background which ruins the aesthetic in my opinion. I feel with a bit of tweaking the music could sync up better but i am very pleased with how it works alongside the animation at the moment. After being viewed by others some said they weren't to keen on the coloured bar transition so i might look into changing it but otherwise the response was good.

[almightybearddigitalssemest-blog]

Animated Logo Development

This is the final logo i had ready to be animated. I split the logo into 5 separate layers. Each coloured gradient labelled T,B,R,L (Top, Bottom, Right and Left) and the type.

To start the animation i changed all of the scales of the layers to 0 to hide them and let the arrive in at different periods.

Each change for the logo colours takes exactly 10f (frames) to run and is scaled up on the axis starting at the centre point on the edge to make the logo flow in a circle.

It takes 1 second and 10 frames for the logo to appear starting top left and going clockwise around the logo.

I then did a similar thing making the text appear from the left by calling the width axis from 0 - 100 over the span of another 10 frames.

Once it does this the logo stops  for 1.5 seconds to allow viewing before reversing the animation to disappear.

Self Promotion Video

The self promotion video is shown below

Part 1 - Intro

The intro to the video starts in the same way as the animated logo does. Instead of reversing i instead faded the logo out to speed up the process. before leading into a fade to a white screen, While looking into other promotional videos like mine i noticed they speak to the viewer with questions and intros saying Hi, I decided to use a question stating What Do I Do? which allows me to then move into looking through my work.

Part 2 - Showcase

For the Showcase i used the same process that repeats 3 times for each theme; Digital Art, Publication and Branding. I introduce the themes using the preset typewriter with randomised animation that i have sped up to last half a second. I then take fade out each type very quickly by fading in 3 of my designs each 1 second apart to give allocated viewing time as well. The process then repeats for each theme.

Part 3 - Bars and Outro

To provide an end i wanted the screen to fade back to black with my logo appearing again but i thought i’d use like a transition effect which i made. I used the 4 bars of colour that make up my logo and scaled them in one by one to cover the screen in my logos colours before fading a black rectangle on top. I then repeated my intro with my logo coming in and then fading out by copying the composition that i created using that logo.

Music

I felt it was unfinished so i added some music to accompany it. I searched through Royalty Free and No Copyright Music until i found a song that fits with the animation. The song i used is Joystick - Digital Math. I feel all the transitions link up but the ending is very abrupt as i just faded the song out so i will be working on syncing it up better. 

[almightybearddigitalssemest-blog]

Animated Logo and Video Research

Animated Logo And Motion Graphics

Definition - Motion graphics are 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.

Here is an example of an animated logo. i really like the embellishment in this image but i think this is too difficult to achieve in the time i have.

This logo gave me the idea to make my logo appear in sections as if it was being drawn in a circle. I really like the colour changes in this animation but i think i will keep my logos colour scheme the same.

Other Ideas for Inspiration

Sales Videos, Corporate Videos and Self Promotion Videos

Cosire

Cosire uses very interesting animations and graphics alongside a voice over explaining the company. The video is good at selling the brand to customers of the agency. I really like the wire frame look to the  design as it seems to be drawn with the animation. The main point is that they describe what they do with motion graphics and then ask a rhetorical question. “Are you ready to execute the power of design in your business?” This is a very persuasive technique that i might include in my own video.

Ideas - Word as Image

Looking for inspiration i found this video showing how words can play as images. I found it really interesting and i feel in the future this could help me come up with some ideas for the market of branding and logo creation. I feel for my video it might take up to much of the production time but i think it will help when thinking of ideas for motion.

Bad Example - Karnatarka

After watching this YouTube promotional video i agree with the majority of the comments made. The static type and un-synced music make it seem very boring and slow. It doesn't grab the attention of the viewer at all in my opinion. I think videos like this need to be quick and up beat to catch the eye of onlookers but also hold the time to show off work. It also takes far too long to show any actual work in my opinion so i will be looking to avoid this.

Good Example - Alfred Michael

I think this video is amazing for its purpose. I like how everything is in motion and there’s no static type which bores the viewer. It asks questions like What do i do? and the answers them using work and motion graphics in an interesting way. I would personally change the music as i do not feel it quite works in areas but i love the motion. I will be looking to uses as much animation as possible to avoid boring areas of static design but also working quickly to ensure the video gets completed.

[almightybearddigitalssemest-blog]

Muse Website Development and Inspiration

Master Page and Footer

I started off by creating a menu on the A Master Page that would be included on every page. The menu is from edited from the asset template. My menu consists of my logo on the left, buttons in the centre and social media icons on the right. 

The buttons follow the colour scheme of the logo, each button uses the colours of the rainbow on the rollover effect and then the active state follows the gradient look.

I wanted my website to have a matching footer, the footer uses the logo along side some contact information about myself. I kept my website in a black and white based look with the occasional bit of colour apart from the very colourful logo. 

I felt the footer i originally had was way to big so i shortened it down and i feel this works a lot better in my opinion.

Menu Edits

Here is the original menu I created for my website using my logo and social media icons I created.

Through suggestions i decided to make the social media icon only in white.

I felt the icons where too big so i reduced there size and re-centred them and i feel this works better now as they are less overpowering.

Home Page

Firstly I had to create a main homepage you can use to navigate my website. I wanted to incorporate pieces from all over the website in the main page.

I started of by using a basic slideshow which i can use to show off my best pieces of work to people as soon as they see the sight.

To separate different parts of the website i used large images in tiled format that stretches across the screen, I also added a quote/slogan to each one to explain my brand.

For the images i enabled Scroll motion meaning as you scroll you see different parts of the image. Images free for commercial use stock photos from WWW.Pexels.com  

For the social media section i wanted it to work like Facebook’s Messenger because its a very well used communication method. I did this by adding Parallax features so that as you scroll down the messages fly in one by one as if they were being sent.

For the bottom section i used three shapes as buttons, One with a shirt linking to the T-shirt section and the store link on Society6. The camera links to my photography and the contact me button goes to the email page. The two symbol buttons use parallax features like the messages before.

Gallery And Portfolio Pages

Gallery Home

I wanted to use thumbnails so you can view different parts of works like: T-shirts and photos etc.

The basic shape of the thumbnails are based on the shape of the logo using three curved edges and then they will have images filled onto them.

I used main images from each project to fill the thumbnails such as my Anxiety photography above.

The thumbnails would then become buttons linked to the gallery pages. I did this by adding a hyperlink and then changing the states so that as you hover over the opacity lowers to make it appear like the image lightens to suggest its a button.

Here are the basic six thumbnails i have and they all link to their respective pages.

Portfolio Pages

For the actual project gallery pages i wanted to use two different slideshows followed by a small description of the work and name of the project.

It starts with a main basic slideshow scrolling through every piece of work from the project.

It also incorporates a Lightbox slideshow so that you can pick and choose certain pieces to look at as well as the main slide show and i laid out the thumbnails under the main slideshow.

Other Gallery Pages

Each of my portfolio pages works in the same way.

About Me

On the about me  page i took inspiration from existing pages by doing it in a Q and A style by asking questions to myself to explain who i am. I will be placing my promotional video on the right using frames and embedding youtube links to let it run on the site.

Contact

This is the contact page I have designed. I kept a brief description on how to get in touch above the form a that allows you to message me. To fill the other space i used a large version of my logo without the text centred to make it feel in place.

Shop

For the Shop tab I wanted to incorporate a link to the Society6 page our college group has or one of my own in the future. The page is very simple and and uses a brief description of the site with a link and linking the society6 logo itself to the site.

Site Map

Here is my site map showing how my pages interact with each other. I wanted to keep 5 main pages for things such as the home and contact information pages and have sub pages off of the gallery so you can choose through current projects of mine.

[almightybearddigitalssemest-blog]

Muse Website and Hosting Research

Research

Web Design and Template Sites

Many of today's websites are uses both free and paid templates designed by larger companies. This is the easiest way to get a professional looking site without the hassle of design and coding. I do not like this because multiple people will use the same template resulting in no uniqueness in the design. I think they are okay for smaller businesses or smaller portfolio sites but for main sales websites they need to have their own look and design to them to make the unique.

Above : Wix Template Site

Template Sites

www.wix.com/ 

https://www.weebly.com/uk

https://www.yola.com/login

www.strikingly.com/ 

www.squarespace.com/ 

Inspiration For My Site

https://www.youtube.com/watch?v=KJMi5l9Ru-g

Elements of sites/ Navigation Bars, Headers, Parallax and other Assets.

Navigation

I want the navigation bar to be fixed at the top of the browser and for content to scroll behind it.

I want something like this to appear at the top of my screen at all times as i feel it would improve navigation. From most bars I've seen they use their logo followed by the navigation buttons and maybe other information such as social media.

Parallax

After viewing the tutorial video i want to use image scrolling along side other forms of parallax features.

https://www.spaceneedle.com/home/ - I really like how this site works with the anchor points in the parallax that changes the view as you scroll.

http://www.sbs.com.au/theboat/ - This website is amazing and i would love to get this good at web design. I really like the effects and movement it incorporates with the scrolling motion. 

http://www.loisjeans.com/es/ss2015/campaign - This website uses good motion in my opinion, this is something i would like to achieve if i have more time to make my site.

Web Hosting and Addresses.

Free Hosting Services

000webhostapp.com - 000webhostapp allows you to host websites from muse using the FTP for free with extra charges only applying if you wish to buy out your domain name and also require more memory for viewing traffic.

https://www.000webhost.com/

Awardspace.com - Award space is a free web hosting with limitations to web traffic and a max of 1GB of Disk space. FTP is available for file transfer when uploading straight from the Muse programme.

https://www.awardspace.com

X10hosting.com - X10Hosting is a cloud server hosting service that hosts websites for free. Again FTP is available but they also collaborate with a free site builder for people wishing to create sites quickly and effectively.

https://x10hosting.com

Web Adresses

Most web addresses such as the simple www.Websitename.com comes at high costs so free hosting services offer other addresses. The free sites above host sites using -

www.websitename.000webhostapp.com

www.websitename.awardspace.com

www.websitename.x10host.com

For me to own the site www.QuinnDesigns with .com, .org or others i would need to pay anywhere from £15 to £90 depending on the host and rates at the time

Evaluation (Added Later)

https://quinndesigns.000webhostapp.com

 I feel my website works well for showing off my style in design. On the home page I really like how the parallax works on the scrolling images as I feel it adds a depth to the page, the parallax features on the social media icons, messages and the link pages all work and come in at the right time after I tweaked a few of the key points on the motion, I’ve been through and also checked all the links work on my pages including linking the main logo to take you back to the home page, the gallery pages work well in my opinion as I’ve given the viewer two options, you can watch as the work scrolls through but you can also click on the thumbnails below to bring up a light box to view certain images of my work, the slideshows are safe for swipe so on mobile and touch devices although not completely set up yet you can swipe through the images. The contact page shows all the details needed and sits well on my site, it has an electronic form for people to send inquiries to my specific email and it seems to work fine. The about me page isn’t fully complete as I can not got my video to work properly on the site at the moment but it’s a work in progress, also on that page ive used a Q and A set of questions for people to read more about me as a designer. The shop page is a work in progress as well, for now it holds a single link to my Society6 page but I am planning on adding a few more links to certain pieces of work like shirts and other prints as well as some copy to display information. Overall I think the site works as intended but I need to still tweak a few small things to get it up to my own standards.

[almightybearddigitalssemest-blog]

Self Promotion - Evaluation

These are my two outcomes. I have one of the logo by itself and another using the Arial Black font beside it. I am really pleased with how these turned out as I feel the Q design using a box with 3 curved edges gives off a sleek design that works well in current trends in my opinion. I used the Arial Black font in my logo as it is simple and compatible on most systems being such a common font for font books on computers and other devices. I feel the logo works best on top of a black backing due to the contrast that is created with the spectrum colours I have used. The Colours and logo can be interpreted in different ways so that the box creates and symbolises a Q, The colours I used range across the spectrum to suggest creativity but also to represent different areas of design I can cover and also the flowing of blended colours suggests a movement and development with design.

[almightybearddigitalssemest-blog]

Self Promotion - Development

I started off by making a square and lining up four smaller squares in each corner, I made sure they were all the same size and then removed the guide square (black square)

I now had the four squares ready to create a geometric design i wanted to base around my old Design Museum work as i felt it had a striking and powerful look to it.

Following from the design museum i used the same colour scheme as a way to represent different themes, I will associate colours with areas of design. (Red = Branding)

I then used the blend tool to complete my design.

It creates this gradient effect that links all the colours together with a single click. I felt the smooth gradient works better than stepped as the image feels flatter which is closer to current trends.

Heres what it looks like. I need to do a few tweaks to get it ready for adding the title/text to go with it.

I now needed to use the white selection tool to choose only certain corners of the design to round off.

I was looking at current treads and social media is huge right now. I was also thinking about using my initial in a way and i thought to make a Q id round 3 edges and leave the bottom corner to resemble the tail of the Q

Heres how it turned out. i really like the effect it has and ill need to add some text to name my self promotion.

I initially messed around with a few colours and i didn't like the results so i stuck with the original.

Here is the first draft but i really don't like the text. I feel its way to simple and i want something bolder that stands out while also being simple.

Here is the final logo, I used Arial Black font as its simple and being arial won't usually have many issues with compatibility or legibility. I also like its boldness, i feel it really stands out.

[almightybearddigitalssemest-blog]

Self Promotion - Research

I started my self promotion looking into logos and how they where made:

1.Adidas

The Adidas logo is a monochromatic logo, The logo uses both imagery and type to make it up. For the name it uses a custom lowercase Sans-serif font in the design. Today the logo seems to have been created using software such as illustrator which allows it to play with the shapes and text used in the logo to give it a newer clean design

2. Apple

This is the Apple logo, It works extremely well as a brand as we can tell what it is just by seeing the shape, there is no type required. The identity of the Apple Company is seen in its logo. The logo comprises of an apple, bitten from the right, with a leaf tilted towards the right side. This version of the logo was created digitally using the software that came around with the Apple computers.

3. Basking Robbins

This is the Basking Robbins logo which uses an interesting technique. They use their own font in the design as well as colouring parts of the B and R to make out a 31 used to show the amount of different ice cream flavours they provide. The colours used are pink and blue, the pink colour is used to signify the pink spoon which is given to taste samples, while the blue colour is representative of the quality and excellence of the product.

4. Coca-Cola

The Coca-Cola logo is recognised internationally. The white swirl of the logo is meant to stimulate passion and zeal among the youth today.  The font used for the Coca-Cola logo is in a calligraphic style. The C’s are different from each other showing this is a custom designed font. Like most logos this companies logo began as a hand made print but today was probably adjusted using programmes such as Adobe Illustrator.

5. F1

The Formula 1 logo is distinct to the sporting event. The red steaks are used to resemble speed as the lines symbolises the perception of movement. This logo is famous for using its negative space as the gap between the F and the red lines creates the number 1 in the name Formula 1.  The F1 logo features red and black colours on top of a white background. The red colour is suppose to represent passion and energy, while the black colour represents power and determination for the sport.

6. FedEx

The most interesting part of the FedEx logo is that it creates an optical illusion. Using the negative space between the E and the X it creates the shape of an arrow to resemble their “speedy and accurate service”. Due to the clean lines and time of creation i would definitely say this logo is digitally created on graphics software like the CC.

7. Nike

The “Swoosh” as it is known, the Nike logo was created by Carolyn Davidson, a graphic design student of the Portland State University, and was used for the first time in June 1971. She was paid merely $35.  The logo is also said to symbolise the wing of the famous Greek Goddess of Victory. Nike later featured the name NIKE in the Futura Bold, all-cap font to sit with the “Swoosh”. The logo was most likely made using early software on the newer Apple computers released at the time but later developed with updated programmes to add the type.

8. Twitter

The Twitter logo is special because every line in the design follows these curves.

This is done so that the logo sits and flows perfectly together and has no sharp edges to put off the design. It fits well in current trends as it is simplistic and flat.

My Logo

For my logo i want it to focus upon myself and for it to be both colourful and simple. Looking into using my initials i would prefer to use my surname Quinn and am thinking of using a stylised Q in the design.

After looking back onto my project with the “design museum” i noticed i like how id used blends on illustrator in the design of the template logo. I am going to try and incorporate this into my final logo.