bethanyjuggyearone - Tumblr blog

[bethanyjuggyearone]

ADOBE AUTOPSY

ADOBE AUTOPSY 2

Q1

What are the uses and benefits of using Muse?

Muse is used to create websites for your own personal business/portfolio, a company, client etc. The benefits of this are that you do not need to use coding to create a website, therefore it is a quicker and easier process. Everything is already available in the programme, including fonts, page layout and tools including shape and effects.

Q2

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

You can use Adobe Muse to either improve already existing websites to make the layouts neater and easier to navigate around or in general improve your work by placing the pieces on a amazingly laid out site. This will then hopefully attract clients; therefore develop your work for industry.

 Q3

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

1. Choosing a domain name and host to publish the website

2. Whether it works, it can be confusing or potentially hard to navigate around i.e. the pages. Sometimes layouts can be poorly designed, which may put people off visiting the website.

3. How clients will contact you, I will need some personal information on there, but I will have to make sure this isn’t a home phone number or address as you never who’s looking at the website. The best option is to add in a contact form, which will send me a message to my email address.

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?

You would need to consider a logo for yourself for people to recognize you by. You would also need a strong portfolio, whether that includes linked videos or an online store. You will also need to bare in mind how clients would email you, meaning you would need some sort of contact information available.

For a clients website what would you need to consider?

You would need to consider whether they already have their own logo design and contact information for the website. What sort of layout would work for them and a colour scheme that appeals most to them or their style of work. You also need to make sure that they are able to get onto the site themselves and adjust images/add more to the portfolio.

Q5

What does HTML stand for?

HTML stands for Hyper Text Markup Language

Q6

What is hosting and why do you need it?

Hosting is where you pay for space on a server. You need this to be able to place your website online for people to view.  

Q7

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

It is the name of the website. You can either use an already existing one for free, or pay for your own name monthly. You need to name your website so when people search for your website it will come up straight away. Your website would be non-existent without a name. Q8

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

Going by the average price per month, it would cost roughly £80 to run your own website for 2 years.

 Q9

What does FTP stand for and what is it for?

FTP stands for File Transfer Protocol. It is one of the most efficient network protocols for transferring files between two computers or hosting servers.

Q10

What is an index page?

The Index page can refer to the front page, web server directory index or main web page of a website of a group, company, organization or individual.

Q11

What is a root folder?

Is the folder where the websites files for a domain name are stored, since cPanel allows for multiple domain names, you need to have a unique folder for each domain.

Q12

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

Fonts need to be able to load on a site, and will have a performance impact on webpages. If you were to use a font that is not a web safe font, it is possible it will be recogonised as an image, rather than text, meaning when you place your website online, it will show nothing more than a blank space. Some of these fonts include, Arial, Arial Black, Tahoma, Trebuchet MS and Verdana.

 Q13

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

When you are creating a new site you choose the ‘fluid width’, which automatically makes your site a responsive site. Meaning it sets your site up to grow or shrink when changing the browser window size.

Q14

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

If you were to add an object to a master page in Muse, it would mean you would see it on every single page and in the exact place. I.e. if I wanted to keep the menu bar the same colour or length throughout, I could do so by adding it to a master page. This speeds up the process of website design and keeps everything positioned neatly.

 Q15

What are widgets? And when could you use them?

Widgets are ‘pre constructed configurable objects that offer common web functionalities such as menus, forms, slideshows, and so on. Adobe Muse provides a range of widgets that make complex web design simple.’ You can use them to interact with an area on the web page in order to change content in another area, you can add a form to your site so people can contact you, create a menu bar that you can interact with and change pages. You can also create a slideshow widget to display images in a gallery and lastly you can create a social widget, which allows you to embed HTML.

 Q16

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

After Effects can be used to create motion graphics animation, moving image, whether this is as a hobby or for a job and also film production. After Effects can create high quality visual effects, a sharper and cleaner look and also improve sound quality. It can make your work look 10x more professional.

Motion graphics are pieces of digital footage or animation, which create the illusion of motion or rotation and usually combined with audio for multi-media projects. This is designed using After Effects.

Q17

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

After Effects can be used to create motion graphics films. The effects within the programme enable you to create strong professional outcomes that can eventually be sold online or used for industry.

 Q18

What is a composition?

In order to create work in After Effects you need to create a new composition, which is basically just a new document. It is known as a container that stores the layers of video, audio, text etc. Each time you create a new composition you are essentially creating a new movie project.

Q19

What is the function of key frames in After Effects?

You use key frames to animate layer properties in After Effects.

 Q20

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

Personally I use a range of different effects in my animations; therefore people don’t get bored of seeing the same thing. For my previous animation I have played around with position, scale, opacity and rotation. I like using a range of effects because you can experiment with how they move the objects i.e. I used the opacity to make an image look like it was flashing.

 Q21

What is CTI and what is the function of CTI?

CTI is the current time indicator, also known as the play head in After Effects and shows you where you are in the timeline, you can use this to navigate through your timeline i.e. if you want to play it from a certain point.

Q22

How do you export your after effects file?

Composition> Add to render queue> Make sure the format is a .mov> Set where you want the video to be saved once rendered> Press render

Q23

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

-Opacity

-Rotation

-Scale

-Position

-Anchor point

[bethanyjuggyearone]

EVALUATION- 

I started off this task by doing some rough sketches on A4 paper to get an idea of how I wanted the animation to look. Once I had a bit of the layout planned out, I started to design it on After Effects. Because we had been taught the basics of this programmes previously, I was able to get on with designing quickly. I experimented with the different effects found under ‘transform’. The work I used for the animation is a range of illustration, publication and logo designs, that I have produced for previous projects, which lets whoever know that I am capable of different things. As well as image, I also added text into my animation, which I did using the exact same process (which was easy). I did have some problems, such as putting the sound in and also how the video was playing, it kept lagging and jumping back to the start, so I had to fix this, but apart from this the task went well and I am happy with the outcome of my animation. 

[bethanyjuggyearone]

PROCESS

I started off by opening After Effects and created a ‘new composition’. To do this I pressed ‘composition’>’New composition’ which brought this box up. This is where I was able to change the background colour and duration, which I changed to ‘0;00;30;00. I then pressed ok. 

After I pressed ‘ok’ this is what my screen looked like. 

Next, I started to add in my pieces of work. To do this I simply just dragged and dropped my pdfs into the box on the bottom left. I decided to start off with my ‘output’ logo. 

For this one I decided to change the ‘position’, to do this I clicked ‘transform’ which brought up a few different options. I placed the ‘current time indicator’ at the start of the frame and then pressed ‘position’, this is where I dragged my image from the left to the right of the page, making it float across the screen when the animation plays over that slide. 

The ‘frame’ 

For the next ‘frame’ I did the same process as before, where I dragged and dropped the image into the box. I then shorted the length of the ‘frame’ by dragging each side using the mouse. I had to make sure it was behind the first frame though, so it would play in the correct order. 

I then went ‘transform’, I then moved the time indicator to the start of the frame, where I then pressed ‘Opacity’. This created a little blue diamond, which indicates that something’s happening at that point. For the first diamond I set it to 61%. I then created a second at the end of the frame and set the opacity to 100%. This meant that as the animation was played, this image would gradually appear. 

For my third frame I added this mock-up. I wanted to add a different effect this time, so I decided to adjust the scale. Before I did this, I had to make sure again that this frame came after the previous, so I didn’t have any problems with over-lapping. To adjust the scale, I made four blue diamonds. The first two made the image smaller, and the the last two made it larger, so you could see what the mock-up is showing. For each I adjusted the numbers shown to the right of the scale option. 

For the fourth frame I decided to use the rotation tool. I again created 4 different points (blue diamonds). As they went on I gradually changed the rotation numbers, so as it played it would do a full turn. 

To adjust the rotation you drag left or right on the numbers. 

Again for this one I decided to change the opacity. But this time I put the blue points closer together, so the change would happen a lot quicker, making it look like it was flashing. For the first I left the opacity at 100%, the second I made it 79% and the third back to 100%. 

Using the same process as the first one, I made the image move across the screen. Quite quickly this time, so hopefully it is seen enough. I did try and make it slower, but I didn’t manage to do it. I decided make it like this, so it the next image (which is to do with the same project) would follow on. 

