Throughout the Communication Technology project, I have learnt how to use a variety of different software and mixing the software together, as well as recording my process and learning journey. Most of the things I have learnt were from step by step tutorials from websites and YouTube videos, I gain a much more better understanding from videos because you can easily follow actions in a tutorial and learn at your own pace too. You can also play it back again and again if you find it hard to understand; teachers won’t repeat themselves three or four times in a lesson but a video can. The internet is one big archive of information where you can learn literally anything and everything. Every time I had a problem, all I needed to do was search the internet for the solution. I’m sure there are other people around the world asking the same questions.
I spoke to many designers on the internet, asking for advice and their experience in the design industry, two of them are professionals, who didn’t go to university or college and learned purely from the internet. It makes me realise that anything is possible to anyone if they put their heart to it and the will to learn. I asked about what software they used and one the designers said that they can’t give their secret away because it gives them their edge and if they lose that, they’ll be nothing. I respect that, every good designer needs to be distinctive. Some designers told me what software they used in the end and this is what made me start the project and my life learning path.
I’m glad that I have started learning new software because it will be prepare me for future projects and tasks for clients and in education and will also keep up to date with the competitive creative industry.
I think the project has tied in with my work for clients very well because I am constantly looking for different techniques and ideas for my work and I can record these techniques in my blog not only for academic purposes but for personal and client related projects too.
Right at the start of the project, all I wanted to do was graphic design because I’m a graphic designer; I love what I do but there wasn’t really much I could do to develop. I found 3D Max and Cinema 4D easy to use and unchallenging after learning it for about one week. In order for me to get good marks, I needed something where I can go wrong... something that is different, so I began to learn web design. I knew absolutely nothing about it but the thought of being challenged to learn a completely new skill makes me feel good about myself because I’m actually moving out of my comfort zone with the will to learn and being capable of doing something different, like I said ‘anything is possible’. I wanted my work to not only to be visual but also interactive too.
When I began to use Dreamweaver, my main concern was the placement and function of layout. There were so many restrictions to placing objects and content in the software but after a while I solved the problem from researching on the internet. When I made my portfolio website, I placed all my information on a page where you can only access it by clicking on my logo on the home page, so the information is hidden away from the user so I should have created an ‘about me’ page.
The process of getting things wrong is important because the project was about finding the problem and independently solving the issue; I have managed to sail through learning the 3D software and Dreamweaver with minor problems until when I wanted to learn flash web development. I thought it would have been easy to use, I actually thought that it was going to be similar to Dreamweaver but after many tutorials and precise step by step instructions, it was completely different to what I know. The smallest mistake in the html leads to the whole flash website failing, which became very frustrating. I had no problem with designing the visuals and I have previous experience with flash animation, but my only weakness was the html and the ability to function the designs e.g. linking buttons to different animated scenes and pages. In future, before even attempting to design a flash website, I will learn the basics of html and the action script functions. Without the knowledge of html, I found it impossible to find where the problem came from and even used tutorials to try and resolve the problems, but no use. The only thing I can think of is scrapping the website and starting all over again.
When I first started blogging, it felt like a laboured thing to do because it disrupted my work flow but after a while it became a routine like some personal diary. I realised how important it was to record what I’ve learned and the things that have gone wrong because I can look back at my mistakes and learn from them. Throughout the project, I started to video record my learning journey and uploading it onto YouTube so that the videos can be embed into my blog. As I blogged throughout the project, I began to write as if it’s a guide; telling people what software and techniques I would recommend designers to use. I would love people to read my blog because I feel like I am helping others.
I only asked the professional designers what software they used and not how they used it. I learnt how to use 3D Max, Cinema 4D and other pieces of software purely through tutorials on the internet and I haven’t had any face to face discussions with people who have the experience with 3D software, so the learning experience might have been different, so in future, I may need to have discussions with a professional or a tutor in the chosen subject area and not rely on online tutorials.
I find it difficult remembering the shortcut keys and options in each piece of software because of the different interfaces and having to work with all of them and switching amongst them all the time, it makes it very confusing.
I have just realised that if I looked back at the 3D software, I only used the software for 3D texts because it was all I needed in my flyers and logos that I was designing for my clients. I could have actually learned how to use the software for 3D animation or 3D modelling or even just made 3D images. So it was my client based work that restricted me from learning more about the software, I think I need to cut down on my paid work and focus more on my coursework in future. It has been useful learning the different types of software but there wasn’t any traditional techniques and process throughout the whole project, I feel ashamed because my project was merely based around my paid work which had to be corporate. In future, I will use pencils and paint brushes instead of a mouse and computer screen.
Learning is a lifelong commitment and from the advice I have been getting from designers; I do think that anything is possible. So I will continue to try and learn flash web development even after handing in the project.
Tuesday, 16 November 2010
I believe that it is always important to keep up to date with software, the new technology gives us new things to learn and it help artists and designers produce work much more efficiently and also visually pleasing. For instance, Adobe's version of Photoshop CS4 and onwards are capable of producing 3D material.
William Turn Ip October 6 at 8:19am yeh thats what im not looking forward to doin, less pictures and more reading lol hence the reason why i chose a creative subject :/ is it tough because of the recession or is the graphics industry like that in general? all your work is amazing, i wish i could get up to that standard. do you use PS swift3D for the 3D texts?
Jake Nicholls October 6 at 8:22am Report Thank you for the kind words mate, much appreciated!
Its tough because of the recession, but tricky because of saturation too I think, there are a lot of people out there doing the same thing, I guess the same in most fields from speaking to people I know.
I use a few, but mainly used 3DS max as its what I used when I was doing my HND.
The majority of flyers, posters and logos these days look 3D which gives the design or company an up to date or modern look. I think that it is essential to learn 3D software to keep on top of the competition in the design industry, so in this blog I will be going through the process of learning the latest design software.
The interface in most of the Adobe programs are near enough the same, I am use to using the keyboard shortcuts and navigation but having to totally change from what I have been adapted to for years, I began to feel like a beginner again.. seriously feels like I was back on the first year of college!
As I could remember, Adobe Illustrator was the first piece of software I used for 3D text, it was very basic and cartoon like but it did the job. This was before I knew what software to use, here is how amateur and crappy it looks in Illustrator.
Using new software isn't easy, I found a tutorial on a website explaining about the Cinema 4D interface, having read the tutorial and trying to understand the tools, shortcuts and options, most of it didn't make sense for example; spline drawing tool, add array object, emitter object etc. http://cinema4dtutorials.com/basics/cinema-4d-interface-tutorial/
After a while, I gave up because it became too much for me to take in all at once, I realised that to understand a piece of software you need to follow small tutorials and just play around with it and you can't just jump in by reading what's this and where's this.
After a few days of using Cinema 4D, I have managed to adapt to it and only know what I is required. The software is widely used for video and animation but I only use it for 3D text designs because it is what I use in my posters, flyers and logos for my clients, so only learn what you only need.
Here I have used the software Cinema 4D , I have had about 2 months experience using this program but haven't managed to record my progression of learning with it. These are the recent things that I have been learning. Recently I have been mixing Cinema 4D with Photoshop and have always had to use a blue background behind my image to cut it out; in other words extracting the object away from the background.
After following this tutorial, I can now completely remove the background without any other colours interfering with the image I want cutting out. With the use of this technique I can now import separate objects from Cinema 4D to Photoshop and touch up on shadows, shading and layering effects.
This is what I did for a client:
Cinema 4D also recognises vectors and paths which is ideal for designing 3D logos.
I also use Autodesk 3D Max for text related designs, the software does a similar job to Cinema 4D and I use it for a certain style I really like. Have a look at this tutorial:
I like to use 3D Max because it is much faster to run and in my opinion, much more easier to use. The only problem I am having with 3D Max is when I enlarge the outline of text, the letters G and S goes weird. Here have a look:
One way to solve the problem is to select the keep lines from crossing option, but it separates and gaps each letter, which is not what I would recommend because it ruins the shape of the text and doesn't work with the technique I am about to do. This is what happens:
And now for some reason the P is starting to fault, but anyway.. I resolve the problem by separating the letters G and S away from the rest of the alphabet then replacing them with spaces. Here's a video of what I did:
After a tutorial with Graham, I decided to focus on web designing because its something I don't know much about, with the use of my graphic design skills, I can tie the two skills together and I know for sure that they both work well together. Web design is an important skill to learn because of today's industry, every business or company needs a website because it gives out information or sells products etc, and with my visual design skills I can help enhance and draw customers in.
One of the main problems and things that annoyed me the most in Dreamweaver were placing images or objects on a page that snapped on the left and right, there are no ways to snap to the centre. I want to be able to move my images freely and not be forced into a fixed layout.
It annoys me so much because it snaps right to the edge of the page and if you write text next to the image, they'll appear to be touching.
The same problem occurred with Microsoft Word, the 'In Front of Text' 'Behind Text' and 'Square' were only solution to move placed images freely.
By playing around with the Dreamweaver settings at the bottom left panel, I found a way to move the image to the centre of the page, adjusting the H space creates an invisible border which pushes the image away from the left alignment. The only problem is that no text or any other images can be placed within this border. My biggest problem with Dreamweaver is the restriction of moving things anywhere you want.
After lots of browsing through the internet, i came across a solution to my problem, its a technique that will enable me to move my images anywhere in Dreamweaver.
"Have you ever had a problem moving an image from the bottom of the page to top right or top left? Or how can I place the banner or picture beside the other ad or element? Many have experienced such a dilemma and the element never moves no matter how hard you try. Well AP Div solves the problem."
After figuring out how to position images and text freely it has generated another problem, 'absolute positioning' has its disadvantage because people have different size monitors so the AP DIV objects are placed in a position that doesn't suit with the DIV TAG objects. So I would recommend placing all the content and objects in either AP DIV or DIV TAG.
These two images show different monitor resolutions with the same web browser and content; all done with DIV TAGs. However much you extend the web browser window, the content will always be left, right and centre. Oh and I found out how to centre objects now; it was the most obvious thing to do.
I used the same stuff here but used AP DIV on all the content instead, to be honest they both work well either way but I think that AP DIV is better for visual websites because of the overlapping and freedom to position and making it look whatever way you want.
I asked Jason Lowe, a peer in my class for some advice and he would recommend designing a website through Photoshop and slicing them up to sections. Sounds like a much more easier way since I can use Photoshop very well.
I've been trying to find out what content all websites need, this will help me section and structure my website. But first of all, I need to think about what my website is about and the content that is going to be included :/
"You know best - or should - what your audience wants. It then becomes an easy task to decide about which types of content will best serve their needs and how to go about finding or creating it. Here are some suggestions:"
· Editorials · Feature articles · News clips or stories · Art galleries · Aggregating the best content · Reviews · Announcements · Interviews · Interactive features - polls, feedback, discussion groups, forums, chat
After a long think of what my website could contain, I have decided to create an online portfolio of all my graphic design work.
·Home ·Portfolio ·Contact ·Links ·Blog
This is the tutorial I followed to create a navigation bar, it is very important because it sections the website so that I won't get confused and it will help guide users who are viewing my website.
I started off by making a simple basic design for my website, nothing special or colourful yet because I'm just getting the hang of it. To be honest, it does look boring and plain but at least its a start to something new.
Did everything in Photoshop, each box or element is a separate layer. I'll deconstruct them to give you a better understanding and overlook. Rollovers (top right) Background (bottom right) These are the basic designs that are on every page, this gives me a base to work from, text doesn't need to be saved as an image file because it can be added in Dreamweaver.
Now watch all your all your layers get saved individually and automatically, now have your coffee or cigarette and wait :)
On the portfolio page, I needed to find out how to create a photo gallery of my images and fit everything on the same page without scrolling down because I want the website to be the same proportion all the way through; comfortable experience I think.
Instead of typing up the html code for a photo gallery, you can get the extension for Dreamweaver to do it for you, but you need to register to download it.
It is written in html but you can change the image and its job in design mode too.
Copied and pasted the html and image into the AP DIV box just to add another photo gallery image but for some reason it won't paste to the front but stay behind other layers, I've tried everything out like putting the layer on top other layers but still doesn't work. Creating a new AP DIV box is the only solution that can resolve this issue.
But anyway, here's what the code did for me and I am very impressed, here's a video of what the photo gallery does on my website.
Oh and I have recently started to use a program called 'camstudio' to record my desktop, I would recommend this to anyone doing graphic design, vis comm and anyone who uses the computer to do their work. Its such a great way to record your process and documenting work done on the computer, very easy to use! A lot easier than having to explain something when you can just show a video hehe.
This is a must have piece of software and will help you throughout your blog or even the course your doing. Really does make things much easier and I will certainly use this in future.
After I designed my basic website, I wanted to create a form so that people can get in touch with me. Something like this:
There were many sites I looked at that gave me the code for the user to type in information in the boxes but no code for a submit button and some tutorials gave me a submit button but no function.
I finally came across this website which gave me the html code for a form, submit button and function.
I know.. I know.. there's a lot of letters and characters there but no worries. This is what I did to put my contact form on, I have shown you how to do a few tweaks in the code so that you understand how to personalise it for your own needs. Sorry I don't have a microphone to explain what I did but I'm sure you can follow where my mouse goes.
Finally finished my portfolio website and I will show you a video of what I have done.
Ok, time to take web design to the next level. The website I did for my portfolio is very basic and normal, the majority of websites I have looked at have so much interactivity and visuals in it. Like I said.. always keep up to date with the technology.
Here's a list of websites which have inspired me but look really hard to do but I'll figure out how to something similar one day.
Will 12:16pm is there better software than 3ds max?
Jason 12:16pm i'm sure there is
Will 12:17pm what software do u use if u dont mind me asking?
Jason 12:19pm i dont give away my secrets - sorry! my software and techniques are what give me my edge if i lose that, ill have nothing
He wouldn't give me any advice so I'll have to find out the techniques myself..
The next thing I'm going to try and learn is interactivity.
When I right click on well animated sites, it always shows this box. You need flash player to load these sites up and I assume that the website was designed in Adobe Flash.
This is the sort of level I would love my web designing skills to be.. got 5 days till the deadline so going to try learn how to do it.
Followed this tutorial on how to make a flash website, I'm going to start off with the basics of making a few pages on Flash CS4, just to get the basics and the elements you need for user experience.
At 3:38 it tells you to put in a function, with lots of writing and characters just to do a certain job! I don't know if I can cope with learning the scripts for the actions, surely there's an easier way.
Since Flash is an animation and moving image software, it automatically uses the frames as a moving image and not as a page to stop and view. So you must have a script to stop it from moving onto the next frame automatically. This is what happens to my website without any scripts..
But about the scripts.. I'm OK with using the stop script (stop();) because it is easy to remember but linking the buttons with different pages using long codes will be very frustrating and time consuming!
After copying the codes, this is what happened. GRR..
What have I done wrong?! I copied every letter and character that was needed in the script and this happens!
After a short while, I realised that the problem was the letter 'V' in void because it needed to be a lower case. This shows that scripting needs to be very precise and exact, I can't believe the problem was just because of an upper case letter. It'll be a nightmare if there were a lots of letters that were wrong in a script in a big website.
The tutorial was easy to follow but I can't be doing with typing a script to do the simplest things, so I am going to look at other tutorials on how to make a flash website but with a different technique.
Followed this 40 minute tutorial and was very well explained, something much more interactive and animated, which is what I was interested in. Took me overall about 3 hours to understand everything because I kept on pausing and repeating the tutorial.
Animating a button :) can't be explained any easier.
After designing my new flash website, it began to go down hill. Some faults occurred in the script, so it started confusing me and I couldn't find where the source of the problem is :( It's either give up now and waste more time or try again and really look closely of what I need to do. The main problem was the navigation around my website and the interactivity. Buttons didn't work for some reason and I couldn't link things to scenes or links. Such a nightmare, and you also need to name literally everything so that you don't get confused and to link objects with other objects too.
To be honest, I'm not even going to attempt to try and make something like this, since there is only one day before the deadline. But I would love to learn how to do this one day in my own time.
After making my animation for an intro, I couldn't make the enter button go back to scene one, I have tried everything I could possibly find to link the button to another scene or page. but unfortunately I have ran out of time.. have to hand in the project now.. oh well, it was fun while it lasted.
Here is the list of the software that I'm capable of using at the end of the Communication Technology brief:
Photoshop
Illustrator
PS Swift 3D - Photoshop extension
3d Max
4D Cinema
Dreamweaver
Flash
Since trying to learn flash web development which went horribly wrong, I think I'm going to make something a little less complicated in future.. something like this:
