The Web School https://www.thewebschool.com.au Become a Web Expert Thu, 15 Aug 2019 21:48:41 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.18 Step and Repeat in Illustrator https://www.thewebschool.com.au/blog/step-and-repeat/ Tue, 03 May 2016 06:47:10 +0000 https://www.thewebschool.com.au/?p=1785 We all know we shouldn’t repeat ourselves – repetition is a waste of time and effort, right? Well that may be true some of the time, but repetition definitely has an important role to play when it comes to graphic design. This tutorial will show you how to repeat graphical elements in Illustrator using specific offsets or […]

The post Step and Repeat in Illustrator appeared first on The Web School.

]]>
We all know we shouldn’t repeat ourselves – repetition is a waste of time and effort, right? Well that may be true some of the time, but repetition definitely has an important role to play when it comes to graphic design. This tutorial will show you how to repeat graphical elements in Illustrator using specific offsets or rotations. This technique is often called ‘step and repeat’, although in Illustrator it’s simply called ‘Transform Again’. The idea of to simultaneously create a copy of an element while applying a transformation (position, scale, rotation etc.) to that element. That duplication process can then be repeated with a single command.

stepandrepeat1

Simple duplication

First, you’ll need to draw an object. We’ll begin with a simple circle, placed at the top left of the artboard.

Duplicate the circle

Make sure you are using the Selection tool (the black version). Hold down the Alt key. Note how the cursor changes, and now looks doubled. This indicates that you can now drag to make a copy of the circle.

*if you want to keep your duplicates aligned, the easiest way is to use Smart Guides. Alternatively, you can hold down the Shift key while dragging.

Repeat to create more duplicates

It’s important at this stage that you don’t click away from the circle. Keep it selected! Now hold down the cmnd/ctrl key and press D. This is the keyboard shortcut for the Transform Again command.

menu

Repeat the Transform Again command using the keyboard shortcut for more circles.

 

Duplication using a specific offset

stepandrepeat3

To specify the distance between copies, you simply use the Object, Transform, Move command.

Enter the required Horizontal or Vertical offset, or use Distance and Angle.

Select Preview to make sure your numbers work.

Click the Copy button.

Now you can create equally distributed duplicates using the Transform Again command as in the previous example.

 

Repeating Rotation

stepandrepeat2

 

This technique lets you rotate multiple copies of an object around a common centre point.

This time, we’ll need a large circle, and a smaller element that will rotate around it. I’m using a rounded rectangle, positioned at the top centre of the circle.

Set the axis of rotation

Select the object to be rotated, and press R or click on the Rotation tool.

You’ll see a small blue marker in the centre of the object. This represents the centre point for rotation.

Reposition the marker by clicking in the centre of the large circle. Alternatively, you can drag the marker into position.

Rotate the object

Holding down Alt + the Shift key, drag the object around the circle until you see 45° in the indicator. Don’t forget to let go of the mouse before you let go of the keys! The Shift key constrains the rotation to increments of 45°. Other increments are possible, but we’ll cover that later on.

As before, you can now create duplicates by pressing cmnd/ctrl + D.

Learn more

There’s much more to Adobe Illustrator than repetition. City Desktop Training offer comprehensive training courses that will teach you everything you need to know about this powerful software.
Check out the City Desktop website for more information.

 

The post Step and Repeat in Illustrator appeared first on The Web School.

]]>
Why Adobe Illustrator is the best solution for Infographic design https://www.thewebschool.com.au/blog/adobe-illustrator-still-best-solution-infographic-design/ Wed, 13 Apr 2016 04:53:07 +0000 https://www.thewebschool.com.au/?p=1714 Infographics are a remarkably effective way of conveying complex information in a simple, highly visual format. In a world full of complicated procedures, statistics and comparisons we need to find ways of presenting information a the simplest possible way without relying on lengthy text. This is measurable stuff. Jakob Nielsen was one of the first […]

The post Why Adobe Illustrator is the best solution for Infographic design appeared first on The Web School.

]]>
Infographics are a remarkably effective way of conveying complex information in a simple, highly visual format. In a world full of complicated procedures, statistics and comparisons we need to find ways of presenting information a the simplest possible way without relying on lengthy text.