I was a bit stuck with what to do with this one, so I decided to the opacity. Mainly because I didn’t want the image to move, as the one previously moves across the page and the whole idea was it to follow on this image. There wasn’t a point where the image completely disappeared, therefore when I was changed I made sure it was at least 50%. 

For the last frame I decided to use my logo, so whoever was viewing the animation, they would know who’s work it is. I decided to keep this a still image so I didn’t add any effect to it. However, I did decide to add in some text that moves across the page using the position option, and the process just like the one used for my mock-ups and stills. 

For all of the other text, I used exactly the processes used for the images. I decided to add words like ‘publication design’ and ‘Ilustration’ to both label the image and also explain what I can do. 

Lastly, I tried adding in some music to the animation. To do this I firstly found a song on Youtube, I then converted it to an mp4 and saved it to my documents. I dragged this into my box, with my images and text and then moved it to the bottom, just with the mouse. It was very simple to add in. Finally I just moved the music frame along to get the part of the song that worked best with the animation. I did have problems with this, I had to play around with it to get it to sound right, and it seemed to keep stopping throughout. As well as this, the animation itself kept stopping and jumping back to the start, so I had to play around with this to get it to play properly. 

[bethanyjuggyearone]

DEVELOPMENT: 

I started to sketch up some rough ideas onto paper of how my animation would look. The background will be grey to keep the same colour scheme as my logo and previous motion video. Throughout the animation I will bring in separate pieces of work and animate them using the transformation tools. Whether this be rotation, reflect or changing the position of the image. These images will be both mock-ups and final images. 

[bethanyjuggyearone]

RESEARCH-CORPORATE VIDEO AND SALES VIDEOS

I had a look at this website called dragonfly, which shows examples of sales videos for different companies. They are all well designed and an interesting watch. Originally I didn’t know what sales videos were. These have given me some inspiration for my animation design. 

https://www.dragonfly.co.uk/animation-portfolio/

I also found an example of a corporate video on YouTube. I like the colour scheme used, I think it attracts your attention and makes you want to carry on watching. There is a lot of movement and motion graphics happening, things fly across the screen, text pops up, change of colour. A long with this the voice over is informative and clear. Although I will not be putting a voice over on my animation, it just shows how you be experimental with your animations. 

Some more examples of corporate sales videos: I have decided to continue the grey colour scheme in the background of my video, so it links to my previous animation. It then will make my bright mockups and logo designs stand out. 

Kickstarter website: 

Indiegogo Blog website: One of the websites I looked at to get an idea of what these types of videos were. This is when I found this blog that gives you tips for a good pitch video. 

[bethanyjuggyearone]

Final

EVALUATION: For this project I started off by researching into different motion graphic animation pieces that have been designed using After Effects. This helped me to understand what sort of thing I had to design and it also helped me to get a bit of inspiration for my design. I then started to draw out some rough sketches to see how I could lay out the logo on the page and decided that it should go right in the centre and that is where it would look best. Previously I had been taught the basics of After Effects and Chris ran through the whole process of what tools were and what they did, I found this incredibly helpful and it allowed me to get on and create my idea. This is when I found out that there weren’t many good outcomes I could create for the logo I had designed. For the first one I tried out, I changed the opacity of all of the objects and they appeared and disappeared at different stages of the animation. For the second, which is the one I chose I played with the rotation of the y-axis of each square to make them flip in order. I am happy with how this turned out, although I did find the programme itself quite hard to work with as it is the first time I have used it properly. 

[bethanyjuggyearone]

DEVELOPMENT

ANIMATED LOGO OUTCOME

I started off my development by sketching some rough ideas onto paper. The first one shows how the squares could flip and the text shall be placed underneath. I need to work this up to see how it goes. For the second one I am trying to show how the opacity could change. This may not work, but there’s only one way to find out. 

The first thing I did was create a new composition by going Composition> New composition. 

This brought up the box shown above.I made sure the width was 1920 and the height was 1080 and the duration was on 30 seconds. I could have changed the fill colour at this stage but I decided not to as I wasn’t 100% sure what to use. 

