Maandag 19 November 2018

What's hot and what's not? Dat is voor iedereen verschillend uiteraard, maar hieronder vind je dagelijks nieuws uit de wereld die mij boeit.

Veerle's Blog: blog van Veerle Pieters, freelance graphic designer

Graphic Design Link Picks #0099 #0100

Questions get answered every week in these valuable resources. It's a big one again! We start with an InDesign tutorial to create an infographic. Next is a movie about an illustrator I really admire, Malika Favre. Some tips about giving feedback and the read of week goes to this fantastic interview with Jessica Hische. A must see is the visual history of computing between 1945-1979. Apple is also adding incredible design details in the new Apple Maps as you'll discover in Justin O'Beirne's essay. That's not all, so check it all out. Enjoy! How to Create an Infographic Design in Adobe InDesign You’ll create the main infographic layout in Adobe InDesign, but you’ll also need to dip into Adobe Illustrator to edit the graphics for the design. Beginner friendly. A Little Film About… Malika Favre One of the illustrators I really admire is Malika Favre. Her colorful work is truly inspiring and motivational. Warning, you may get house envy too :) There’s no “I” in Feedback Amanda Spilchen, UX Designer and creative direction at Shopify goes deeper into the how and why you should treat feedback as a team sport. Interesting read and approach. Jessica Hische: Tomorrow I’ll Be Brave I absolutely loved this interview with Jessica Hische. This honest and down to earth conversation made me admire Jessica's work even more. Have a look! Guide to Computing A visual history of computing 1945-1979. Absolutely gorgeous stylized and colored photographs of old computers and peripherals. A Design Tool That is Also a Developer Tool. Introducing Profiles in Hadron Last week I mentioned that design tools seem to sprout like mushrooms and here's another that I hadn't heard of before. One of the things that make Hadron unique is the fact that it updates code in real time. They don’t store designs in internal data structures that are later translated into images or code. So it's your code. Interesting. How Marylou Faure Illustrates Women to Make Them Feel Good I always like to read the background of the person in question, how they start their day, how they work etc. You've seen her colorful work in my inspiration stream. Learning the Basics of Adobe XD in One Hour This article will help you to understand the potential of Adobe XD and how to get started with your own design project for Android or iOS. Apple’s New Map Justin O'Beirne's essay on how Apple Maps is getting better and the incredible details they are adding. Very interesting look! Apple's Brooklyn Event Screensaver Apple asked several creatives to do something creative with their logo. Somebody now created a screen saver based on the animations presented during Apple's Special Event. Beautiful! Design Native Userflows Right Inside Figma and Sketch with Flowkit 2.0 I've linked to Flowkit back in newsletter #51 and #55 and now it has been completely redesigned from the ground up. Flowkit now lets you create super fast user flows in both Sketch and Figma, but each format was designed natively to leverage the unique features of each design tool. In this article you'll read what's new.

Lees verder »

Global vs. Artboard Rulers & Transforming Patterns Tip

While working on projects I sometimes stumble upon certain features I didn't know existed when trying to solve a problem. Then there are also things that got my knickers in a twits. I investigate, try to find the culprit, a solution or the answer. These experiences are gathered and shared with you via these design tips.  Transforming Patterns It more than often happens that after I've created a pattern swatch and applied it to an object, that the pattern is either too big or too small, or it's not exactly positioned the way I want it. To resize a pattern within its object, you have to make sure that Transform Pattern Only is selected in the Transform panel/window. To move the pattern's position, I usually go to Effect > Distort & Transform > Transform…, use the Horizontal and/or Vertical Move settings, and have Preview checked to I see what I'm doing. Of course, also here I make sure only Transform Patterns is checked, so only the pattern is affected and nothing else. Global vs. Artboard Rulers The placement of pattern swatches within objects is tied to the 0/0 ruler origin… that's if you're using Global Rulers, which uses the top left corner of the illustration window as origin point. Moving this origin point in this setting, makes a pattern shift. However, in Ai's latest version, the rulers are set to Artboards Rulers by default, meaning each Artboard uses its own rulers. To me this setting makes most sense and it also means that the pattern stays in place when you move the rulers' origin point. Double clicking the rulers' top left corner will reset the origin point back to its top left position in case you've accidentally moved it.

Lees verder »

Create a Cubical Pattern in Adobe Illustrator