This is measurable stuff. Jakob Nielsen was one of the first people to talk about how little time people spend reading text on websites, for example. Readers will often merely ‘scan’ the text, quickly moving around and getting the gist of the information before moving on the something else.

You only need to look at the flatpack instructions you get from Ikea nowadays to figure out that pictures (albeit well-drawn ones), speak much louder than words:

Ikea-Drawer-Assembly-Instructions

 

 

Here are some Illustrator features that will help you create beautiful infographics:

World class drawing tools

Illustrator leads the field in terms of it’s drawing tools. Arguably, Illustrator pretty much invented the standard tools that we find in most drawing programs – the pen, shape and line drawing tools, ‘smart’ tools that let you interactively change the number of faces on a polygon or points on a star…

One of the things I like about Illustrator is the way it presents you with more than one way of doing things. You can rotate an element simply by grabbing a corner and rotating, or use the Rotate tool – now you can choose an alternative axis for the rotation, and even repeat the rotation on duplicate objects. If you need to be specific, you can dial in the exact rotation you want via a dialog box.

Draw a simple line with the Line Segment tool. Or, use the Pen to draw more complex lines and curves. You choose the method you want, based on what you want to do and on your level of expertise.

Unparalleled accuracy

Illustrator is very accurate. Let’s face it, you don’t have to care about perfect alignment and spacing, but if you do, Illustrator has the features to make it so. Smart Guides are especially useful – they provide visual notification when you are in alignment with the key points of another object, making alignment and distribution child’s play.

Easy repetition using ‘Step and Repeat’

Actually Illustrator gives this feature the rather unexciting name ‘Transform Again’. However, learn a few keyboard shortcuts, and you’ll be creating multiple copies of objects, equally spaced and aligned, with one action. Great for grids, diagrams, and any situation where you want a sequence of objects.

circles-repeat

Complex appearances are easy to create

By appearance, I mean anything from stroke and fill colours, through to gradients, patterns, filters, shadows and opacity. Once you have an object looking the way you want, you can easily turn that appearance into a Graphic Style, which can then be applied to any element. Just like text styles, graphic styles help to keep your design consistent, and avoid unnecessary repetition.

Objects can be reused as symbols

A cool but often underused feature – symbols are essentially reusable elements. When you create a symbol, it becomes available in the Symbols Library. You can then drag instances of your symbol into your illustration. These behave just like regular elements – they can be resized, rotated and so on, but like magic, if you go and edit the original symbol, all of the instances update immediately. You can also have a lot of fun with the Symbolism tools – but that’s a topic for another article.

Great 3D tools

Another feature that gets overlooked – Illustrator has been quietly doing 3D for years. Ok, it’s limited to basic 3D extrusions or revolves, but those are great for 3D charts, and you can create some pretty cool looking 3D elements  without learning a complex 3D modelling application. And of course, pretty much anything you produce in Illustrator is a super-sharp looking vector graphic, and that goes for 3D objects too.

3d

You can do whatever you like!

Let’s face it – template based systems are attractive – you see a great looking, well designed template, and it looks like you’ll just be able to slot in your own images and text, and job done. However, we all like to make things our own – choose fonts, colours, and change things around. Illustrator is all about being creative – take inspiration and even copy stuff from any source you like, but ultimately, create your own designs and make it your own. A little knowledge in Illustrator is a powerful thing!

– This has been a short list of just some of the features of Adobe Illustrator that can be used to create infographics, or any kind of artwork for that matter.

– By the way, the irony of writing a 700+ word blog post about the beauty of replacing words with graphics hasn’t escaped us!

We run great Adobe Illustrator courses, covering the application from essentials to advanced. All our courses are taught by industry professionals with proven teaching skills.  You’ll be creating awesome infographics in no time!

The post Why Adobe Illustrator is the best solution for Infographic design appeared first on The Web School.

]]>
Responsive design in Adobe Muse https://www.thewebschool.com.au/blog/responsive-design-adobe-muse/ Tue, 05 Apr 2016 06:17:56 +0000 https://www.thewebschool.com.au/?p=1687 Muse now lets you build fully responsive websites without writing a single line of code. This is a major step forwards for Muse, and it could be a major decider for a lot of people who’ve been unsure about the program in the past. Previous versions expected us to build multiple versions of a project, […]

The post Responsive design in Adobe Muse appeared first on The Web School.

]]>
Muse now lets you build fully responsive websites without writing a single line of code. This is a major step forwards for Muse, and it could be a major decider for a lot of people who’ve been unsure about the program in the past. Previous versions expected us to build multiple versions of a project, for mobile, tablet and desktop. Lots of extra work, and counter to the way things are usually done: using CSS Media Queries to change the page styles based on device or browser width. That older approach has been replaced by a much more up to date and intuitive way of doing things. 

Breakpoints

These are arbitrary values that determine at which widths the page design should change. You can have a single or multiple breakpoints. Breakpoints can be created by simply double-clicking on a ruler at the top of the document. Within each breakpoint, it’s now possible to control various aspects of the page:

Text formatting

Muse has the ability to switch between two text formatting modes: edits apply across all breakpoints, or only to the currently selected breakpoint. This means that font sizes, colours etc. can be easily specified for different screen sizes. The idea is great, but the implementation may confuse – a toggle-style button in the tools panel that switches between the two modes.

Column grid layouts

Multiple columns or side by side elements can be reconfigured across breakpoints. So, it’s now easy to go from say, three vertical text containers on mobile, to a three-column horizontal layout on the desktop version. Vertical layouts can easily be changed to horizontal.

Content visibility

This is great – you can easily choose which individual elements you want to show or hide on any breakpoint. This makes it easy for example, to design a specific menu for mobiles, while displaying a completely different menu for desktop.

Content scaling/positioning

Content can now be told to scale automatically with the browser width (great for larger images or horizontally arranged elements). Elements can also be pinned horizontally to the page or browser, providing more granular control over positioning across a wide range of screen widths.

‘Free form’ responsive design

Adobe seemed to have coined a phrase here – and one that should grab the attention graphic designers who want to build webpages without the constraints of frameworks, grid systems and the like. Although Muse offers a visual column grid, it’s not locked into one, and designers are free to pick up and place elements as they see fit. Of course, savvy designers will want to consider object placement carefully, and not simply scatter elements around the place. However, Muse makes it easy to move and replace elements, and page layouts can be changed with minimum effort. Creating working prototypes for client approval should be a breeze.

Summary

There’s more to the new version of Muse than I’ve listed here, as I’ve concentrated solely on the new responsive capabilities.

It may not be suitable for every scenario, but Muse is a working solution for micro-sites, landing pages, and smaller web projects. Given the new responsive features and the flexibility the program provides from a design perspective, it’s hard to see why Muse should not be used to build websites professionally.

So, will web developers now put down their code editors, CSS pre-processors and frameworks, and start dragging and dropping? That may be unlikely. However Muse is not designed for Web Developers. It’s aimed fairly and squarely at graphic designers, and even more specifically at graphic designers who use the big three Adobe apps – InDesign, Photoshop and Illustrator.

The post Responsive design in Adobe Muse appeared first on The Web School.

]]>
What visual designers need to know about web design https://www.thewebschool.com.au/blog/visual-design-to-web-design/ Mon, 15 Feb 2016 03:39:17 +0000 https://www.thewebschool.com.au/?p=1254 Do you design webpages and hand your designs over to a web developer? Wondering why web design is apparently so complex? Do you feel sometimes that web people speak a language you don’t understand? Do you wonder why that button you asked for isn’t quite in the right place, or isn’t using the font/colour/font size you specified? First of […]

The post What visual designers need to know about web design appeared first on The Web School.

]]>
Do you design webpages and hand your designs over to a web developer? Wondering why web design is apparently so complex? Do you feel sometimes that web people speak a language you don’t understand? Do you wonder why that button you asked for isn’t quite in the right place, or isn’t using the font/colour/font size you specified?

First of all, you are not alone – most designers at some point will have experienced a level of disconnect when trying to communicate ideas to a web developer.

Perhaps the problem really lies with a total lack of common ground. Designers design, and developers develop, right? Actually that’s not really true – web developers often have good design skills, and many visual designers can build websites!

We are going to encourage you to take on some of the skills of a web developer, so you can not only speak the language, but actually take your projects through to a more advanced stage, even creating prototypes for your clients to look at and interact with.

How much do you actually need to know?

The Web Design process