This is when I decided to change the background colour and to do this I changed the fill colour to grey. I chose this colour so that it would fit in with the colour scheme of my logo. 

The next thing I did was draw 4 squares of all the same size using the rectangle tool. I selected the rectangle tool and then using the mouse I dragged to make it the size I wanted it. I then positioned them so they were evenly spaced and in the centre of the page. Each square was a different colour starting from black, to dark grey, to light grey, to white. I changed the fill to do so, which is in the right side tool menu. I made all of these 3D by pushing the ‘cube’ which you can find to the left. When adding in each square it would create a new layer. 

I then rotated the squares using the y-axis. This cannot be 90 degrees due to how we are looking at it through the ‘camera’, so I decided to counteract this by using the transparency so we could then hide the ends of the object that made it messy. I changed the key frame (squares) and moved them outwards (added in key frames to act as a y rotation) 

Lastly I added the text by using the type tool. I decided to go for the font Helvetica as it was what I had used for my previous logo design on Illustrator. I then faded it out using the opacity tool. The font was 48px. 

Finally I rendered my design out by pressing Add to render queue>Up came a box shown below> I then changed the quicktime options to H.284 

TESTS AND DEMONSTRATIONS:

It was quite hard to get the squares to sit equal in the centre of the page and also I wasn’t sure which animation to use as a final, as I also designed one that focused on opacity change. But I decided to go for this one as I thought the flip looked better. 

[bethanyjuggyearone]

HOW TO ANIMATE IN AFTER EFFECTS

The first thing you do is create a new file ‘Composition’. To make a new composition you go to the top menu bar and press Composition> Then New Composition. 

This will bring up a window like shown below. The size should be set to 1920x1080 and the duration usually around 30 seconds. Especially for UK purposes. You can also change the colour of your background by double clicking on the fill and adjusting the colour. 

Once this has all been filled in you then press ‘ok’. Once you have added all your content including text, video, photoshop files or images it will create new layer, it is easier to name each one of these so you know what each of them are when you start to bring in lots of layers. To do this you double click on the layer, where it lets you type. To bring up more options you click on the drop down arrow at the side of each layer. 

Basic things you need to know for this programme: 

>The stopwatch icon will start your animation, you press this once only because if you press it twice it will erase your key frames. Once you press the stopwatch you create a key frame (this tells the software that something is to happen at this point) Then you move your playhead or blue line, which will move your time forward. Once this is moved you need to change the value or position/ scale and this will make a new key frame and also create a ‘tween’ to create an animation. You can do this process for as many layers and with as many effects at once. 

>Every time you tell the layer ‘to do something else’ i.e. rotate you will see a little blue diamond, which is a key frame 

>’Project’ is where all the imported created items are shown 

>’Tabs’ is where items and compositions will appear. Double click to open an item, press ‘x’ to close 

>’Workspace’ is where you can right click to reset to a saved layout. This is recommended every time. 

>’Adjustment panel’ is an area that houses adjustment windows. You are able to move and change these and things like type, align and different effects can be found here 

>’Composition’ is your work space 

>’Timeline’ is where you play your animation and do this you press the spacebar

>The layers panel is where you can see objects that are in your workspace and effects and changes can be selected here. 

Some shortcuts include A- To create an anchor point P-For the position S-To scale the object R-To rotate T- For opacity U-All key framed adjustments and UU-For all changed adjustments 

>When you add in a new image, or any item it creates a new layer with a drop down. In this drop down you will find different options which make the object do different things i.e. rotate, change opacity, move, change the scale. 

>When you want the object to change you create a new key frame. E.g. if you want to see the object at the start you would click the opacity tool (creating a new key frame) and keep it at 100, then say 20 seconds in you want the object to completely disappear you would change the opacity to 0, this will create a new key frame and by this stage of the animation the object would have completely gone. 

TESTS AND DEMONSTRATIONS: 

I ended up having to change the size of the animation for it to be able to fit on the front page of the website. To do this I created a new composition> Selected the squares and the text and copy and pasted them to my new composition where I adjusted the size of the object. I also made sure the background colour was the same light grey colour. Lastly I exported it out again as a mov. 

[bethanyjuggyearone]

SECOND ANIMATION

RESEARCH:Animation of portfolio of work 

We have also been asked to create a motion animation on After Effects of our own portfolio of work. This can include recent work or work from the past, as long as it’s graphics related. I decided to have a look at other people’s animations to see if I could get any ideas for how I could create my own. 

I also need to think about what colour to use for my design. I am thinking about using the same I used for my logo design to keep a colour scheme running throughout. Although because it is grey I may have to add in one brighter colour to make it a bit more interesting. However, because I am adding in some images from my portfolio, this may bring some colour in anyway.

I found an example of an animation that has been created by a designer, but this one is more of a CV. However, they still follow the same idea. I like the design of this, I think it’s clear and exactly the sort of thing I need to be designing.

[bethanyjuggyearone]

ANIMATION-AFTER EFFECTS

We have been asked to create a self-promotional logo design using After Effects. The outcome will be in the style of a motion graphics video. I need to plan out the layout and how long the video will be before I start designing, so I am going to start my researching to get a few ideas. 

Research on motion graphics (all created in After Effects): I had a look a some different motion graphics videos to get an idea of what I am meant to be designing for my animation in After Effects. I found some really cool videos on YouTube to help me get a few ideas. 

This one is a motion graphics animation someone has created to promote themselves as a designer. I have to create an animation like this, although I just need to animate my self promotional logo design, rather than a long video. Mine shall me around 10 seconds long. 

Here is another example of a video that someone has created for themselves, but this one looks more like it could also be used as a CV which is quite cool. Again mine won’t be as long, but this has given me some ideas on how mine could be laid out. 

[bethanyjuggyearone]

FINAL

THE PROCESS: 

The first thing I did was open up Muse and went File>New Site 

Which brought up this window. At the moment all you see is the home page. A Master Page is place where you put something you want to appear on every page i.e. my logo design. 

Next, I pushed the little + button on the right hand side (as labeled)twice. 

This created two more pages, as shown at the top, which I named Portfolio and Contact. I then pressed the + to the bottom of the Portfolio page, which created another page directly underneath, I called this Illustration. Again pressing the little + on the right hand side, but for Illustration, I created another page and labeled it Branding. You can see these are linked, which means they will be shown as sub categories. 

I then double clicked onto the Master page. 

Where I started to place the different objects onto the page. To the right of the I found the ‘Widgets Library’ I clicked on this and up came different options, but at this point I wanted to add a ‘menu’. 

I clicked the word ‘menu’ using the mouse and dragged it across the page, to the top centre, like so. You can see how it has added the names that I changed when creating my pages (Home, Portfolio and Contact). 

I wasn’t happy with the text, therefore I went onto ‘Text’ and changed it to Arial, a sans serif typeface that I originally wanted. I also changed the text colour to black and the size to 18pt. 

To change the fill colour and outline (stroke) I adjusted it using these. 

Using the process above, I made the top section a dark grey, and the sub categories a light grey. 

Once the menu bar was finished, I decided to add my logo design above (also on the master page). To do this I went to File>Place and selected the file of my logo design. This allowed me stretch it to the size I wanted it, using the mouse. Now the work on the master page was complete, I started to work on my portfolio and the first thing I did was double click on the Illustration labeled page. 

Because I had placed my logo and menu bar in the A master, they both also showed up on the Illustration page in exactly the same place. 

So this is the outcome of the Illustration page. 

The first thing I did, using the rectangle tool was create the squares where the images would be placed. I did this by selecting the rectangle tool>Dragging the mouse, so it changed the size of the square and then repeated 3 more times making sure they were all equal in size. I did the same process for each row. 

To change the colour I selected ‘Fill’ and in here chose some different shades of grey that looked most like the ones used for my logo. For the first row I used a dark grey, for the second a medium and last an off white grey. My idea was to make a gradient using shade.

I decided to add a scroll effect to a few of the squares and to do so I firstly selected a square>Clicked on scroll effects>Selected opacity>I set the first two boxes to 100% and then the last 61%, which meant that when I scroll down this square will change colour and look cool. 

Lastly I had to add the images to the squares. To do this I went >File>Place> and selected each piece of work one at a time. When selected it will let you drag and drop the image to the size I wanted it. 