Geometrical shapes and patterns have always been my thing. I've used  them in many of my creations and client projects. They often look rather complicated, but the creation itself can be rather simple. Especially when you have the right tools at hand. The more tricky part lies in the way you apply this into a design… Just to give you a couple of examples to get the inspiration flowing, here are some business card examples, and a book cover illustration using the pattern you're about to create... For this tutorial I'll show you how you can create this cubical pattern background using Illustrator's Pattern Maker feature. Let's get started…  1. Select Polygon tool Select the Polygon Tool which is located under the Rectangle Tool. Click on the canvas… 2. Draw a hexagon Enter 100 px as radius value, and 6 as the amount of sides. Click OK. For pure practical reasons, give the hexagon a color fill and no stroke. 3. Rotate by 30° from the center To transform this object into a cube, we need to rotate the hexagon by 30° so we have a point at the top in the center. With the hexagon still selected, select the Rotate Tool and Alt/Option click in its exact center point. Enter 30° as the rotation angle value, and click OK. 4. Draw a vertical line Now we'll create dividing lines to split this object up into 6 triangles. We start by drawing a vertical line. Select the Line Tool and draw a vertical line somewhere in the center of the hexagon (by holding down the Shift Key). 5. Align Vertical & Horizontal Center Now select both objects and click both the Align Vertical Center and Align Horizontal Center option from the Control bar at the top of your workspace. If you don't see this bar go to View > Control. 6. Select the Rotate Tool Select just the vertical line, choose the Rotate Tool and Alt/Option click in the exact center of the line. To help you find this exact spot, enable Smart Guides: go to View > Smart Guides. If you see a checkmark, then they are enabled. You can use Cmd/Ctrl + U to switch them on and off during your process. 7. Copy Rotate by -60° from the center In the rotate options window enter -60° as the rotation angle value, and make sure to click the Copy button. Now enter Cmd/Ctrl + D to repeat this action (Object > Transform > Transform Again). 8. Align Vertical & Horizontal Center Just like before, select all objects and click both the Align Vertical Center and Align Horizontal Center option from the Control bar at the top of your screen. 9. Divide into triangular segments With everything still selected, go to the Pathfinder panel and choose the Divide option. This will divide the hexagon into 6 triangles. 10. Apply color Now select each triangle and give it a color. Use the Direct Selection Tool white arrow) to select. You can choose any color you like. You could choose only one color and play with dark and light to create depth. I've decided to keep it very colorful with the illusion of depth as if it's a cube with transparency at play. 11. Make a pattern Now comes the fun part! Select the object and go to Object > Pattern > Make. 12. Select Hex by Row Select the Hex by Row option from the Tile Type dropdown menu, and enter a name in the Name field. Here you can still tweak the color of the pattern object if you like by using the Direct Selection Tool (white arrow). If you are happy with the result, exit Pattern Mode by clicking the back arrow at the top of your window. That's it! Now you can apply your pattern… 13. Apply the pattern To apply your pattern, draw a rectangle and select your pattern as a fill from the Swatches panel. Often it happens that the pattern is either too big or too small. To fix this I select my object first and then choose the Scale tool. Then I Alt/Option click to evoke the Scale window. In the Scale window I make sure that the option Transform patterns is checked, and most importantly that the Transform Objects is unchecked. This way I'm only resizing the pattern inside my object, but not the object itself. That's it! I hope you liked this exercise and it gives you ideas for some fun and maybe more complex pattern creations. This  Pattern Maker feature is powerful and fun to experiment with. Have fun experimenting!

Lees verder »

Web Design Link Picks #0099 #0100

Xtra, Xtra, read all about it :) That's exactly what is on the agenda for this week resources. Experimenting with 3D CSS, a serious deep dive into webpack 4 and we can always count on Mary Lou to supply us with some inspiration. This time it's about animated grid preview. Speaking about grid there's also a nice tutorial about Grid Tile Layouts with Auto-fit and Minmax included. You can also learn a bit about masking. Enjoy! Tricky CSS hover Experimenting in 3D CSS with a VR inspired card layout featuring a skateboarding theme. Explore this CodePen to learn how it was achieved. An Annotated Webpack 4 Config for Frontend Web Development A serious deep dive article that's not my cup of tea but maybe it's yours. It's a com­plete real-world pro­duc­tion exam­ple of a sophis­ti­cat­ed web­pack 4 config. Animated Grid Previews Mary Lou shows a template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked. Mask Animation with GSAP & SVG Explore this CodePen to learn how this three words slider with Greensock, SVG and mask transitions was created. Grid Tile Layouts with Auto-fit and Minmax Nice tutorial on creating various "tile layouts" using CSS Grid.

Lees verder »
 SeQueL IT bvba    |   Dorpsstraat 56, 2920 Kalmthout, België   |   |   BTW BE 0898.784.380 - RPR Antwerpen
 Copyright © 2007-2017 Alle rechten voorbehouden