Firstly, it’s really important to understand how the process of building websites works. There are several stages to this process, and you might already be involved in some of them – scoping a project, user experience design, and of course visual design. All of that and potentially more may happen before the developer even gets involved.

How webpages work

This is a big topic, discussed in more detail in this post. Briefly, the nuts and bolts of web development are based on coding languages: HTML, CSS and JavaScript. Each language has a role to play:

HTML provides the structure of the page – building a framework for the content to sit inside.

CSS provides the presentation – everything from fonts and colours through to page layouts.

Javascript adds behaviour – sophisticated interactivity, animation and beyond.

You don’t need to be an expert coder!

Professional web developers have to be able to code using all three languages to a production level. This means they need to be expert coders. But you don’t need to be an expert to build a working website – you need to understand HTML & CSS to a good level. Javascript can wait! If you’re chiefly concerned with design, you don’t really need it, and in any case, there are many simple plugins you can use if you want to add a specific scripted element to your page.

So, how do you proceed?

We recommend attending a training course which will give you the basic skills you need. You’ll gain confidence with writing code, learn about web graphics, look at the different ways you can create test pages and prototypes, all from an insider’s perspective. You’ll gain an understanding of the web design process, and what is possible using modern development techniques.

At The Web School, we have many years of helping graphic designers to learn about web design, and even make the transition from visual designer to web developer!

If you’re ready to take the plunge and upgrade your knowledge and skills, check out our Web Development level one course – ‘Building Websites with HTML & CSS’.

We hope to see you there!

The post What visual designers need to know about web design appeared first on The Web School.

]]>
Adobe Animate – a first look https://www.thewebschool.com.au/blog/adobe-animate-a-first-look/ Thu, 11 Feb 2016 05:05:54 +0000 https://www.thewebschool.com.au/?p=1199 Just a couple of days ago, Adobe announced the arrival of a major update to Flash. Industry experts have been forecasting the death of Flash for some time now, so there must have been a few red faces when it was announced that Flash was to be revamped and renamed Adobe Animate. For those of us who’ve been using […]

The post Adobe Animate – a first look appeared first on The Web School.

]]>
Just a couple of days ago, Adobe announced the arrival of a major update to Flash. Industry experts have been forecasting the death of Flash for some time now, so there must have been a few red faces when it was announced that Flash was to be revamped and renamed Adobe Animate. For those of us who’ve been using Flash for a while, there was a lot of anticipation regarding the direction that Adobe were going to take with the new version.

It’s early days for the new application, and it remains to be seen how users will respond to the upgrade. Many people, particularly creatives working in the banner advertising industry, have moved over to Adobe Edge Animate. Edge Animate was seen by many as the logical replacement for Flash. Development of Edge has now been stopped, so it’s future looks bleak. No reason why you shouldn’t continue using it for now, but no further upgrades will be released.

So, what’s new in Adobe Animate? Here are just a few of the outstanding new features below:

Creative cloud features

Animate is now officially part of the Creative Cloud, which means it joins other Adobe software in gaining access to Adobe Stock, and to CC Libraries for easy asset sharing across applications and devices. There’s also access to web fonts via Typekit.

Support for SVG

Animate now supports SVG via import as well as directly importing Adobe Illustrator files. Both formats import as editable vector content, and graphical elements can be automatically distributed to Animate layers,  or to keyframes for animation.

New Paint Brush tool

The new Paint Brush tool is a welcome addition – the older version (which remains in the tools panel) looked like it belonged in a museum. As in Adobe Illustrator, the Paint Brush tool includes a preset Brush Library, the ability to apply variable widths and arrowheads as well as providing control over line caps, corners and so on.

Scale the stage, scale your content

You can now easily re-purpose projects by scaling the dimensions of the Stage, and allowing content to automatically scale to fit the new dimensions. The process can be controlled by setting anchor points for scaling. This could dramatically simplify the process of creating multiple banner ad sizes based on a single composition.

Goodbye to SWF?

Perhaps the most important change is more to do with a shift in emphasis. Adobe say that more than a third of content created using Flash/Animate is output as HTML5. This implies that the SWF format is being phased out in favour of HTML5 based content, particularly on mobile devices. Significantly, the online advertising industry now recognises HTML5 as a standard format for animated/interactive banner ads.

Publish to multiple formats