For my branding page I did exactly the same process as above. 

For the home page I created a new master page and added exactly the same menu bar but I didn’t add the logo this time as I added the animated logo I had previously designed. 

To add the animation, the first thing I did was save the video as an mp4. I then dowloaded widget into the library. I dragged this into the middle of the page, which created these little arrows. 

To add the video I clicked the blue arrow which brought up this menu where I clicked ‘Add  File’ and selected my mp4 video. 

To view what the page would look like I pressed ‘Preview’. I did have a problem with this, as you can see the animation is in the corner. So I tried making the animation smaller in After Effects to see if it would help move it to the centre. 

Finally for the Contact page. For this page the only thing I added was a contact form, which allows anyone to send an email to your address if they want to ask you something or if they have a job for you. 

The first thing I did was go to Widgets>I selected the contact form and dragged it into the centre of the page. I then selected the boxes and changed the colour using the fill. 

RESEARCH-HOSTING AND WEB ADDRESSES

Before I am able to place my website online, I will have to either create my own web address by signing up and paying a certain about per month/per, or I can use my Adobe account and create one through there. 

ooowebhosting.com

x10Hosting.com

Awardspace.com 

E Host.com

EVALUATION: 

For the website I started off by looking at already existing website designs, including ones with scroll effects to see what sort of thing I could design for mine. I also looked at the different elements found in Muse, such as scroll effects, headers and slideshows. Now that I had a rough idea of how a website should look I started to work up a rough site map, which I followed throughout. I then started to create my website on Muse, adding video, scroll effects, a contact sheet, images and shape. Although I did find a few things hard, the one problem I did have was trying to get the video in the centre of the page. Overall, I liked using Muse and think my website design was successful. 

http://httpbethanyjuggdesign.businesscatalyst.com/index.html

[bethanyjuggyearone]

DEVELOPMENT-SITE MAP

I drew out some rough thumbnail sketches to give an idea of how each page shall be laid out. I have also written a brief description of what shall be on each bit i.e. information and photos. The home page shall have a menu bar at the top of the page with 3 different options ‘Home’ ‘Portfolio’ and ‘Contact’. Below this I shall place my logo promotion animation. Next for the portfolio I shall create sub categories called Branding and Illustration, which will drop down from the word portfolio in the menu. On this page I shall create two or three rows of squares and for these I shall create a scroll effect that changes the colour of a few of squares when you scroll down. Within the squares I will place some of my best work to create a portfolio. I will do exactly the same for both pages, and finally for the contact page I shall add a contact form that allows whoever to send an email to my email address. 

[bethanyjuggyearone]

I had a look at static CSS and HTML sites to compare them and see the differences between these and Adobe sites. These types of sites either used a coding process or content management system approach like Wix or Wordpress. Before some websites were even built using Illustrator or Photoshop, then they used slices to create tables. This isn’t used anymore. Compared to the other websites this looks very flat and there definitely isn’t motion to it. Although it looks a neat design, the colour scheme is quite horrible, it does’t make you want to look at it. There aren’t many photo’s included on the page and there wouldn’t have been an option to add scroll effects, slideshows or opacities. 

[bethanyjuggyearone]

Self Promotion- Muse Website

TECHNIQUES LEARNT:

-Basics of Adobe Muse

-Site map, master pages, widgets, interactive elements

-Publishing a website

OUCOMES

Self promotion website-home page, contact page, portfolio page, about page

THE BASICS OF MUSE: 

+-adds pages 

‘Sticky foot’ means it keeps it keeps the object at the bottom of the page 

‘x’- deletes 

‘Fluid width’ changes the size of the website depending on what format (Phone etc) 

‘Web fonts’ will work on the web. If the programme cannot find a specific font, it will chose a similar one. 

‘T’ means it will turn your text into a picture (which shouldn’t happen) it also means once rendered you will end up with no text there. Widgets Library shows the things you can use for your website that are already available i.e. a menu bar. 

‘>’ gives you options 

You cannot edit your master page on the general pages 

‘Captcha’ stops robots from attacking the website 

‘>’ lets you also add information like text, it also lets you change different things like Autoplay and how many seconds you want an animation to play for on the website. You can also change the position of a play button here, 

‘Add images’ to add your own photos 

Hyperlinks are used to link different windows i.e. if you wanted to link a CV to your website. 

-You should name every photo, object and text so you know what’s what 

-To add a photo you go File>Place 

The ‘sliced’ rectangle lets you make curved corners. You would firstly make a rectangle and then use this tool. 

A parallax website- Is a motion website. Something always happens as you scroll, whether this being movement of text or images fly across the page. 

‘Scroll effects’- Motion makes stuff move when you scroll, you can also add video and play animation when you scroll. 

-To make things the whole width and length of the page you go Rectangle tool> make it the size of the page(it should always be 100%) you can also use this process on images 

-An anchor point is a link that takes you to a certain point of the page. I.e. if you wanted people to know ‘about you’ they would click this section in the menu bar and it will take you straight to that information, if you place an anchor point here. 

Hyperlink>Link to a file> place pdf of i.e. a cv here 

Research Task: I had a look at Adobe Muse-Site of the day as recommended and found these websites appealing and quite cool: 

I was interested in this design. It wasn’t to do with the fact that I like a monochrome colour scheme, it was more to do with me wondering how two quite dull colours could work for a website design, so that’s why I ended up clicking on it, which is where I worked out how. This design particular website has been produced on Abobe Muse and they have experimented with many different tools and processes in the programme. For example the first section you get to is a slideshow of photographs from their business, which welcomes you to the website. As you scroll down you see a background image that is constantly there, therefore they must have played around the get this to always be shown. Also as you scroll down up pops some text and other images that have been timed perfectly with the scroll. All of the images and text shown is either black and white to fit with the colour scheme. This website has inspired me to show more techniques in my website, such as slideshows, opacity and moving image. 

The second website I looked at was this one. It has a very different colour scheme than the first one as it features bright colours, rather than just the black and white. The website again has been designed using Adobe Muse and although very minimal, it does show a lot of techniques. For example, the menu bar at the top changes colour when you scroll over it with the mouse, it also has drop downs which take you to different pages. This would have been done using links. It also has different areas where you can click, when you scroll over them they change colour meaning it shall take you to somewhere else i.e. ‘Register’ and the different symbols including Facebook. This website has inspired me to add in links in different areas. Maybe I could make some photos link to the main page or other portfolios etc. 

For the third website I chose this one. I wanted to have a look at this website because at first glance it just looked like a mock-up, but when I clicked on it I realised this is what he uses as his branding and also for his background. Overall, this website that has been created in Adobe Muse, doesn’t have much going on, it’s just really there to let you know that this designer is out there. One thing it does have though is lots of photographs at the bottom of the page, which have been placed into a grid like format. I would like to experiment with doing something like this for my website design. 

The fourth website I looked at also features a monochrome colour scheme. However it is quite a lot different to the first one. This one uses a lot of motion and interacts with your mouse when you scroll down. The website has been cleverly designed and it’s clear that someone who likes the more motion animation side to graphics has designed it. As you scroll down you see things like shapes fly across the page, things twist round and move like they’re animated. Text moves sideways across the screen, there’s lots going on. Although I am inspired by this website massively, I don’t think at the stage I am at learning about Muse I could create something like this without help. 

The last website design I looked at was this one and it’s different to the others I was looking at before. This being because the background image is actually a video of a rollercoaster, which actually makes you feel quite sick because it makes it feel like you’re on it. At the bottom of the video there is a link which takes you to another website. It wouldn’t load but I can imagine it takes you to their portfolio, which I found quite cool. I want to take a little bit of inspiration from these and incorporate it into my own website design. Especially the grid layout of the photographs. 

WEB DESIGN AND WEB FORMATS 

Websites like Wix.com and Weebly allow anyone to create their own website at home.This means that they do not need to go to a Graphic Designer to get a website for their business. However, because the website uses set templates, there is a risk that lots of websites will look exactly the same. Which is one reason why these are bad and you should always get your website designed by a professional, if you want it to look unique, rather than like everyone else’s, depending on how much money you have available to spend of course. 

WEB DESIGN ELEMENTS 

-Headers 