Animate exports to HTML5 canvas, which is now the default document type. Interactivity is added via Javascript. There’s also WebGL, although that’s still in preview. You can also export broadcast-quality video, as well as older formats like animated gif. Animate allows for other export formats to be supported via extensions.

Want to learn Adobe Animate?

At The Web School, we have expert and Adobe certified trainers. Whether you need to create animated banner ads, or want to generate eye-catching interactive content, get in touch, we can teach you everything you need to know! Find out more about our Animate courses.

The post Adobe Animate – a first look appeared first on The Web School.

]]>
Do you want to be a web developer? https://www.thewebschool.com.au/blog/be-a-web-developer/ https://www.thewebschool.com.au/blog/be-a-web-developer/#comments Thu, 11 Feb 2016 01:24:06 +0000 https://www.thewebschool.com.au/?p=1125 To be a web developer, you will need to learn HTML, CSS and JavaScript! But hold on – you should also know that before a web developer actually writes any code, there are a number of steps, and several other disciplines may be involved: User Interface experts, Information Architects, Interaction Designers and of course, Visual Designers. Sketches may have been […]

The post Do you want to be a web developer? appeared first on The Web School.

]]>
To be a web developer, you will need to learn HTML, CSS and JavaScript!

But hold on – you should also know that before a web developer actually writes any code, there are a number of steps, and several other disciplines may be involved: User Interface experts, Information Architects, Interaction Designers and of course, Visual Designers. Sketches may have been drawn, flowcharts created, navigation and interfaces designed and even prototypes built, but ultimately, someone has to sit down and write the code! The front end web developer is that person. They actually get to build the final site.

webjam-image

Modern websites are built using HTML, CSS and Javascript. Web developers must have production-level skills in these languages.

HTML – your first step

Your journey begins with HTML. Originally, webpages were built only with HTML (and subsequently didn’t look very exciting). There’s more going on in modern webpages, but HTML is still absolutely essential. HTML provides a library of ‘tags’ which define various page elements – headings, paragraphs, lists, sections, images etc. Web developers often refer to HTML as providing the structure of the page. HTML alone won’t create a modern webpage though – here’s a page from 1994, before CSS was introduced:

no-css

CSS – it’s all about presentation

Once you have the basics of HTML (and that doesn’t take long), you’ll need to learn how to write CSS. Everything from fonts and colour to page layouts and responsive design and beyond. So, a visual designer may provide an exact specification for a button – colour, shape and size, font, positioning, how the button responds to the mouse, basically everything to do with the button’s appearance. CSS is used to implement the design. Your designer is happy!

button with CSS

Javascript – watch your behaviour

Javascript is a programming language, which runs in the web browser. It provides ‘behaviour’, or in other words, interactivity, animation and more. When you interact with an image slider, or even play a game online, Javascript is working behind the scenes to make that stuff happen. You don’t have to be a programmer to begin writing Javascript – some stuff is pretty simple. Many front end web developers use existing scripts, and modify them to suit their particular requirements.

jQuery – making Javascript easier

JQuery is a Javascript library that dramatically speeds up the scripting process. jQuery utilises familiar and concise CSS syntax. There are hundreds of plug-ins for jQuery that cover pretty much everything to do with user interface design – slideshows, responsive navigation, animated scrolling and much more.

Your journey continues

Web developers may be expected to have a good understanding of a wide range of topics including SEO, animation, image optimisation, video User Interface design, UX… And then there are ‘assistive technologies’ – solutions that speed up the development process in different ways: Frameworks such as Bootstrap or Foundation and CSS pre-processors such as SASS or LESS.

The journey towards becoming a web developer doesn’t simply stop at the end of the line – it’s a lifelong learning experience. Our industry changes constantly, and one of the exciting challenges is keeping abreast of new technologies and techniques, and staying as close as possible to the cutting edge!

Ready to get started?

The Web School provides a wide range of web development courses at all levels – from beginner to advanced, as well as certification packages. If you’re ready to jump in, our intensive HTML | CSS & Web Principles course covers HTML and CSS to an intermediate level – a great way to get up and running quickly.

The post Do you want to be a web developer? appeared first on The Web School.

]]>
https://www.thewebschool.com.au/blog/be-a-web-developer/feed/ 1