Headers are found at the top of a website and include different labels that tell you a little bit what the page content is i.e. ‘Information’. When you click on the separate words it will take you to a different page, that should hopefully link to the word you clicked. In Muse there is an option already available to add a header in, you just put in your own information and you are also able to change fill colour, text and the typeface. 

I’m all for simplistic design, so this appeals to me. As I have gone for a darker colour scheme, I could create a header with a similar colour scheme to this. However, I may use a dark grey and black, to go with my promotional logo design. I also like how they have used capitals, I think it makes the words stand out a lot better than they would if it was in lowercase. Although I will use a sans serif typeface as I think it looks a lot more modern that serif. 

I like how this has been laid out with the little icons above, however I don’t think it would work on the layout of my website. Especially because I am planning to place my promotional video in the centre of the home page. I think I am going to stick with a layout like the first one. 

Navigation- 

Web navigation can refer to the process of navigating a network of information resources in the web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser. I can also refer to the process of moving around a website, and selecting various areas, like shown above. 

Slideshows- You can add slideshows to your website in Muse by going to the Widgets Library and clicking and dragging the ‘slideshow’. This will create a box where you can add multiple images that will play through, once rendered out. As I will be creating a separate page for my portfolio I will not need to include a slideshow. 

Contact page-

As I have never made a website before, especially for myself, I wasn’t sure what type of information is placed on the contact page. So I did some research to help me. A contact page usually includes an email, phone number of a contact form where a client can email you asking to do a job from them etc. 

One thing I can add is a contact form by going into the widgets library and dragging across the simple contact. This is wha is shown above. You are able to change the fill colour, text colour and also the font. 

Some people add their phone number, address and email, as well as a contact form and a little bit of information above. 

Whereas some others literally just include the contact form. This is definitely something I need to think about. 

[bethanyjuggyearone]

Evaluation For this project I started off by looking at what hipster logos were and different logo designs used as self promotional material. This helped me to understand what these types of logos were and to also see what some of logos people have designed for themselves. Next, using the inspiration I got from the research, I started to produce some notes and drew up some ideas. I decided to go for a shape theme and a monochrome colour scheme with a gradient. The design that I went for included shape and text. I included 4 squares so it worked with the 4 letters in my last name. I couldn’t think of a particular image that represented me as a person so this is how I did it. Overall, I liked by final design and felt the whole process and development of my own promotional logo was quite interesting and fun to although, I did struggle with thinking of some of the ideas.

[bethanyjuggyearone]

MOCK-UP

I decided to place my logo on a branding mock-up to see what it looked like and I think the outcome looks really good. Very happy with this. 

[bethanyjuggyearone]

Development

The next thing I did was work up some ideas on Illustrator. I worked up quite a few in order to experiment with different shapes. On all I added text to see how it would work on the logo design. For each one I used the shape tools, which were either the rectangle or the circle. I decided to go for the theme of gradient so I either made some of the squares go lighter to darker or I actually placed a gradient within the shape which I did by selecting the fill option and then ‘gradient’. For the squares I made two different coloured rectangles and then selected both of them. Next I clicked went object>blend>make which created a gradient.

This is the logo i decided to go for as I liked how the squares and the text fitted together. I also like the fact that the 4 squares look like a gradient. To do this I used a different coloured fill for each square, which were all the same size. I didn’t want the last one to be white as it would get lost, so I made this a lighter grey colour. Lastly using the type tool and the font called Helvetica. 

To type the text I used the T tool shown above. 

For my chosen design I used the font Helvetica Bold and the pt size 18. 

To create the squares in my design, I used the rectangle tool. I selected it and then using the mouse I dragged to create a square the size shown above. I did this process 3 more times. 

Each of the squares I made a different colour and to do this I firstly selected the square and then went to ‘colour picker’ and selected the colour I wanted. I wanted the four to look like a gradient, therefore I started off with black, then dark grey, light grey and finally an off white. 

For the other designs: To create this gradient I created one white rectangle and one purple rectangle and put them a little distance away from each other. I selected both and then went to Object> Blend, which left me with this cool design. 

Another way to do it was: Select the shape> Select the fill option and then a gradient. You cannot do the process above for this type of shape.