feed.stefanherz.com’s Saved Items http://feed.stefanherz.com Shaun Inman’s Fever http://blogs.law.harvard.edu/tech/rss <![CDATA[22 Best Photoshop Dispersion Effects to Disintegrate Photos in Style]]> Ever wanted to create stunning and explosive visuals in your photographs? One way to do this is with dispersion effects, which take the core subjects of your photos and spread them across the image canvas. Dispersion is commonly found in advertising and marketing promos. But you can use it in your own work too, as we’ll see below in this collection of 22 amazing Photoshop actions.

22 Best Photoshop Dispersion Effects

Dispersion effects are built for a variety of themes: portraits, action shots, landscapes, you name it. Each category has photo filters and effects built just for it. We’ve collected these from Envato Elements and GraphicRiver. You’ll find a well-rounded assortment of the 22 best dispersion Photoshop effects created for use in projects just like yours.

Elements offers unlimited access to Photoshop actions, while GraphicRiver offers inexpensive Photoshop effects on a pay-per-action model. 

Also, if you prefer to get professional help, check out the many services available at Envato Studio, where you can work with skilled designers to achieve all of your creative goals.

1. Feathers Photoshop Action

Help your photos take flight with these inspired Photoshop actions. Best used in human photography, these actions will disperse subjects into vivid bursts of feathers. They’ll add a special look to fashion photographs and portraits alike. Ten color presets are included to help you tune and refine each image. 

Feathers Photoshop Dispersion

2. Flux Photoshop Action

Flux delivers spectacular dispersions reminiscent of abstract art. The focal points dissolve into paint-like splashes for an edgy look. The 3D effects for pictures can be applied from four directions to best suit the setting and orientation of your photos. Spend some time mixing and matching angles and effects to see what works best.

Flux Photoshop Action

3. Elementum - Dispersion Photoshop Action

Capture the energy of a ticker-tape parade with this fun photo effect. Split images into wild flashes of confetti that lend a feeling of speed to any shot. The illusion of motion is complemented by an array of color and graphic options that can be applied with a single click.

Elementum Dispersion

4. 3D Dispersion Photoshop Action

Unlike flatter effects, this 3D Photoshop filter delivers an incredible sense of involvement in every image. The bold multidimensional elements resemble gemstones flying towards the viewer. These effects are optimized for sports and action photography and really help amplify the action!

3D Dispersion Action

5. Dispersion 2 Photoshop Action

Dispersion 2 is an amazingly rich and robust effect to transform everyday action shots into works of art. Style your images in the tradition of movie posters and video game covers with flashy, ethereal graphics. The color palette automatically optimizes to match the focal point of your photo. 

Dispersion 2 PS Action

6. Ashes n Embers Photoshop Action

Turn mundane grayscale images into red-hot wonders with Ashes n Embers, a volcanic dispersion effect. Fiery graphics dramatically offset binary black and white images and create unforgettable photographs. Boost the explosive style even more by trying out the included color presets. 

Ashes N Embers

7. Pixelated Photoshop Action

True to its name, Pixelated breaks images down into individual pixels for a grainy, modern feel. Depending on the intensity of application, you can pixelate the full image or just the periphery of your subjects. The end result is abstract and captures the grunge style in every frame.

Pixelated PS Action

8. Blossoms Photoshop Action

Blossoms is a floral effect that turns people into petals. Aimed at action photographs, this action creates explosive bursts of color. To alter the effect, adjust the color styling of your image in advance and then try applying the effect to bring out new and unforgettable looks.

Blossoms Photoshop Action

9. Tornadum - Powerful Dispersion Photoshop Action

Whirlwinds create stunning visuals that grab the attention of even the most distracted viewers. Fire, dust, and particles explode across any image this effect is applied to. The result is a gritty, intimate shot with a vortex of dispersion color effects for pictures. Again, color changes are all-important to instantly alter the mood of your photo.


10. Sand Dust / Powder Explosion Photoshop Action

Sand, dirt, and dust—these natural elements simulate stillness and the passage of time. But when stirred into motion by their human subjects, they bring about thoughts of power and speed, momentum and disruption. This dramatic contrast is boldly captured in this photo effect, best suited to images with strong contrast and fluid motion. 

Sand Dust and Powder

11. Bubblum - Bubble Generator Photoshop Action

Made for quirky and eclectic snapshots, Bubblum is one of the best Photoshop filters for a moisture effect similar to water droplets. Abstract and yet vivid, this action strikes the perfect balance of documentary and art. Unlike many of the portrait examples we’ve explored, this effect is great for auto and fashion photography. 

Bubblum PS Action

12. Geometric Dispersion FX Add-On Extension

Quick and dynamic, Geometric Dispersion is a top choice for sports photo filters and effects. The download is a pack of several unique effects in the geometric style, creating motion mosaics from each image you apply them to. Even though the result is static, the feeling of speed is captured forever. 

Geometric Dispersion FX

13. Ashen Decay Photoshop Action

Ashen Decay brings an apocalyptic burning style to your collection of Photoshop filters. Subjects dissolve into fire, smoke, and particles. Use this one for music or movie projects, or apply it to portraits for a spectacularly unconventional look. 

Ashen Decay PS Action

14. Dustum PS Action

Dust is one of the finest techniques to bring dispersion to your photos. No finer example exists than this professional Photoshop action offering four unique dust dispersions. Easily customize colors and directions to craft new grit and glamor in each and every photo. And best of all, you won’t even have to clean dust off your lens! 

Dustum PS Action

15. Cortisol Photoshop Action

Cortisol recreates the spectacular chaos of our natural environment. Subjects will burst from a cacophony of swirling smoke and dust to make an unforgettable entrance. Every layer is fully editable to make minute adjustments to the general scene. Combine it with your own title overlays to create posters, promos, and more. 

Cortisol Photoshop Action

16. Color Splatter Action

Color effects for pictures often rely on introducing new palettes to existing images. Not so with this simple and straightforward dynamic Photoshop filter. Color Splatter takes the unique colors of your image and splatters them across the canvas, complementing instead of contrasting with the original. Aimed at creating a fun new dimension in portraits, this action is adaptable to branding and fashion uses as well. 

Color Splatter Action

17. After Actions Bundle - Photoshop Actions

When purchasing Photoshop actions, it pays to seek offerings that offer extra value. That’s definitely the case with the After Actions Bundle, which features five diverse and distinct effects in a single download. Dispersion, fantasy, lines, galaxy, and bi-exposure; each of the five caters to different types of images, and working together they form a powerful tool in any photographer’s toolbox. 

After Actions Bundle

18. RainStorm 2 Photoshop Action

Falling rain adds an intimate dimension to any photograph, but it can be difficult or impossible to capture naturally. Not to worry; with this rainy Photoshop filter, you can instantly apply downpours to every one of your images. In just a few clicks, foggy rain will disperse and overlay your subjects. The stormy fog of the falling rain is often the difference between good and great images. Take advantage of that here.

Rainstorm 2 Photoshop Action

19. Sand Photoshop Action

Help the shifting sands of time evolve from mental images to your own images with this dramatic Photoshop action. Sand particles add sharp focus to photos and help draw attention to the center of the frame. Be sure to adjust the dispersion and grain for maximum benefit. 

Sand Photoshop Action

20. Water Color Painting Photoshop Action

Watercolors are perhaps the most popular form of abstract art. If you want to capture a scene as if on canvas, but don’t have the gift of painting abilities, don’t worry. With quick photo filters and effects like these, you can transform any photograph into a beautiful watercolor. Edges are softened, and even hidden contrasts stand out.

Water Color Painting Action

21. Vintageo - Vintage Sketch Photoshop Action

Give your photos the gift of timeless style with this powerful Photoshop effect. Vintageo is a retro, artistic filter that converts everyday snaps into classical portraits. An assortment of color options and fully editable graphic elements make the action a mere starting point on your artistic journey. All the tools you need to build incredible artwork are at your fingertips.

Vintageo Vintage Sketch

22. Pen Sketch Photoshop Action

Disperse photos in the style of pen sketches with these photo effects. Distill complex photos into their fundamental elements in the transformation from photo to paper. Try Pen Sketch to break down technical photos into clean lines, or to create stunning intimate portraits. 

Pen Sketch PS Action

Top Dispersion Tutorials

If you want to learn how to create dispersion effects of your own, look no further than the tutorials below. Try these out to totally customize how you apply dispersion to your images and text. 


Dispersion, though it applies to a rather narrow concept, offers virtually unlimited artistic flexibility. As you can see, Envato offers a remarkable collection of the best Photoshop dispersion effects through Elements and GraphicRiver

Be sure to explore both sites on your creative journey. And once you’ve found the dispersion effect of your choice, spend some quality time experimenting with it in Photoshop. The most amazing images aren’t built instantly, and practice makes perfect! Also, don’t forget to check out Envato Studio to enlist professional help with your projects.

https://design.tutsplus.com/tutorials/22-best-photoshop-dispersion-effects-to-disintegrate-photos-in-style--cms-32433 108961@feed.stefanherz.com Wed, 13 Feb 2019 18:00:00 GMT
<![CDATA[50 Amazing & Cool Photoshop Action Tutorials]]> With Photoshop actions, you can create cool photo effects with a single click. You can use them to apply fun filters, add color effects, or even turn a photo into art. 

So if you know how to create actions, you have a powerful tool in your hands! In this article, I'll show you a collection of our Photoshop action tutorials for photo and text effects.

And if you've never heard of Photoshop actions or are not sure how to use them, you can use these tutorials as an intro:

Painting and Drawing Photoshop Actions

Some photos would look great as a painting or a drawing, but you don't have to be an artist to achieve such an effect— you can use special actions to turn photos into paintings! You can choose from watercolors, oil, drawing, or digital painting effects. In these tutorials, you'll learn how to create such effects and how to use them as actions.

Photo Effect Photoshop Actions

If you have a good photo, you can make it even better by adding a special effect to it. You can change its colors, add some magical lighting, and play with shadows. There are so many things you can do to enhance a photo without making it obviously manipulated! And in these tutorials you'll learn how to add such effects.

Cool Photo Effect Photoshop Actions

But maybe you don't care about being subtle—maybe you want to add some magic to your photos. In these tutorials, you'll learn how to add cool photo effects that turn your photos into something completely new—works of art on their own. Give new life to your photos with these fun photo filters!

Text Effect Photoshop Actions

Actions can be applied to text as well. You can change colors, shape, and even add special materials to the letters, making them much more appealing than ordinary text. In these tutorials, you'll learn how to add such special effects to your text in Photoshop with actions.

Typography Photo Effect Photoshop Actions

A picture is worth a thousand words, but words can make a picture, too! In these tutorials, you'll learn how to use text to enhance photos and transform them into eye-catching artworks.

Animated Photo Effect Photoshop Actions

If you want to add some life to a photo, you can create an animation out of it. And did you know that it's possible to animate photos with Photoshop actions, too? In these tutorials, you'll learn how to do it!


Photoshop actions are a real life-saver if you need to apply a cool photo effect quickly. But before you can use such an action, you must create it. But did you know that many artists publish their Photoshop actions on Envato Elements, ready to download and use? Whenever you need cool Photoshop portrait actions, photo effects, or magical text effects, take a look at the gallery and see if they have what you need!

photo effects photoshop actions

https://design.tutsplus.com/articles/50-amazing-cool-photoshop-action-tutorials--cms-32426 108070@feed.stefanherz.com Sat, 26 Jan 2019 12:00:00 GMT
<![CDATA[SmartPhoto.js – Simple Responsive Image Viewer Designed for Mobile]]>
Visit hongkiat.com for full content.]]>
https://www.hongkiat.com/blog/smartphotojs-mobile-slideshow-plugin/ 106560@feed.stefanherz.com Tue, 24 Jul 2018 13:01:42 GMT
<![CDATA[How to Create a Quick Sparkling Diamonds Text Effect in Adobe Photoshop]]> Final product image
What You'll Be Creating

Learn how to create a quick diamond text effect in Photoshop.

Some fonts can make creating certain text effects much easier. This tutorial will show you how to use a dotted font, with a couple of layer styles, to achieve a simple, glittering diamond effect. Let's get started!

Get more amazing Diamond Graphics from Envato Market.

Tutorial Assets

The following assets were used during the production of this tutorial.

1. How to Create the Background

Step 1

Create a new 1342 x 755 px document. Set the Foreground color to #161819 and the Background color to #010101, pick the Gradient Tool, click the Radial Gradient icon in the Options bar, and then click and drag from the center of the document to one of the corners, and duplicate the Background layer.

Background Gradient

Step 2

Double click the Background copy layer to apply a Pattern Overlay effect using the following settings:

  • Blend Mode: Overlay
  • Pattern: DP1-E
Pattern Overlay

This will style the background.

Styled Background

2. How to Create the Text and Style the First Layer

Step 1

Create the text using the font Fortuna Dot, the Size 200 pt, and the color #a7a59f.

Duplicate the text layer and change the copy's Fill value to 0.

Create the Text

Double click the original text layer to apply the following layer style:

Step 2

Add a Bevel and Emboss with these settings:

  • Size: 10
  • Gloss Contour: Ring
  • Check the Anti-aliased box
  • Highlight Mode: Vivid Light
  • Shadow Mode - Color: #a6a6a6
Bevel and Emboss

Step 3

Add a Contour with these settings:

  • Check the Anti-aliased box.
  • Range: 25%

Step 4

Add a Texture with these settings:

  • Pattern: Mesh Transparent BG

Step 5

Add a Pattern Overlay with these settings:

  • Pattern: Crystal Pattern
  • Scale: 10%
Pattern Overlay

Step 6

Add a Drop Shadow with these settings:

  • Opacity: 50%
  • Distance: 10
  • Spread: 15
  • Size: 5
Drop Shadow

This will create the first layer of the effect.

First Styled Layer

3. How to Style the Second Text Layer

Double click the copy text layer to apply the following layer style:

Step 1

Add a Bevel and Emboss with these settings:

  • Technique: Chisel Hard
  • Size: 6
  • Uncheck the Use Global Light box
  • Angle: 82
  • Altitude: 53
  • Gloss Contour: Ring
  • Check the Anti-aliased box
  • Highlight Mode: Linear Light
  • Shadow Mode - Opacity: 0%
Bevel and Emboss

Step 2

Add a Contour with these settings:

  • Check the Anti-aliased box.

Step 3

Add a Texture with these settings:

  • Pattern: Double lined
  • Depth: 500%

Step 4

Add an Inner Glow with these settings:

  • Noise: 49%
  • Color: #b3b694
  • Source: Center
  • Size: 16
Inner Glow

Step 5

Add a Pattern Overlay with these settings:

  • Blend Mode: Soft Light
  • Opacity: 65%
  • Pattern: Nebula
Pattern Overlay

This will style the second layer of the effect, adding some color using the Pattern Overlay effect, and more glossiness using the Bevel and Emboss settings.

Second Styled Layer

4. How to Add the Flares

Step 1

Set the Foreground color to #f4f1e3, pick the Brush Tool, and open the Brush panel (Window > Brush). Choose one of the Stars and Flares Brush Set brush tips, and modify its settings as shown below:

Brush Tip Shape

Brush Tip Shape

Shape Dynamics

Shape Dynamics

Step 2

Create a new layer on top of all layers, call it Sparkles, and change its Blend Mode to Linear Light. Then start clicking to add some sparkling flares at the edges of the text.

Adding the Flares

Congratulations! You're Done

In this tutorial, we created a simple background, and two text layers. Then, we styled both text layers using different layer effects to achieve the crystal-like look. Finally, we added a couple of flares to make the text pop a bit more.

Please feel free to leave your comments, suggestions, and outcomes below.

Diamond text effect
Close up diamond effect

Diamond Graphics From Envato Market

Need to add a little sparkle and shine to your designs? Then check out Envato Market for thousands of high quality resources at affordable prices. Take a look at one of our favorites below!

Diamonds & Gold Graphic Style

Instantly add the luxury of gold and diamonds to your typography! This lovely graphic style generates random diamonds with a stunning gold border. Use it to add drama to your work for a unique and beautiful text effect.

Diamonds  Gold Graphic Style
https://design.tutsplus.com/tutorials/how-to-create-a-quick-sparkling-diamonds-text-effect-in-adobe-photoshop--cms-23448 105993@feed.stefanherz.com Mon, 02 Jul 2018 08:05:07 GMT
<![CDATA[What Newsletters Should Designers And Developers Be Subscribing To?]]> What Newsletters Should Designers And Developers Be Subscribing To?

What Newsletters Should Designers And Developers Be Subscribing To?

Ricky Onsman

We put out the call on Twitter and Facebook: “What email newsletters are you following these days?” The task of compiling your (many, many) responses has fallen to me.

I should disclose that I have a vested interest in that I currently edit a bi-weekly email newsletter for a conference organizer, UX Australia. In fact, over the years, I’ve edited dozens of email newsletters — some more successful than others.

Anyway, for the purpose of this article, we need to make a few things clear.

First, the newsletters that were most namechecked are included here in their own section: “The Favorites.” The eight that made this list comprise a formidable toolkit of newsletters for any web designer or front-end developer.

Second, I found that there are several types of newsletters which I tried to include representatively:

  • Aggregated links
  • Editorial
  • Company/product/service/event promotions
  • Tutorials
  • Broad industry news
  • Specific tech news
  • Combination of any of the above

Third, there is a lot of overlap in linked content from one newsletter to the next. That’s to be expected when everyone wants to break news and aggregate link-worthy articles.

Fourth, I focused on great newsletter content. It could be presented as sophisticated HTML with videos and infographics, or it could be no nonsense plain text with minimal descriptions, as long as the content — including how reliable any links are — is good.

Lastly, I tried to keep the focus to only actual newsletters that arrive in your email inbox, and that focus on what web designers and developers do. That’s not to deny the value of newsletters that give designers and devs a broader context for their work; I just had to draw the line somewhere.

I also excluded newsletters that claim to be bi-weekly but have produced just four issues in the last nine months (even if those four issues were very good) and “occasional updates.”

So, let’s see what we have. Buckle up.

The Favorites

Smashing Magazine

Smashing MagazineWell, of course a lot of people mentioned our own newsletter, and we’re proud and grateful for our readers’ loyalty. I’ll also point out that ours is a rare example of all of the types of newsletter mentioned above, and one with a strong, clear voice. Just sayin’. Twice a month.

CSS Layout News

CSS Layout NewsA high-quality weekly collection of tutorials, news and information on all things CSS Layout, edited by Rachel Andrew, editor-in-chief of Smashing Magazine, web developer, writer, speaker, author of The New CSS Layout, co-founder of Perch CMS. Weekly.


CSS-TricksIt used to be primarily about CSS, but over the years CSS-Tricks has become about all things web design and development, and very popular it is, too. The newsletter is a great way to keep up, as Chris Coyier and his team regularly pull out new insights and clever styling techniques. Weekly.

CSS Weekly

CSS Weekly
Front-end dev Zoran Jambor’s hand-picked selection of CSS new, views, tips and techniques from a very wide range of sources, on everything from Unicode patterns to accessibility to security and query feature management. Weekly.

Layout Land

Layout LandMozilla Designer and Developer Advocate Jen Simmons knows a lot about CSS Grid and, lucky for us, she’s happy to share. The chief purpose of the newsletter is to let subscribers know about new videos available on the YouTube channel of the same name, but the editorial comments are great value in themselves. Monthly.

Web Development Reading List

Web Development Reading ListAnselm Hannemann, front-end developer and founder of Colloq, compiles a mix of dev & design news, commentary, techniques, tools and broader work/life matters every week. There’s usually a short but pithy editorial, and then up to a dozen links with a paragraph about why it might be interesting to you. He also contributes monthly WDRL issues on Smashing Magazine. Highly readable.

UX Design Weekly

UX Design WeeklyA hand-picked list of the best user experience design links, curated by Kenny Chen. A clearly defined balance of articles, tools & resources, media, portfolios and news — all focused on UX design. Has the twin virtues of feeling hand-picked and providing a great range of topics. Weekly.

JavaScript Weekly

JavaScript WeeklyFrom the Cooperpress family of publications, this is one of their strongest newsletters, a well chosen round-up of JS news and articles. The first set of article links get a brief and relevant paragraph description, while the rest are divided into Jobs, Tutorials, Opinions, Videos, Code and Tools with one line descriptions. Comprehensive and readable. Weekly.



A11yWeeklyDavid A. Kennedy wrangles WordPress themes for Automattic, is an accessibility evangelist, and compiles this very useful dose of links to web accessibility news, resources, tools and tutorials. Weekly.


WebAIMWebAIM has become a major and reliable resource for guidance and discussion relating to web accessibility. The newsletter includes featured articles, technical tips, resources, and questions from WebAIM's discussion forum. The featured articles are both from WebAIM staff and key web accessibility figures around the world. Monthly.


UI Animation Newsletter

UI Animation NewsletterKeep up to date on the best web animation, motion design, and UX resources on the web. Subscribe for a weekly collection of curated tutorials and articles — plus advice on how to make web animation work for you. Written and curated by designer, interface animation consultant, speaker and author Val Head. Weekly.

Animation at Work

Animation at WorkA hand-picked selection of articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design (which until last month was called “Web Animation Weekly”). It’s Rachel Nabors’ project, but the hands doing the picking belong to a range of guest editors who can be nominated by readers. Monthly.


Really Good Emails

Really Good EmailsRGE aims to be “the best showcase of email design and resources on the web”. A 3,300 strong gallery of examples, excellent articles, and links to a lot of resources suggest they really might be “the epicenter of the email earthquake, but in a good and happy-shakey kind of way.” You’d expect this lot to have a good newsletter, and they do. Monthly.


Email design and strategy studio Action Rocket’s very useful collection of links to articles on design, HTML and creative concepts for email drawn from their own work and other pros in the field. Weekly.

Emerging Technology

Dev Diner

Dev DinerEdited by Patrick Catanzariti, this is very well organized and aims to keep web developers inspired and in the know, with links to the latest in VR, AR, wearables, the Internet of Things, AI, robotics and all sorts of other new and emerging tech. Weekly.


Friday Front-end

Friday Front-end
ZenDev founder, front-end consultant and trainer Kevin Ball covers CSS-focused developments, industry news, tutorials and dev resources. Each newsletter has an intro from Kball followed by three sections: CSS, JavaScript, and Other Awesomeness (each with five items with handcrafted descriptions). Weekly.

Friday Front-End

Friday Front-EndThis is a nice, simple format that works very well. CSS developer Scott Vandehey tweets a daily link to an interesting front-end article. At the end of the working week, these links are packed with a short description into an email. The selection is a thoughtful mix, so it feels less like a bunch of random links and more like a summary of key stories. Weekly.

Frontend Focus

Frontend Focus
Just one of a suite of targeted publications by Peter Cooper, software developer, podcaster and Publisher-in-Chief of tech niche newsletter company Cooperpress. This one focuses on HTML, CSS, WebGL, Canvas and front end-related news updates, articles and tutorials. Others cover JavaScript, Ruby, databases, mobile and more. Weekly.

Web Design Weekly

Web Design WeeklyA newsletter and blog by Jake Bresnehan, that will help you to stay on top of all things web design and front end development. Links to tips & tricks, in depth articles, interviews, tools & resources, jobs and the occasional quirky story. Weekly.

Web Tools Weekly

Web Tools WeeklyA front-end development and web design newsletter with a focus on tools, curated by Louis Lazaris. Each issue features a brief tip or tutorial, followed by a round-up of apps, scripts, plugins, and other resources to help front-end developers solve problems and be more productive. Weekly.

Front End Front

Front End FrontA crowd curated feed of front-end related articles, by brothers Stelian and Sergiu Firez. Site visitors vote up articles linked to from the feed. The newsletter is a list of the top 10 voted most recent articles. Topics are what you’d expect: CSS, JavaScript, HTML, images, performance — mostly technical, some bigger picture. Definitely some links not seen elsewhere. Weekly.


ES.next News

ES.next NewsThe latest in JavaScript and cross-platform tools. Get five ECMAScript.next links delivered to your inbox, every week. Not afraid to mix highly technical code-focused pieces with bigger picture industry stories. Curated by Dr. Axel Rauschmayer and Johannes Weber. Weekly.


Adventures in Typography

Adventures in TypographyA love letter to the written word, by Robin Rendle. Topics include “calligraphy, lettering, display type, micro type, books about fonts, type specimens, neon lights, posters, morse code, stamps, literature, web design, and books about seeds”. The format is that of a proper letter written by Robin to you which is rather lovely when it’s from someone so passionate. Weekly.

Fresh Fonts

Fresh FontsCurated by Noemi Stauffer and featuring the latest free and open-source fonts, the most solid new typefaces by indie foundries and discount codes, this is a concise and well-compiled exploration of (mostly) newly released fonts and how you can get them. Twice a month.

Coffee Table Typography

Coffee Table TypographyA love for words, letters, language, and coffee. This digest of resources, articles and knowledge of typography — in design, on the web, or books — is curated by Ricardo Magalhães. More than just a set of links, Ricardo digs into the articles he’s linking to, whether it’s a new font release or a deeper look into the role of typography on the web. Once or twice a month.

User Experience

UX Collective

UX CollectiveFounded by Fabricio Teixeira and Caio Braga, this has become a bit of a UX behemoth, publishing a high volume of original articles and aggregated material on a range of UX and design related topics. Impressive output in terms of both quantity and quality. The newsletter reflects that. Weekly.


UxcellenceDesigner and developer Ste Grainer founded this “love letter to user experience design, front-end development, building products, and making the world a better place.” His newsletter collects links to the latest UX articles and resources, as well reminders of older, good resource links. Monthly.

User Interface Engineering

User Interface EngineeringJared Spool has a hard-won global reputation as a consultant, trainer, speaker and writer on usability, UI and UX. It’s not surprising, then, that he realizes the great value of older content. The UIE newsletter is as likely to link to an article from five years ago as yesterday, if it’s still relevant — and, with user-centric topics, that’s often the case. Smart and useful. Weekly.

UX Booth

UX BoothBy and for the user experience community, founded by Matthew Kammerer, David Leggett and Andrew Maier, for a readership mostly of beginning-to-intermediate user experience and interaction designers. The newsletter highlights one new inhouse article a week, plus links to three or four external UX articles and the occasional (often remote) job listing. Concise, focused, digestible and reliable. Weekly.


UXmattersFounded by Pabini Gabriel-Petit in 2005, this provides insights and inspiration to experienced professionals working in every aspect of UX, as well as beginners. The newsletter focuses tightly on new content on the website, but when you publish up to six articles, interviews, panel discussions, and technical pieces a week, that makes for a good newsletter. Weekly.

Web Design

An Event Apart Digest

An Event Apart DigestIn 1997, Jeffrey Zeldman and Brian M Platz started a mailing list called A List Apart. It evolved into one of the world’s leading magazine sites “for people who make websites” and spawned the An Event Apart conference series and book publisher A Book Apart. The Digest wraps all of this activity up and adds links to other interesting articles, videos and resources. Monthly.

Web Designer News

Web Designer NewsBuilt “to provide web designers and developers with a single location to discover the latest and most significant stories on the Web.” Content includes “quality news, fresh tools and apps, case studies, code demos, inspiration posts, videos and more”. It is extremely comprehensive, and posts links every couple of hours. There is a user voting system, and the most shared items are featured in the newsletter. Daily.


WebdesignerDepot In 10 years, WDD has grown from a blog into a genuine online magazine for web designers — and developers, content authors, specialist and generalists. Drawing on a stable of inhouse writers and external contributors, including some high-profile industry type. The newsletter highlights 10 or so items ranging across news, product info, design, code and WDD’s monthly round-up. Weekly.


SidebarSince 2012, Sidebar has been collecting links about UI design, typography, CSS, user research, and all other facets of design. It's now a trusted resource for thousands of designers across the world to stay on top of the latest news, trends, and resources. Each newsletter can include from three to a dozen links. Daily.


SpeckyboyThe website was launched in 2007 as an inspirational hub for web designers. As web design trends became more advanced and more tools became available it evolved into a web design magazine. Articles are usually published daily, which makes for a satisfyingly full email newsletter. Weekly.

Responsive Design Weekly

Responsive Design Weekly Web developer Justin Avery’s side project ResponsiveDesign.is has become a go-to site dedicated to providing beginners and advanced users tips, tricks, inspiration and resources for responsive design projects. The newsletter is equally popular and a very convenient way to keep with responsive design news. Weekly.

The Web Designer Newsletter

The Web Designer NewsletterA heady mix of image-heavy product placement, sponsored items, free resources and links to articles, this newsletter regularly comes up with links to articles I don’t see elsewhere. I don’t know who is behind it (the very brief website just says “curated by designers for designers”), but it’s hard to ignore. Weekly.

Design Systems

Design SystemsA curated publication full of interesting, relevant links. I would call this an example of an educated, focused and informed newsletter of links to web resources that genuinely advance thinking on design systems. Providing just an article title and link makes it feel robotic and impersonal, but maybe that’s an approach you’ll like. Weekly (more or less).

Web Field Manual

Web Field ManualA curated list of resources focused on documenting knowledge for designing experiences and interfaces on the web. It is an ever-expanding collection of knowledge and inspiration for web designers, by web designers — namely Jon Yablonski, Garrett Wieronski, and Geoff Tice. The Dispatch keeps you up to date. Weekly.

Web Design Update

Web Design UpdateThis is an oldie but a goodie, a plain text email digest disseminating news and information about web design and development with an emphasis on user experience, accessibility, and web standards. Around since 2002 (with a name change), it’s linked to the university-based Web Design Reference archive, and it is still edited by Laura Carlson. Weekly.

Web & Tech


VersioningSitePoint is a publisher of books, articles, videos and community forums on all aspects of web design and development. It produces several weekly newsletters, but this is the cream of the crop, curated by Adam Roberts. Short, sharp, timely, useful and often linking to items of industry interest that others miss. Daily.

Hacking UI

Hacking UIDavid Tintner and Sagi Shrieber’s favorite articles about design, front-end development, technology, startups, productivity and the occasional inspirational life lesson. They pack in a lot of links, which might be why they list only the article title linked to the source. With such a broad remit, there is a lot of overlap with other newsletters, but it’s all in one package. Weekly.

Hacker Newsletter

Hacker Newsletter
This side project of MailChimp’s Kale Davis links to stories on tech startups, programming developments and other stories featured on Hacker News. That means this is another list of links, with not much to say where you should direct your attention. Still, those links are pretty good. Weekly.

Pony Foo Weekly

Pony Foo WeeklyA newsletter about the open web, highlighting the most important news about the web every Thursday. Founded by developer, author and speaker Nicolás Bevacqua, and now with a team of contributing authors, it also has lots of links to current articles about the web and tech. Weekly.

Offscreen Dispatch

Offscreen DispatchOffscreen is a print magazine that focuses on people working on the web and with technology in general, edited and published by Kai Brach, a former web designer. Dispatch is Kai’s email newsletter offshoot in which he highlights products, news, events and insights for the discerning web worker. Classy and well selected. Weekly.

The History of the Web

The History of the WebJay Hoffmann had the bright idea of collecting the moments and stories that make up web history to create an online timeline. Out of that came an email newsletter pointing to one or more of these stories. Highly readable, very informative, and often surprising. Weekly.


MasterWP Weekly

MasterWP WeeklyAlex and Ben produce this newsletter for WordPress professionals, with editorial and links to apps, tools and resources. It’s not all about WordPress, though — it’s what WordPress pros need to know, so there’s general small business, lifestyle and industry articles as well as WP-specific items, including technical pieces. Weekly.


wpMail.meCurated by Cristian Antohe and Bianca Petroiu, this one carries more links to WordPress theme and plugin releases and reviews, tutorials, podcasts and videos — as well as more business, freelance and industry news and articles of interest to WordPress professionals and enthusiastic amateurs. Weekly.


While I was compiling this article, I realized I have my own go-to set of people whose email newsletters I really look forward to. It’s not because they’re necessarily “the best” — it’s more that their choices of content, tone and focus strike a strong chord with me.

I’m sure you have your own, but here — apart from those who come up in the preceding sections — are the individuals whose newsletters I look forward to landing in my inbox.

And that completes our latest round-up of email newsletters for web designers and developers.

Did I say “completes”? Of course, this list is not complete! For one thing, it probably doesn’t have your favorites. Add them — preferably with a working link — in the comments below.

Smashing Editorial (vf, ra, il)
https://www.smashingmagazine.com/2018/06/newsletters-for-designers-and-developers/ 105633@feed.stefanherz.com Mon, 25 Jun 2018 12:00:48 GMT
<![CDATA[Leabig]]> 03_schmid-widmaier-huberts-magazin-cover-leabig-couch

Mehr Bilder...

„Leabig“ bedeutet lebendig, und im neuen Magazin für die Hubertus Alpin Lodge & Spa in Balderschwang dreht sich alles um das Allgäuer Lebensgefühl. Natur und Entspannung, Genuss und Geschichte, aufwendig fotografiert, illustriert und gestaltet. Naturpapier und Schweizer Broschur mit offener Bindung entsprechen dem handwerklichen Charakter, der auch die vielen regionalen Zulieferer des Hotels prägt. Der Umschlag des Magazins ist aus durchgefärbtem Karton, der im Offset- und Siebdruck mehrfach bedruckt und lackiert wurde. Die detailreichen Illustrationen stammen von der schwedischen Illustratorin Lina Ekstrand, die Bilder mit grandiosen Landschaften und Familienporträts unter anderem von Enno Kapitza und Bergfoto-Legende Uli Wiesmeier.


https://www.designmadeingermany.de/2013/147487/ 102591@feed.stefanherz.com Fri, 13 Apr 2018 13:20:31 GMT
<![CDATA[How to Create a 3D Golden Cinematic Text Action in Adobe Photoshop]]> Final product image
What You'll Be Creating

Actions are a powerful tool in Adobe Photoshop, and those who use Photoshop for their work will probably use them on a daily basis. They can be a huge timesaver in your workflow.

In this tutorial you will learn how to create an action for a 3D golden cinematic text effect, which will work with any font in different sizes. This action is a part of the 3D Cinematic Text Generator - Actions pack.

3D Cinematic Text Generator
3D Cinematic Text Generator

Before We Start

Actions will save your time once they are done, but they require you to pay attention to details and the order of steps. Keep in mind that when you start recording an action, almost each mouse click or keyboard hit will be saved in your action.

If you are new to the actions world, you can read a great article from Melody Nieves that covers the basics of Photoshop actions or learn more from Kirk Nelson's lessons on Building Your Own Actions in Adobe Photoshop.

Tutorial Assets

Both of the asset files will help you to achieve the final image in the end, but are not necessary for creating the action:

1. Prepare to Record an Action

Before you can start to record an action, you will need to prepare some example text. In this tutorial, we will also add a themed background.

Step 1

Start by opening the Cinematic Background Image from the assets. The dimensions of the image are 900 x 600 px, and this will be our document background.

Cinematic Background

Step 2

Pick the Type Tool, choose the Trajan Pro 3 font (it should be part of the Adobe Photoshop fonts, otherwise download it from the assets), set the Font Size to around 170 pt, and write GLADIUS all in capitals. The color of the text isn't important.

Type Tool

Step 3

Click the Create Warped Text button. Set Style: Arc, check Horizontal, and set Bend: 6%.

Warped Text

2. Start to Record Your Action

Before you start recording, make sure you have only two layers in your Layers panel: the top layer GLADIUS and the bottom layer Background.

Layers Panel

Step 1

Hit Alt-F9 on your keyboard to open the Actions panel, or you can open it by going to the menu Window > Actions.

Actions Panel

Step 2

Select the GLADIUS layer and in the Actions panel click on the Create new set button, and set the Name: Cinematic Tutorial. Then click the Create new action, set the Name: 3D Gold, and hit Record. The Begin recording button should be now red.

Important! From now on, follow all of the steps in this order and without any additional mouse clicks or keyboard hits.

Create New Action

3. Create and Transform Layers

Step 1

Make your current selected GLADIUS layer invisible by clicking the Layer visibility icon in your Layers panel.

Make Layer Invisible

Step 2

Right click the GLADIUS layer and select Duplicate Layer from the menu As: c1.

Duplicate Layer Gladius

Step 3

Make your current selected c1 layer visible by clicking the Layer visibility button, and then right click the layer and choose Convert to Smart Object.

Make Layer Visible

These first steps will hide and duplicate the original text layer, and the action will be applied to a duplicate, so your original layer will stay untouched. By converting the working layer to smart object, you ensure that the action will add its effects nondestructively.

Step 4

Duplicate layers in this order:

  • Right click the c1 layer and select Duplicate Layer from the menu As: b1
  • Right click the b1 layer and select Duplicate Layer from the menu As: b2
  • Right click the b2 layer and select Duplicate Layer from the menu As: b3.
  • Right click the b3 layer and select Duplicate Layer from the menu As: b4.
  • Right click the b4 layer and select Duplicate Layer from the menu As: b5.
  • Right click the b5 layer and select Duplicate Layer from the menu As: a1.
Duplicate Layers b1 to a1

Step 5

Select layer b2 and go to menu Edit > Free Transform (or Control-T), uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 99.5%, and add 1 px to the total value of vertical position Y: (for example, if the value is Y: 287.55 px, change it to 288.55 px). Finally, hit Enter to apply the changes. 

Transform Layer b2

Step 6

Select layer b3 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 99%, and add 2 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer b3

Step 7

Select layer b4 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 98.5%, and add 3 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer b4

Step 8

Select layer b5 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 98%, and add 4 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer b5

Step 9

Select layer c1 and transform it by going to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 98%, and add 4 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c1

Step 10

Double-click the c1 layer to apply the following layer style:

Add a Stroke of any color with these settings:

  • Size: 5 px
  • Position: Outside

Hit OK to apply all of the changes, and then right click the layer and choose Convert to Smart Object.

Add a Stroke to c1

Step 11

Duplicate layers in this order:

  • Right click the c1 layer and select Duplicate Layer from the menu As: c2.
  • Right click the c2 layer and select Duplicate Layer from the menu As: c3.
  • Right click the c3 layer and select Duplicate Layer from the menu As: c4.
  • Right click the c4 layer and select Duplicate Layer from the menu As: c5.
  • Right click the c5 layer and select Duplicate Layer from the menu As: c6.
  • Right click the c6 layer and select Duplicate Layer from the menu As: c7.
  • Right click the c7 layer and select Duplicate Layer from the menu As: c8.
  • Right click the c8 layer and select Duplicate Layer from the menu As: c9.
  • Right click the c9 layer and select Duplicate Layer from the menu As: c10.
Duplicate Layers c2 to c10

Step 12

Select layer c2 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 99.5%, and add 1 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c2

Step 13

Select layer c3 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 99%, and add 2 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c3

Step 14

Select layer c4 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 98.5%, and add 3 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c4

Step 15

Select layer c5 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 98%, and add 4 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c5

Step 16

Select layer c6 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 97.5%, and add 5 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c6

Step 17

Select layer c7 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 97%, and add 6 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c7

Step 18

Select layer c8 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 96.5%, and add 7 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c8

Step 19

Select layer c9 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 96%, and add 8 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c9

Step 20

Select layer c10 and go to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the horizontal scale W: 95.5%, and add 9 px to the total value of vertical position Y:. Finally, hit Enter to apply the changes.

Transform Layer c10

Step 21

Select layer c2 and click the layer c10 while holding the Shift key to select these and all the layers in between. Right click on any of these layers and select Group from Layers, fill in Name: c2 and hit OK. Then right click the created group and select Convert to Smart Object from the menu.

Make Group of Layers c2 to c10

Step 22

Select layer b1 and click the layer b5 while holding the Shift key to select these and all layers in between. Right click on any of these layers and select Group from Layers, fill in Name: b1 and hit OK. Then right click the created group and select Convert to Smart Object from the menu.

Make Group of Layers b1 to b5

Step 23

Select layer a1 and transform it by going to menu Edit > Free Transform, uncheck the Maintain aspect ratio button if checked, set the vertical scale H: 99.5% and hit Enter to apply the changes.

Transform Layer a1

Step 24

Right click the a1 layer and select Duplicate Layer from the menu As: a2.

Duplicate Layer a1

Step 25

Select layer c1 and go to menu Layer > Arrange > Bring Forward to move this layer between the b1 and c2 layers.

Arrange Layers

4. Add Layer Styles

Step 1

Select layer a2 and Double-click the layer to apply the following layer style:

Set Fill Opacity in Advanced Blending to 0%.

Set a Fill Opacity

Step 2

Add a Bevel & Emboss with these settings:

  • Style: Stroke Emboss
  • Technique: Smooth
  • Depth: 388%
  • Direction: Up
  • Size: 120 px
  • Uncheck the Use Global Light box
  • Angle: 90°
  • Altitude: 42°
  • Highlight Mode: Color Dodge with a color #ffffff and Opacity: 58%
  • Shadow Mode: Color Burn with a color #010101 and Opacity: 49%
Add a Bevel and Emboss

Step 3

While you are still in Bevel & Emboss tab, create a custom Gloss Contour with these settings:

Add 8 points to the contour curve. To add points, click anywhere on the curve. Now set an Input and an Output for each of these points.

  • Point 1 - Input: 0% Output: 0%
  • Point 2 - Input: 20% Output: 98%
  • Point 3 - Input: 44% Output: 6%
  • Point 4 - Input: 54% Output: 89%
  • Point 5 - Input: 68% Output: 11%
  • Point 6 - Input: 73% Output: 91%
  • Point 7 - Input: 88% Output: 10%
  • Point 8 - Input: 100% Output: 32%
Create a Custom Contour

Step 4

Add a Stroke with these settings:

  • Size: 1 px
  • Position: Inside
  • Blend Mode: Normal
  • Color: #9a8868
Add a Stroke

Step 5

Add an Inner Shadow with these settings:

  • Blend Mode: Linear Dodge (Add) with the color #ffffff
  • Opacity: 45%
  • Uncheck the Use Global Light box
  • Angle: -90°
  • Distance: 3 px
  • Choke: 0%
  • Size: 0 px

Hit OK to apply all changes.

Add an Inner Shadow

Step 6

Select layer a1 and Double-click the layer to apply the following layer style:

Add an Inner Shadow with these settings:

  • Blend Mode: Linear Dodge (Add) with the color #ffffff
  • Opacity: 34%
  • Uncheck the Use Global Light box
  • Angle: 90°
  • Distance: 3 px
  • Choke: 0%
  • Size: 0 px
Add an Inner Shadow

Step 7

Add an Inner Glow with these settings:

  • Blend Mode: Color Dodge
  • Opacity: 22%
  • Pick the color #ffffff
  • Technique: Softer
  • Source: Edge
  • Choke: 0%
  • Size: 3 px
Add an Inner Glow

Step 8

Add a Satin with these settings:

  • Blend Mode: Linear Burn with the color #772000
  • Opacity: 37%
  • Angle: 90°
  • Distance: 2 px
  • Size: 2 px
  • Uncheck the Invert box
Add a Satin

Step 9

Add a Color Overlay with these settings:

  • Blend Mode: Color
  • Pick the color #908770
  • Opacity: 100%
Add a Color Overlay

Step 10

Add a Gradient Overlay with these settings:

  • Blend Mode: Normal
  • Opacity: 100%
  • Style: Linear
  • Angle:
  • Scale: 150%
  • Click on the Gradient and set these color stops:
  • Color stop 1 - Color: #4c4c4c Location: 0%
  • Color stop 2 - Color: #8f8f8f Location: 32%
  • Color stop 3 - Color: #ffffff Location: 44%
  • Color stop 4 - Color: #8f8f8f Location: 53%
  • Color stop 5 - Color: #ffffff Location: 62%
  • Color stop 6 - Color: #8f8f8f Location: 66%
  • Color stop 7 - Color: #616161 Location: 100%
Add a Gradient Overlay

Step 11

Add a Drop Shadow with these settings:

  • Blend Mode: Linear Burn
  • Pick the color #010101
  • Opacity: 10%
  • Distance: 0 px
  • Spread: 50%
  • Size: 2 px

Hit OK to apply all changes.

Add a Drop Shadow

Step 12

Select layer b1 and Double-click the layer to apply the following layer style:

Add a Bevel & Emboss with these settings:

  • Style: Inner Bevel
  • Technique: Smooth
  • Depth: 256%
  • Direction: Up
  • Size: 250 px
  • Uncheck the Use Global Light box
  • Angle: 90°
  • Altitude: 42°
  • Highlight Mode: Color Dodge with the color #ffffff and Opacity: 58%
  • Shadow Mode: Color Burn with the color #010101 and Opacity: 49%
Add a Bevel and Emboss

Step 13

While you are still in Bevel & Emboss tab, create a custom Gloss Contour with these settings:

Add 9 Points to the contour curve and set an Input and an Output for each of these points.

  • Point 1 - Input: 0% Output: 0%
  • Point 2 - Input: 18% Output: 42%
  • Point 3 - Input: 36% Output: 15%
  • Point 4 - Input: 49% Output: 39%
  • Point 5 - Input: 54% Output: 89%
  • Point 6 - Input: 67% Output: 39%
  • Point 7 - Input: 73% Output: 91%
  • Point 8 - Input: 88% Output: 10%
  • Point 9 - Input: 100% Output: 32%

Click the New button and set Name: My Contour to save this custom contour. You will need it later.

Create a Custom Contour

Step 14

Add an Inner Glow with these settings:

  • Blend  Mode: Color Dodge
  • Opacity: 22%
  • Pick the color #ffffff
  • Technique: Softer
  • Source: Edge
  • Choke: 0%
  • Size: 3 px
Add an Inner Glow

Step 15

Add a Color Overlay with these settings:

  • Blend Mode: Normal
  • Pick the color #9a8868
  • Opacity: 100%
Add a Color Overlay

Step 16

Add a Drop Shadow with these settings:

  • Blend Mode: Linear Burn
  • Pick the color #010101
  • Opacity: 10%
  • Distance: 0 px
  • Spread: 50%
  • Size: 2 px

Hit OK to apply all changes.

Add a Drop Shadow

Step 17

Select layer c1 and Double-click the layer to apply the following layer style:

Add a Bevel & Emboss with these settings:

  • Style: Inner Bevel
  • Technique: Smooth
  • Depth: 256%
  • Direction: Up
  • Size: 250 px
  • Uncheck the Use Global Light box
  • Angle: 90°
  • Altitude: 42°
  • Gloss Contour: select previously saved My Contour contour
  • Highlight Mode: Color Dodge with color #ffffff and Opacity: 58%
  • Shadow Mode: Color Burn with color #010101 and Opacity: 49%
Add a Bevel and Emboss

Step 18

Add an Inner Shadow with these settings:

  • Blend Mode: Linear Dodge (Add) with the color #ffffff
  • Opacity: 38%
  • Distance: 0 px
  • Choke: 28%
  • Size: 9 px
Add an Inner Shadow

Step 19

Add an Inner Glow with these settings:

  • Blend Mode: Linear Burn
  • Opacity: 13%
  • Pick the color #000000
  • Technique: Softer
  • Source: Edge
  • Choke: 0%
  • Size: 32 px
  • Range: 45%
Add an Inner Glow

Step 20

Add a Color Overlay with these settings:

  • Blend Mode: Lighten
  • Pick the color #ccc092
  • Opacity: 46%
Add a Color Overlay

Step 21

Add a Gradient Overlay with these settings:

  • Blend Mode: Normal
  • Opacity: 100%
  • Style: Linear
  • Angle: 80°
  • Scale: 100%
  • Click on the Gradient and set these color stops:
  • Color stop 1 - Color: #6c5b48 Location: 0%
  • Color stop 2 - Color: #e2cd96 Location: 28%
  • Color stop 3 - Color: #e2cd96 Location: 45%
  • Color stop 4 - Color: #6c5b48 Location: 63%
  • Color stop 5 - Color: #e2cd96 Location: 85%
  • Color stop 6 - Color: #eed89c Location: 87%
  • Color stop 7 - Color: #e2cd96 Location: 92%
  • Hit the New button to save this gradient into your Presets. You will use this gradient again in the next step.

Hit OK to apply all of the changes.

Add a Gradient Overlay

Step 22

Select layer c2 and Double-click the layer to apply the following layer style:

Add the Gradient Overlay you saved to your Presets in the last step with these settings:

  • Blend Mode: Normal
  • Opacity: 100%
  • Style: Linear
  • Angle: 90°
Add a Gradient Overlay

Step 23

Add a Bevel & Emboss with these settings:

  • Style: Inner Bevel
  • Technique: Chisel Soft
  • Depth: 184%
  • Direction: Up
  • Size: 76 px
  • Soften: 15 px
  • Uncheck the Use Global Light box
  • Angle: 96°
  • Altitude: 42°
  • Highlight Mode: Color Dodge with the color #ffffff and Opacity: 44%
  • Shadow Mode: Linear Burn with the color #010101 and Opacity: 56%
Add a Bevel and Emboss

Step 24

Add a Drop Shadow with these settings:

  • Blend Mode: Linear Burn with a color #010201
  • Opacity: 39%
  • Uncheck the Use Global Light box
  • Angle: 90°
  • Distance: 8 px
  • Spread: 0%
  • Size: 7 px

Hit OK to apply all of the changes.

Add a Drop Shadow

5. Final Touch

You are almost done. You should now see these layers in your Layers panel: a2, a1, b1, c1, c2, GLADIUS and the Background layer. Let's clean it up a little bit.

Step 1

While layer c2 is selected, click the layer a2 while holding the Shift key to select these and all the layers in between. Right click on any of these layers and select Group from Layers, fill in the Name: Cinematic Effect, and hit OK

Make Group of Layers c2 to a2

Step 2

Now it is time to stop recording the action. Click on the Stop button in your Actions panel.

Stop Recording an Action

And this should be your final result.

Final Result

From now on, you can play this action on any text. Select your text layer in the Layers panel, select 3D Gold action in the Actions panel, and hit the Play button.

Action Example

Congratulations! You Are Done

In this tutorial we learned how to record an action for a 3D cinematic text effect.

We started with preparing the assets and some example text, and then we started to record the action. After that, we created and transformed multiple layers. Finally, we added different layer styles and finished our action recording.

This action we just created is a part of 3D Cinematic Text Generator from my GraphicRiver portfolio.

3D Cinematic Text Generator
3D Cinematic Text Generator
https://design.tutsplus.com/tutorials/how-to-create-a-3d-golden-cinematic-text-action-in-adobe-photoshop--cms-26832 101314@feed.stefanherz.com Mon, 05 Feb 2018 12:24:08 GMT
<![CDATA[18 Best New Photoshop Actions & Photo Effects for 2018]]> Short on time? Use Photoshop actions for impressive photo effects!

18 New Photoshop Actions and Photo Effects

Photoshop actions transform your photos with just one click! Save countless hours with fast photo effects for incredible results!

Today we bring you an amazing collection of 18 Photoshop actions and photo effects from Envato Market and Envato Elements. This selection features the latest add-ons to hit the scene for 2018.

From modern duotone effects to beautiful bokeh overlays and so much more, you'll just love the unlimited possibilities. Breathe life into your social media accounts with gorgeous imagery your followers will adore!

Need more help? Get quality advice from our experts at Envato Studio.

Learn More About Photoshop Actions

New to Photoshop? Follow along with our experts in these great lessons:

Aesthete Collection

Create the aesthetics of professional photography with this stunning collection of Photoshop actions. Aesthete includes 140 handcrafted artistic actions to apply various colors and moods to your work. Enjoy beautiful bokeh overlays and so much more!

Aesthete Collection

Confetti Overlay Effect in Photoshop

This magnificent collection of 42 premium overlays will add delight to all your festive holiday photos! Great for beginners and professionals, this pack includes 20 confetti overlays, 10 garland bokeh images, and 12 stardust overlays. You'll love this pack!

Confetti Overlay Effect In Photoshop

Wall Of Lights Photoshop Action

Design a beaming wall of lights! This Photoshop action makes it simple and easy to turn any subject into a rock star. Enjoy 20 color effects with fully editable graphical elements. Also included is a detailed video walk-through and guide.

Wall Of Lights Photoshop Action

Impressionist Photoshop Action

Tested on multiple versions of Photoshop, this action is designed to create a beautiful painting effect inspired by Impressionism. Create your very own works of art with one simple click! Included are 20 total effects for non-destructive results.

Impressionist Photoshop Action

30 Duotone Photoshop Actions

Duotone Photoshop actions apply gorgeous color filters to your photos in minutes! Get stunning results with this incredible pack of 30 high-quality duotone actions. They're super easy to use with completely modifiable layers. Download them today!

30 Duotone Photoshop Actions

Typography Photoshop Actions Bundle

You won't need to do any of the work to get these stunning typography effects! This five-in-one bundle includes high-quality actions with varying typographic compositions. Create awesome text overlays, exploding text, and so much more with one suite!

Typography Photoshop Actions Bundle

Facebook+Instagram Filter

Get unlimited filters for your Facebook and Instagram! This phenomenal pack includes 25 Facebook filters, 20 Instagram filters, and various color effects. Streamline your editing process with these remarkable and professional actions! Try it out today!

FacebookInstagram Filter

Sky Replacer Photoshop Actions

Easily replace the skies in your photos with this essential Photoshop action. Featuring an incredible auto-masking option, this action allows you to easily swap out the sky before tweaking the overall brightness and saturation. Presto! You'll be done before you know it!

Sky Replacer Photoshop Actions

Pen Sketch Photoshop Action

Every traditional artist knows that ink pens are very difficult to work with. But you can achieve that fabulous pen sketch look with this Photoshop Action. Follow the step-by-step video tutorial to watch the process unfold, and then try it out yourself!

Pen Sketch Photoshop Action

Color Fusion Photoshop Actions

Blend abstract shapes with eye-popping color palettes using this Color Fusion action pack. Discover vibrant color schemes to draw in more followers and engagement. Included in this pack are six total files, eight lighting angles, and several color presets.

Color Fusion Photoshop Actions

Geometric Photoshop Action

Turn your photos into epic geometric pop art with this brilliant Photoshop action. A unique take on traditional comic-styled photo effects, this action breaks up your photos into dozens of triangular elements. You'll want this style!

Geometric Photoshop Action

Call of Honor Photoshop Action

Modeled after the famous video game covers for Call of Duty, this Call of Honor action makes for an impressive photo effect. Just open your image to brush over any area with color before applying the action. In seconds, the action will apply explosive shards and dynamic pieces for maximum impact.

Call of Honor Photoshop Action

FilterGrade Light Leaks Bundle

Light leaks are an essential asset for photographers. Simply overlay them over any image for a realistic film look. This pack includes 32 easy light leaks designed specifically for Adobe Photoshop. They're subtle and non-obtrusive and include eight additional film effects.

FilterGrade Light Leaks Bundle

Textum Lettering Photoshop Action

One of the easiest ways to improve your projects is with a Photoshop action. Textum, an unbelievable lettering action, features watercolor and sketch effects that will blow you away. Blend your favorite quotes and images together for a one-of-a-kind look. Try it out today!

Textum Lettering Photoshop Action

Retouching Action Bundle

Retouch away those pesky imperfections with this incredible bundle! This pack includes high-quality Photoshop actions to remove freckles, smooth skin, and so much more. Suitable for Photoshop versions CC and above, just install these actions to try them out now!

Retouching Action Bundle

Tattoo Photoshop Action

Get inked with epic tattoos created from your photos! Suitable for Photoshop versions CS3 and above, this awesome action creates high-end visual results in seconds! Follow the simple video walk-through to watch the effect unfold.

Tattoo Photoshop Action

Detonation Photoshop Action

Add explosive, fiery effects to your photos with this Detonation action. Paint the area where you would like to apply the effect, and then just press play! The action will instantly run for a magnetic, action-packed result. Adjust the intensity for even more variations. Have fun!

Detonation Photoshop Action

Dystopian Photoshop Actions

Lastly, let's take a look at Dystopian, a lightning-fast action bundle. Apply futuristic, neon colors to your night-time scenes with this pack of Photoshop actions. All the effects are pre-rendered so you won't have to test them out one by one. Enjoy this download!

Dystopian Photoshop Actions


This list features exciting resources for the avid designer familiar with Adobe Photoshop. For additional help with your photo effect needs, enlist the skills of a talented professional by choosing one of the amazing designers from Envato Studio.

And with loads of Photoshop Actions available at your fingertips, chances are we've missed a few to add to your personal collection. Be sure to browse Envato Market and Envato Elements for more resources, and let us know your favorites in the comments below!

https://design.tutsplus.com/articles/18-best-new-photoshop-actions-photo-effects-for-2018--cms-30171 100107@feed.stefanherz.com Thu, 11 Jan 2018 09:00:00 GMT
<![CDATA[10 Top Tips for Designing Music Festival Posters]]> With more music events launching each year, the festival market is booming... and fiercely competitive. Thoughtfully designed posters and flyers will make a huge difference to ticket sales, and will help set the mood for the event.

So whether you’re planning to host your own festival event or looking for inspiration to help with a design project, these top design tips will help you create posters that are memorable and beautiful. 

If time is of the essence, you can always adapt an existing poster template to create a unique design. On GraphicRiver and Envato Elements, you'll find plenty of festival templates to get you started.

Read on to get inspired and start creating something special...

indie flyer
Music flyer template by enamdua.

1. Consider Prioritising Typography on Your Poster Layout

It can be difficult to know where to get started with creating a poster design. For festivals, it’s likely that the publicity would be displayed in places where people are quickly viewing them as they pass by, such as metro stations, at bus stops, or on street walls. 

For this reason, it’s best to prioritise one main element on the layout. Whether that’s an image (see Tip 2, below) or text really depends on the type of festival being advertised and which design approach you’d like to take. 

If your festival has an established history, it may be best to make typography the key focus of your design. Blow up the name of the festival to large scale, and choose a typeface to really make the type stand out. Look for display fonts or slab serifs (you can find a wide range of display fonts here), and set the type in uppercase letters and a contrasting font color. 

indie flyer
This indie flyer template could be easily adapted to any style of festival, and would make the most of a well-known festival name.

If your festival is lucky enough to have bagged a few well-known artists, make the most of it. Set the names of the best-known bands towards the top of the design, creating a hierarchy that catches the attention of existing fans. 

2. Illustration or Photo?

Festival posters tend to fall into three main camps of design—with a typographic (see above), illustrative, or photographic focus. 

Certain music genres and styles of event tend to suit either an illustrated or photographic approach. While photos work best for pop or rock events, illustrations and abstract designs make a perfect match for jazz festivals, food festivals, or alternative music events. 

jazz dance
Illustrator Indrė Vaiciukaitė references 1920s illustration styles in this poster for international jazz dance and music festival "HARLEM", based in Lithuania. Image via Behance.

If your festival falls into the more alternative side of the festival spectrum, an illustrated approach, like in these designs for the Jazz in June music festival by Brock Wynn, will inject a dose of creativity and uniqueness into your poster. 

jazz in june
jazz in june
Poster designs for the Jazz in June music festival by Brock Wynn. Image via Behance.

If you’re short on time, look out for vector elements you can adapt for your poster design, like these jazz-themed logo illustrations

jazz illustrations
Music festival logo vectors by danjazzia.

3. Use Color to Create Ambience and Mood

Although most designers begin conceptualising their poster designs in terms of typography or graphics, color is actually the single most transformative element you can apply to your layout. 

More so than perhaps any other poster subject, a festival poster has to entice potential attendees by communicating a vivid sense of atmosphere. Festival-goers attend these events to share a particular vibe and experience an ambience which is unique to that festival. It’s your job as the poster designer to convey what it would feel like to attend the event as evocatively as possible. 

Switching up your color palette is the quickest way to evoke a sense of time and place. Using a sunset-inspired palette of oranges and yellows would make a great fit for summertime, hot-weather events. 

These neon illustrations, when placed against a dark background, evoke a sense of night-time glamor.

Music festival illustrations by danjazzia.

4. Create an Immersive Experience With 3D Layering

As well as using color, you can increase the immersive potential of your poster design by playing with layering, creating a 3D effect that helps the viewer to become completely absorbed in the design. 

As well as building a flat, grid-based hierarchy on your layout, think about which elements will sit in the background and foreground of your design. 

This flyer design is an example of how simple layering can create an absorbing design that helps you to feel you are actually at the event. 

Placing the singer in the background of the image, and allowing the atmospheric smoke to mingle with the headline in the foreground, creates a sense of depth and makes the image feel as if it expands beyond the edges of the page. 

flyer design
Music flyer template by enamdua.

5. Don’t Neglect Texture and Light

Graphics, type, and color might be the building blocks of your poster design, but it’s the extra details that will really make it look incredible. 

Texture overlays are a quick and easy way of adding grungy, vintage-inspired textures to your designs. They have the ability to de-formalise any layout, which makes them perfect for rock or indie festivals. You can track down some grunge overlay textures here

indie rock fest
Indie Rock Fest flyer template by Shelby67.

Adding light effects to your artwork also adds an extra dimension to the poster and fits beautifully with festival-themed designs. Try creating a lit-up effect for typography (look at how to add glow effects or screen filters in your design software), or frame a design with a border of flashbulbs to create a starry, stage-like effect. 

Classic Fever flyer template by isoarts.

6. Look to the Past for Authentic Inspiration

Everybody seems to have a relative who attended the very first Glastonbury festival, and yep, they all say how festivals now just aren’t the same. 

You can channel the authentic, carefree vibes of the original music festivals in your own designs by looking to vintage styles for inspiration. 

Choose retro-style typefaces and muted color palettes, and build papery textures into the background of your design. Look to retro styling ideas, like the exaggerated drop-shadow used in this flyer template, to make a stylish nod to the past.

indie flyer
Retro-inspired flyer template by BlueMonkeyLab

Vintage-inspired festival posters will always look cool, and they suit indie, rock, and folk events particularly well. 

vintage flyer
Vintage flyer template by BlueMonkeyLab.

7. Go Minimal for Electronica and Dance

If you’re designing a poster for an electronic music event or a dance festival, digital-inspired designs always look slick and ultra-contemporary. 

These designs blend club-night style with pared-back layouts, creating designs which are really atmospheric.

Try using Photoshop to create abstract effects in neon shades, like in this flyer template. Set your designs against a dark background for a night-time effect. 

minimal template
Minimal poster template by BlueMonkeyLab.

Even the most minimal of designs can create a strong sense of atmosphere. This ultra-simple design by Luca Izzo contrasts a deep black circle with a clean, white background, creating an intriguing, abstract design.

minimal poster
Sottotempo poster design by Luca Izzo. Image via Behance.

8. Create a Series of Poster Designs

Once you’ve designed your poster, it might be tempting to sit back and relax. But take a tip from some of the most successful festivals, and expand your design into a series. 

Why make the effort? A series of related designs transforms a single poster into an advertising campaign, allowing you to place different designs in different locations, making them more memorable and intriguing for passing viewers. 

Try keeping some of the core elements of your design consistent across the posters, to build a brand look for your series. This music flyer template keeps all elements except color consistent across the series. 

music flyer
Music flyer template by BlueMonkeyLab.

9. Develop a Brand for Your Posters

Beyond creating a series of related posters, you can take a leaf out of the book of established festivals and work on creating a complete brand identity for your festival posters. This will really impress clients who are looking for something special, and is really fun to do. 

For the Helsinki-based Spotlight Festival, design agency Manitou developed a versatile logo design, which could be used across their posters. The logo and colors can be split and used in different ways, creating a complete brand look for the event using just a few simple design elements. 

Logo and poster designs for Spotlight Festival by Manitou. Images via Behance.

When some festivals become established, they often come back to a particular brand look for their posters each year, to help reinforce the event as a brand and attract previous attendees. 

These poster designs for Printemps de Pérouges (« Spring of Pérouges »), a music festival in France, come back to the same formula year after year, as it works so well for the event. The consistent typography, punchy colors, and 3D-style graphics make the designs instantly recognisable. 

spring festival
Spring Festival poster series by Graphéine. Image via grapheine.com.

10. Go a Step Further and Create a Complete Brand Identity for the Festival

Festivals are no longer the casual affairs they were in eras past. Now, festival organisers can reach huge audiences over social media and TV, and the financial potential of these events has skyrocketed. 

As a result, many festivals are looking to go a step further with their branding, and are looking to develop complete brand identities which go beyond the posters. 

Once you’ve created core elements for your posters, such as a logo-like headline, graphics, and a color palette, you can lift some of these and adapt them to use across other festival media, like merchandise, social media images and animations, tickets, signage, and stationery. 

This complete brand identity for Move Phnom Penh, a music festival in Cambodia, by Sonich Touch, shows how you can adapt simple design elements for a wide range of media. 

move festival
Move Phnom Penh festival brand identity by Sonich Touch. Image via Behance. Check out more of Sonich Touch's work on Instagram here.


Music festivals are really fun events to design posters for. Most festival organisers will be looking for something exceptionally creative and unique, so dive in and start creating something fantastic!

If you're short on time, it can be easier and quicker to adapt an existing poster or flyer template, tweaking fonts and colors to create a unique design. You can find a huge range of easy-to-edit templates over on GraphicRiver and Envato Elements. 

indie flyer
Indie flyer template by enamdua on GraphicRiver.
https://design.tutsplus.com/articles/10-top-tips-for-designing-music-festival-posters--cms-30102 100110@feed.stefanherz.com Wed, 10 Jan 2018 10:00:00 GMT
<![CDATA[29 Delicious Menu Templates for Restaurants & Cafes]]> Hungry for more amazing templates? Check out this exciting collection of delicious menus perfect for any restaurant or cafe business.

29 Delicious Restaurant & Cafe Menus

Going out to eat is always a treat! And you can make your customers feel like royalty by displaying your menu items on delicious, professional designs.

Dive into this collection of 28 premium templates curated from Envato Elements. Get all the templates you need for one affordable monthly fee!

Use these menus for your restaurant business, or enlist the help of a talented professional from Envato Studio for all your creative needs.

Seafood Menu Template

Are you drooling yet? This delicious template will have you smelling the fresh scent of lobster and warm butter sitting on your plate. Created for both Photoshop and Illustrator lovers, this template features a high-quality design at 300 dpi, with free fonts also included.

Seafood Menu Template

Newspaper Menu

Extra! Extra! Read all about it! This clever menu features a wonderful newspaper theme. The front cover highlights your delicious dishes, with plenty of room on the back for official menu items. And with fully editable text, images, and colors, you'll be able to customize it fast!

Newspaper Menu

Burger Factory Menu

Next up is this mouthwatering burger menu design. This template includes two Photoshop files with 100% vector elements and well-organized layers. Get the best of both worlds with vintage-inspired graphic elements on a modern menu template.

Burger Factory Menu

Brunch Menu Template

Did someone say brunch? Serve your customers a warm cup of Joe with this brilliant brunch and cafe menu. This design features a modern take on retro chalkboard illustrations with plenty of room for your menu items. Enjoy two color variations and completely free fonts in this awesome download.

Brunch Menu Template

Steak House Menu

Create a sizzling menu that matches your delicious steaks! This incredible template features an elegant and modern design that is 100% print ready. Showcase your menu in its best light with a minimalist design that is sure to impress customers.

Steak House Menu

Summer Drinks Menu

Sit back and relax with a gorgeous menu that will make you feel as if you're on vacation! This exciting template features a beautiful island vibe, perfect for any beach restaurant, bar, or club. It also contains two Photoshop files that are print ready, with bleed lines and all!

Summer Drinks Menu

Fine Dining Restaurant - Menu Template

Enjoy the finer things in life with this sleek and sophisticated restaurant menu. This menu features a 100% customizable design with two elegant fonts to choose from. Compatible with Photoshop versions over CS3, this template can be customized fast to make it your own!

Fine Dining Restaurant - Menu Template

Modern Restaurant Food Menu

Download a modern menu for a clean and sophisticated feel. This premium menu template features one page cover with two back-page designs. A print-ready design, this template also includes premade bleed lines for your convenience. Download it today!

Modern Restaurant Food Menu

Mexican Style Food Menu Template

Reflect the style of your restaurant with a menu template that highlights that theme. Take this Mexican-style template, for instance. It's created with vibrant colors and a fun Spanish vibe, and you'll get access to print-ready files and so much more!

Mexican Style Food Menu Template

Classy Food Menu 6 Template

Your menu should look as sleek and sophisticated as your business. And with this classy food menu, you'll have just that! Enjoy six A4 pages with front and back covers and alternative trifold styles. It also includes easily customizable layers so you can create infinite color variations to reflect your amazing brand.

Classy Food Menu 6 Template

Pizza Factory Menu

Get a slice of delicious design with this clean, modern menu. Perfect for pizza businesses with that extra retro flair, this brilliant template features fully editable Photoshop files and so much more. Download it today to get access to more unique options.

Pizza Factory Menu

Restaurant/Fast Food - Menu Template

Become the next fast food giant with this delicious menu template. Great for featuring pictures of your favorite items, this template comes complete with fully editable files, organized layers, and even some helpful documentation for further instruction.

Restaurant Fast Food - Menu Template

Mexican Food Menu

Tackle your dreams of owning a brand new restaurant with this modern menu template. This template features a fun chalkboard-inspired design available in several industry formats. Also included is a convenient help file to walk you through the editing process.

Mexican Food Menu

Pizza Menu Trifold

Who can say "no" to pizza? Get your customers to praise your flaky crusts with this pizza-inspired trifold design. This template includes well-organized layers you can easily update with your own menu items. Just switch out the photos for pictures of your own food to enjoy this template fast!

Pizza Menu Trifold

Restaurant Menu Template

Less is more. And some of the best food comes from small menus. Try out this simple template, for instance. Available in A4 size, this template is ready to print! It's great for those familiar with either Adobe Photoshop or Illustrator, and you can easily modify any text and add even more fancy elements to customize your design.

Restaurant Menu Template

Burger Menu Template

A classic burger menu, this download features print ready files at a resolution of 300 dpi. Choose from fun free fonts like Cardenio Modern, Wicked Grit, and Great Vibes to complete your menu. Or edit the text yourself using the fully editable text layers.

Burger Menu Template

Food Menu Template

Inspired by retro chalkboard illustrations, this template features a beautiful modern design we're sure you'll love! Download this file today to get access to several print formats available at 300 dpi for the best resolution possible.

Food Menu Template

Elegant Food Menu 3 Illustrator Template

Need a menu fast? Then check out this elegant Illustrator template. This template includes a stunning black and yellow color palette, with print-ready files available in different sizes. Download this file today to get the bonus logo also included!

Elegant Food Menu 3 Illustrator Template

Coffee Menu Template

Wouldn't you like to take a refreshing sip of a fresh warm brew from this cool menu? Boost sales with an exquisite chalkboard design inspired by retro illustrations. Get the most out of your menu with fully editable layers, free fonts, and bonus coffee doodles.

Coffee Menu Template

The Ristorante Food Menu Illustrator Template

Or try out a classic menu style like this one! This amazing download is jam-packed with wonderful additions. From a full eight-page menu to table tents and more, you'll definitely want to add this cool template to the list. Just open Adobe Illustrator to get started right away!

The Ristorante Food Menu Illustrator Template

Trifold Minimalist Menu

If simple designs are more your style then check out this sleek and sophisticated trifold menu. This template includes two different menu sizes available in both Illustrator and Photoshop formats. Take advantage of the easy-to-use Smart Objects to update your photos in seconds!

Trifold Minimalist Menu

Ice Cream Menu Template

Help your customers seek relief from the sweltering hot sun with this awesome ice cream menu. Designed with vibrant colors and a unique vintage feel, this template features all free fonts, high-resolution graphics, and print-ready formats available for both Photoshop and Illustrator.

Ice Cream Menu Template

Christmas Menu Restaurant Template

Feeling festive? Then celebrate the holidays at your restaurant with a special Christmas-inspired theme. Download this file to get access to this colorful menu complete with high-resolution graphics, free fonts, and easy-to-follow guidelines.

Christmas Menu Restaurant Template

Rustic Sailor Food Menu

Ever wanted your own restaurant by the ocean? Make that dream happen with this rustic template. This template features a clean, nautical-inspired design with six full pages ready for your menu list. So sail onward to success with this stunning, modern menu!

Rustic Sailor Food Menu

Juice Bar Menu Template

Health equates to mental and physical wealth. And you can inspire your customers to eat better with this vibrant juice bar menu. This template features several convenient formats perfect for those familiar with Adobe Photoshop or Illustrator. Just update your menu with your favorite items to enjoy this template right away!

Juice Bar Menu Template

Japanese Bistro Menu

Open your next Japanese bistro with this inspiring menu design! Created with Adobe Photoshop, this template includes two Photoshop files, fully editable layers, and smart objects for your convenience. Feel free to take a glance at the handy help file for more instruction.

Japanese Bistro Menu

Classy Food Menu Illustrator Template

You can never go wrong with this classic food menu. Display your menu items with plenty of room for descriptions and prices, and even include a nifty section for chef recommendations. Included in this download are A3 and A4 menus compatible with Adobe InDesign.

Classy Food Menu Illustrator Template

Trifold Restaurant Menu Template

Have a large menu? Then try out this brilliant trifold template. This download comes complete with fully layered Photoshop files and completely editable text and graphics. A stunning template optimized for printing, it also includes free fonts you can easily update.

Trifold Restaurant Menu Template

Elegant Food Menu 5 Illustrator Template

Last but not least, we present you with this elegant layout. A minimalist design with a rustic, textured feel, this sophisticated template includes a seven-page menu, table tents, and so much more! Add your own text easily to personalize this template with information about your restaurant.

Elegant Food Menu 5 Illustrator Template


This list features exciting resources for the avid designer familiar with Adobe Illustrator, Photoshop, and InDesign. For additional help with all your menu needs, enlist the skills of a talented professional by choosing one of the amazing designers from Envato Studio.

And with loads of restaurant and cafe menus available at your fingertips, chances are we've missed a few to add to your personal collection. Be sure to browse Envato Elements for more resources, and let us know your favorites in the comments below!

https://design.tutsplus.com/articles/28-delicious-menu-templates-for-restaurants-cafes--cms-28716 95018@feed.stefanherz.com Wed, 07 Jun 2017 09:29:30 GMT
<![CDATA[Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen]]>

Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.


Die HTML-Struktur besteht in unserem Beispiel lediglich aus einem leeren <nav>-Element.


Scroll-Richtung mit jQuery abfragen

Zunächst prüfen wir mit Hilfe von jQuery in welche Richtung der Anwender scrolled. Wenn er nach unten scrolled, wird dem <body> die Klasse down hinzugefügt. Wenn es nach oben geht wird die Klasse entfernt.

var lastScrollTop = 0;
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
    if (!$('body').hasClass('down')) {
   } else {

   lastScrollTop = st;

   if ($(this).scrollTop() <= 0) {

Verstecken der Navigation mit CSS

Der CSS-Code ist ebenfalls recht übersichtlich. Die Navigation wird eingefärbt, oben im Browserfenster fixiert und über die volle Breite ausgedehnt. Zusätzlich erhält sie eine feste Höhe und eine Transition, damit sie später animiert aus dem Viewport fährt, sobald per JavaScript die Klasse hinzugefügt wird.

Sobald die Klasse down vorhanden ist, wird mit der CSS-Eigenschaft transform die Navigation um Ihre Höhe nach oben aus dem Viewport geschoben.

nav {
   position: fixed;
   transition: transform .25s .1s ease-in-out;

.down nav {
   transform: translate3d(0, -100px, 0); // um 100px nach oben verschieben

Beispiel anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

https://blog.kulturbanause.de/2017/05/navigation-runterscrollen-verstecken-hochscrollen-anzeigen/ 94440@feed.stefanherz.com Mon, 08 May 2017 08:20:49 GMT
<![CDATA[5 Apps to Increase Your Design Team’s Productivity in 2017]]>

If you’re like most web design professionals, you spend a portion of your time looking for ways to do things faster and better. You’re quite aware that increases in productivity has a way of translating into increased income. However, the tools you use to influence your productivity can either increase it, or place constraints on it.

Tips & Tools to Improve Your Design Team’s Productivity

Tips & Tools to Improve Your Design Team’s Productivity

A productive team is also usually well-managed. The two keywords you see here are "productive" and "managed" so…Read more

Some top-tier productivity apps are presented here; mostly in slightly different ways. Some speed up prototyping, and can boost your entire design process, while others automate project management tasks, and by doing so, they free up time you can use for design work.

Similarly, time tracking apps help freelancers and small businesses to work more efficiently, as well the apps that encourage active collaboration can boost the productivity of an entire team.

Active Collab

If you need a low-maintenance project management tool that’s easy to learn and use, you should try out Active Collab. This productivity app does not have to be constantly hand-fed with data to keep the status of your projects up to date. With its numerous integrations, it accepts data from different sources and tools that you and your team use.

active collab

Active Collab has a very flexible project overview that allows you to lay your projects out on a Gantt-like timeline, and then organizes your tasks like cards on a Kanban board. This software solution also lets you centralize all your team collaboration in one place, making it easier for everyone to stay up-to-date.

Team members and other project stakeholders can be kept up to speed on project status and happenings. Clients can be brought into the loop as well. Moreover, you can restrict client access, as well as hide information you don’t want them to see.

Active Collab is worth looking into, and you can try free for 30 days!


With Wake, you can seamlessly share your design process with your team. Keep a pulse on what your colleagues are creating within one, beautiful app. You can share sketches, screenshots, or other assets with team members or clients and get feedback on the spot.


If you have designs in your notebook or on your whiteboard you want to publish, Wake’s iOS app lets you snap a photo and send it off in seconds. The app allows you to stay up-to-date on project happenings and provide quick feedback from anywhere.

This ability to share work without interrupting workflow makes the entire design process seamless for your entire team, even those outside of design. With Wake, work can be shared publicly, so everyone knows what everyone is working on; or shared privately with selected individuals or stakeholders.

To see how wake can streamline your design team’s process, you can sign up for a 30-day free trial.


The initial step a web designer often takes when building an awesome product is to build an awesome prototype. That’s exactly what the Proto.io app does. It makes it possible for you to create a prototype that’s hard to distinguish from the real deal; and without having to write a single line of code.


You can use Proto.io’s iOS or Android components to design your prototype within the “Proto.io editor”, or import your files directly from Sketch or Photoshop. It makes it easy to take your static designs, and by creating beautiful interactions, popular gestures, and stunning animations, turn them into interactive prototypes.

You can add any touch or mouse-driven event to your prototypes as well, and it’s ready-made Interaction design patterns can be applied to your prototypes easily and effortlessly. Preview the completed prototype on either your browser or a real device, and share the real experience you’ve created with stakeholders.

You can try out the free version of Proto.io for 15 days.


MeisterTask can be your go-to project management tool, as it allows you to adjust its flexible project boards to fit your workflows.


MeisterTask can track as many team members’ tasks as you want, and thanks to its customizable dashboard, you can see what has been happening in your absence, get a quick check on open tasks, and decide the priorities for the rest of the day and on.


It is a time tracking app highly suited for freelancers and small businesses. The time Minterapp tracks on a project, can automatically be converted to custom invoices, which can then be delivered to clients online.


Estimates based on projected task or project times to completion, can also be delivered online. Minterapp perfectly ties into Mailchimp, Basecamp, and PayPal, and can accommodate an unlimited number of users.


Any small business that is large enough to have a sales department will appreciate Salesmate’s sales management features. Salesmate is an all-in-one sales management, process automation, and business acceleration software solution.


This productivity app not only provides a real-time picture of a business’s sales funnel, but tracks and evaluates the sales team’s performance as well.

Tips for better productivity

1. Plan your day

Don’t be afraid to plan your day’s activities in detail, for fear of placing yourself in a straightjacket. After all, it’s your plan, and failing to work to a plan is an excellent way to fail!

By looking ahead, you should easily be able to create a plan that helps you avoid time crunches, or getting snowed under. If you find yourself looking for a quick solution, without first understanding the problem, it’s a good sign that you need to be working to a plan.

Plan the next day’s activities at the end of your work day. Check your plan over the next morning. If it still makes sense – follow it.

2. Pick up keyboard shortcuts

Useful keyboard shortcuts may only save you a few seconds, but they quickly add up to minutes saved, and even hours saved on some projects. You’ll quickly discover that “Ctrl + something” is much faster than searching for a series of icons to click on. Taking the time to learn these shortcuts will be time well spent, and it will make you a more productive person.

3. Standardize naming conventions and tag assignments

Standardized naming conventions can save you a ton of time, and will also save time for anyone you collaborate with or submit your design files to. You’ll find it much easier to stay organized, and if you tag your files, you’ll realize savings in computer search time.

4. Take advantage of what time tracking can teach you

Start tracking the time you spend on various tasks, and you quickly begin to find out more about yourself and your work habits. Time tracking will help you uncover unnecessary or wasteful efforts, and can highlight any time you spend procrastinating. It will also make you want to improve and streamline your work habits.

5. Customize your workspace

While a productivity tool or app can have an immediate impact on your work performance, give some thought as to whether you might be able to customize your workspace to increase productivity even more. Preset workspaces in Adobe applications, for example, are typically designed to make things easier for you. It is also often possible to customized them to make things speedier for your particular workflow.

5 Time-Tracking Tools for Better Productivity – Best Of

5 Time-Tracking Tools for Better Productivity – Best Of

Time is money. Especially for freelancers, time is the element that determines how much you can get done…Read more

http://www.hongkiat.com/blog/design-team-productivity-apps/ 91700@feed.stefanherz.com Thu, 23 Mar 2017 12:01:28 GMT
<![CDATA[Erstellen und Exportieren von iCal-Dateien (.ics) mit Hilfe von PHP]]>

Termin- oder Veranstaltungskalender sind schon lange keine Seltenheit mehr im Internet. Mit Hilfe von PHP können diese Termindaten auch als iCal-Datei (*.ics) auf Websites zum Download angeboten werden, ohne dass man von Hand eine solche Datei erstellen muss. Die Benutzer der Website können sich somit komfortabel diese Termine in ihren eigenen elektronischen Kalender importieren. In diesem Beitrag findet ihr das passende PHP-Snippet, um auch euren Benutzern ein iCal-Export zur Verfügung zu stellen.

Daten auslesen und in Variablen speichern

Um eure iCal-Datei mit den richtigen Daten zu füllen, erstellt ihr als erstes einige Variablen mit euren Daten. Diese werden später an das Skript übergeben. In diesem Beispiel handelt es sich um folgende Angaben:

  • Start des Termins (Datum und Zeitpunkt)
  • Ende des Termins (Datum und Zeitpunkt)
  • Erstellung des Termins (Datum und Zeitpunkt)
  • Titel der Veranstaltung
  • Veranstaltungsort
  • Beschreibung der Veranstaltung
  • Link zur Veranstaltung
  • Dateiname der iCal-Datei

Hierbei ist es wichtig, dass die Datums- und Zeitangaben im Format »YYYYMMDDTHHMMSS« vorliegt. Angaben wie der Titel, die Beschreibung und der Veranstaltungsort werden mit Hilfe von PHP so formatiert, dass sie später auch korrekt angezeigt werden. Der Dateiname sollte webfreundlich, d. h. ohne Sonderzeichen oder Leerzeichen angegeben werden.

$kb_start = '20161028T130000';
$kb_end = '20161028T143000';
$kb_current_time = '20161026T130000';
$kb_title = html_entity_decode('Titel des Termins', ENT_COMPAT, 'UTF-8');
$kb_location = preg_replace('/([\,;])/','\\\$1','Location');
$kb_description = html_entity_decode('Beschreibung zum Termin', ENT_COMPAT, 'UTF-8');
$kb_url = 'https://kulturbanause.de';
$kb_file_name = 'name-der-datei';

iCal-Datei erstellen

Das Erstellen der iCal-Datei funktioniert in drei Schritten. Als erstes wird die Datei mitels fopen() geöffnet, anschließend mittels fwrite() der Inhalt eingefügt und zuletzt die Datei mittels fclose() geschlossen. Das alles passiert, sobald jemand die Seite aufruft, auf der das folgende Code-Snippet eingebunden ist. Sobald ein zweiter Seitenaufruf stattfindet, wird diese Datei aktualisiert. Der Pfad eures Verzeichnisses muss im Code an die Stelle des Wortes »VERZEICHNIS« geschrieben werden. Sollte aus irgendeinem Grund (z. B. falsche Schreibrechte eures Verzeichnisses) die Datei nicht geöffnet werden können, bricht das Script ab und es erscheint der Satz »Datei kann nicht gespeichert werden!«.

$kb_ical = fopen('VERZEICHNIS/'.$kb_file_name.'.ics', 'w') or die('Datei kann nicht gespeichert werden!');

$kb_ics_content = '
fwrite($kb_ical, $kb_ics_content);


Datei zum Download bereitstellen

Um die Datei nun zum Download anzubieten, könnt ihr einen ganz gewöhnlichen Link erstellen. Gebt hier ebenfalls den von euch gewählten Verzeichnispfad und den von euch gewählten Dateinamen an.

<a href="http://blog.kulturbanause.de/./VERZEICHNIS/<?php echo $kb_file_name; ?>.ics" title="»<?php echo $kb_title; ?>« exportieren">Termin in Kalender speichern</a>

Anpassung der .htaccess-Datei

Sollte euer Browser die Datei anzeigen anstatt den Download zu starten, müsst ihr gegebenenfalls eure .htaccess-Datei anpassen. Um sicher zu stellen, dass die von euch erstellte Datei als Download-Datei erkannt wird und nicht direkt im Browser geöffnet wird, schreibt folgende Zeile in eure .htaccess-Datei. Erstellt allerdings vorher unbedingt ein Backup der alten .htaccess, da Fehler in dieser Datei die Website beschädigen können.

AddType text/calendar .ics


Das folgende Live-Beispiel zeigt die o.g. Funktionalität. Per Klick ladet ihr eine *.ics-Datei herunter, die ein Event des heutigen Tages beinhaltet.

Beispiel anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

https://blog.kulturbanause.de/2016/11/erstellen-und-exportieren-von-ical-dateien-ics-mit-hilfe-von-php/ 85311@feed.stefanherz.com Mon, 21 Nov 2016 08:30:06 GMT
<![CDATA[Photoshop in 60 Seconds: How to Create a Scatter Photo Effect]]> Final product image
What You'll Be Creating

Welcome to our Photoshop in 60 Seconds series, in which you can learn a Photoshop skill, feature, or technique in just a minute!

Scatter Photo Effect

You can create an explosive scatter effect for your favorite photos in Adobe Photoshop. The key to this effect is using a combination of Layer Masks, Custom Brushes and more to uniquely reveal a hidden duplicate of your subject. Take your time with this look in order to build a dynamic scene full of movement and power.

To learn how to create this effect, check out this quick video below. 

A Bit More Detail

Learn more about Adobe Photoshop on Envato Tuts+:

Try out this look with one of these Scatter Brushes from Envato Market. And download this free Dancer stock via Pixabay.

60 Seconds?!

This is part of a series of quick video tutorials on Envato Tuts+ in which we introduce a range of subjects, all in 60 seconds—just enough to whet your appetite. Let us know in the comments what you thought of this video and what else you'd like to see explained in 60 seconds!

http://design.tutsplus.com/articles/photoshop-in-60-seconds-create-a-scatter-photo-effect--cms-26927 81268@feed.stefanherz.com Fri, 12 Aug 2016 11:48:29 GMT
<![CDATA[20 Magazine Templates With Creative Print Layout Designs]]> In this era of inbound marketing, one could be forgiven for thinking that print is dead. After all, landing pages, social media, emails and websites are a core part of any successful small business's marketing game plan.

Believe it or not, there’s still impact and influence in traditional, old-school marketing. Print is alive and well, with the Content Marketing Institute declaring that print can complement your digital-marketing strategy.

Small businesses, creatives and agencies can pleasantly surprise their leads by presenting them with longer content that they can turn over in their hands and take their time with. Certainly, this is a great alternative to today’s obsession with 140-character limits and multiple Facebook updates each day.

Those looking for a marketing format that their leads can really sink their teeth into should check out our best Magazine Templates on Envato Market.

Best Magazine Template Designs
Best Selling Magazine Templates - available for sale on Envato Market (Graphic River)

You can use them for your next marketing campaign or to start your own publication. Then distribute them through print or digitally as PDFs. They are professionally designed and setup for quick customization to your project needs.

Unlimited Magazine Templates on Envato Elements

If you need a variety of different options to choose from, you can find some fantastic magazine templates on Envato Elements—and you can download as many as you want for a single monthly fee.

Magazine Templates on Envato Elements

For example, check out this professional and clean InDesign magazine template. It's ready to use and includes 25 pages for articles, interviews, etc.

Magazine template on Envato Elements

On the other hand, if you're just looking for a single magazine template, check out the fantastic selection below from Envato Market.

Creative Magazine Templates

Here are our 20 best-selling, recently released, InDesign magazine templates with creative layout designs:

1. Pure Magazine - Creative InDesign Template

Taking a minimalist approach to print design, this magazine template is ideal for any small business that favors a bare-bones approach to its print marketing. With a lot of room for feature articles, interviews, Q&As and striking images, this template can become the centerpiece of your print-marketing strategy. 

It comes with InDesign INDD graphic files and features Montserrat, Varela Round and Bebas Neue font styles. Overall, it’s 44 pages of canvas for your content-marketing or creative print magazine vision.

Pure Magazine - InDesign Template

2. 50 Pages Creative Magazine Layout

Great value abounds in this magazine template that comes with 50 unique pages overall. That’s enough capacity to create a high-quality magazine to deliver to your leads and clients, complete with stories, features, interviews and more! 

With single and dual-column alignment, the template also showcases a card-based layout for easy reading and legibility. It comes with three, premade cover templates and is print-ready for immediate use.

Creative Magazine Layout Design

3. Minimal Modern Clean Magazine Design

Readability is very important for any magazine template, and this modern and clean magazine doesn’t disappoint. Featuring a lot of strategically placed white space to guide readers’ eyes to your most vital content, it offers a dual-column design that brings your marketing message across with no uncertainty. Its 28 pages are very easy to customize to your brand. It comes in both Letter and A4 sizes in InDesign.

Minimal Modern Clean Magazine Design

4. Magazine Template Bundle - InDesign Layout V3

Multipurpose design use is valued by everyone from creatives and agencies to small businesses, and this InDesign magazine template doesn’t disappoint. Ideal for any industry, this template features a clean, cutting-edge and crisp layout that brings your business’ marketing message straight into the hands of your leads and customers. With full customization and Adobe InDesign CS6, CS5 and CS4 formats, it lets you tell your brand story with total control.

Magazine Template Bundle - InDesign Layout V3

5. Simplify - Clean Magazine Layouts Vol. 2

When it comes to print marketing, the simplest and most minimalistic is sometimes the most effective. This magazine template epitomizes this design approach to a tee. 

It features generous white space and copious room for fonts and images to complement each other on any page. It comes with InDesign INDD files and a 24-page layout. It’s great for agencies and small businesses of all shapes and sizes.

Simple Clean Magazine Layouts INDD

6. A4 InDesign Letter Magazine Template

Multipurpose magazine templates like this one are ideal for small businesses of all kinds. Take control of your marketing message and impress your client base by giving them a print magazine in their hands, which allows them to stay longer with your marketing message. 

Print-ready and available in A4 and Letter sizes, this fantastic template comes with 40 pages overall. Each part of the layout designs can be customized to your brand message.

A4 InDesign Letter Magazine Template

7. Multipurpose Magazine Template (INDD)

Featuring attractive-to-the-eye grid and column layouts, this magazine template is well-suited for agencies, small businesses and creatives looking to deliver a print-based marketing message into their customers’ hands. 

Its neat organization and clean design ensures that your can put high-quality information on paper. The template comes with InDesign INDD files, a fully customizable layout, and 25 unique pages.

Multipurpose Magazine Template INDD

8. Vibrant Magazine Template Design

No matter what creative agency or small business you run, you can make excellent use of this fresh and multipurpose magazine template. It features various free fonts, automatic page numbering, and a column-based layout for easy absorption of your brand storytelling. 

Energetic magazine layout templates like this allow you to put something more substantial in your clients’ hands. Print-ready with full-bleed, it also offers 30 unique page designs.

Vibrant Magazine Template Design

9. Clean InDesign Magazine Template

Small business owners can’t go wrong with this clean column-based and paragraph-styled template that uses print marketing to maximum value. Your readers will thoroughly enjoy the generous word spacing; easy-to-read, chunked paragraphs; and beautiful typeface. 

Fully customizable to your brand’s marketing message, this magazine template is ideal for agencies that want to show off a clean and minimalistic brand story. Print-ready, it features 30 pages and 12 InDesign CS4 and CS6 files to work with.

Clean InDesign Magazine Template

10. Cool Retro Vintage Magazine Design

This attractive throwback to the magazine layout templates of a bygone era can hook and inspire your leads. Featuring a vintage look that evokes memories of a 1960s print magazine, this unique template is also clean and simply designed, so your marketing message can be clearly conveyed. With 33 pages and different image-display options, it's print-ready and fully customizable for your creative or agency purposes.

Cool Retro Vintage InDesign Magazine

11. The Relevant Magazine - Elegant Layout Design

Perfect for creatives and agencies looking to show off their unique approach, this template is characterized by a stylish layout. Adorned with graphic-design touches galore, this magazine template demonstrates how effective a layout can be if it combines simplicity with creativity. You’ll be thankful for its easy customization and multipurpose applications! It’s ready to go with Adobe InDesign CS4, CS5, CS5.5 and CS6 compatibility.

The Magazine Elegant Layout Design

12. 40 Pages Minimal Design Magazine INDD

Superb value and clean, easy-to-read minimalism combine in this amazing magazine template. With InDesign INDD graphics files included, it’s ready to be used as a complement to any well-structured content-marketing strategy. 

Put a juicy, long-form marketing message into your customers’ hands, as this format is perfect for in-depth stories, interviews and feature articles. Fully customizable, the template features Raleway, Bebas Neue and Tall Films fonts.

40 Pages Minimal Design Magazine INDD

13. Magazine Template - InDesign 40 Page Layout V7

A great value among our magazine templates, this design features rich and creative content that’s going to make an impression on your reading audience. With readable typeface, a clean and well-organized grid layout, and attention-grabbing headlines, this magazine can make your marketing message come to life in your prospects’ hands. Thanks to Adobe InDesign graphics files, it’s a cinch to edit and customize to your needs!

Magazine Template - InDesign 40 Page Layout V7

14. InDesign A4 Print Magazine Template 2

55 pages and four, unique covers combine to create a magazine template that’s bound to put rich, high-quality content into the hands of your leads and customers. 

This template provides your readers with a well-designed, chunked paragraph layout that makes it easy for them to understand your brand story. It comes in A4 size and features Salome Regular, Roboto and Cheddar Jack font styles.

InDesign A4 Print Magazine Template 2

15. Fashionable InDesign Magazine Template

Print-ready and bursting with style, this multipurpose magazine template can help small businesses complement their content-marketing efforts with ease. Ideal for use in any industry’s promotional materials, it features 30 pages that are all fully customizable. This puts you in total control of your brand story and marketing message. The template also features free fonts, paragraph styles and an A4 size.

Fashionable InDesign Magazine Template

16. Cultura Minimal Magazine Template

Words that best describe this magazine template are “stylish,” “elegant” and “creative.” Treat your audience to a 38-page read that can efficiently support your overall marketing endeavors. 

Whether it’s to sell your brand story or promote new products, putting a beautifully designed magazine into your customers’ hands is a recipe for success. This template comes with five different fonts, easy customization, a minimalistic design, and is print-ready out of the box.

Cultura Minimal Magazine Template

17. Flexible Magazine Template - Creative Layouts

Whatever industry you’re in, this template will serve your overall marketing needs very nicely. Not all magazine layout templates are as flexible and multipurpose as this one is, which makes it a stunning complement to any well-thought out content-marketing strategy! 

Small business owners will have an easy time using its column-based layout to design the most readable magazine for their clients. With full customization features, this template is print-ready and comes with 28 pages.

Flexible Magazine Template Creative Layouts

18. Simple, Creative Magazine Template Design

Few magazine templates use minimalism as effectively and decisively as this gorgeous design. Featuring a center-alignment format and plenty of generous room for high-quality, professional images, this template is easy to pick up and read. 

Your customers will enjoy its legibility, as they read through your marketing messages with clarity. Boasting 26 InDesign pages in total.

Creative Magazine Template Design

19. Modern Magazine - Multiple Print Design Layouts

Clear paragraph styles, clean layouts, and copious amounts of white space make for an effective magazine template. This design is characterized by a forward-looking modernity that makes its content a pleasure to read. 

Give your leads and prospects some heavy-duty content that they can dig into. This template is ideal for creatives and small businesses. It is print-ready and compatible with InDesign CS4 and up.

modern magazine template designs

20. Stylish Multipurpose Magazine Vol. 3

Magazine templates like this brochure design are too good to pass up. Creatives, agencies and small businesses can breathe easy knowing that its multipurpose design makes it an ideal complement to any industry’s content-marketing tactics. 

All you have to do is just drop in your text and images, and it’s all print-ready! It’s 28 pages long and comes in both A4 and Letter sizes in InDesign format.

Stylish Multipurpose Magazine Vol 3

How to Design a Print Magazine

Anyone who seriously believes that print is dead is simply not paying attention! In an era of digital marketing and short attentions spans, print is a breath of fresh air and a pleasant surprise that your audience will appreciate. They’ll appreciate longer-form content that’s palpable and gives them more in-depth info than a simple landing page or tweet.

Even though our deep selection of Magazine Templates on Envato Market will let you effortlessly complement your inbound marketing with print advertising, you still need to know how to design a readable magazine. Here are some pointers:

  1. Take care of typography design. You’ll want to pay close attention to both the text size and how your typography is set. Magazines aimed at a younger demographic can get away with smaller typefaces, yet a print magazine generally tends to offer better legibility and readability when you’re using serif fonts.
  2. Make your content readable and legible. This is a biggie! Without presenting your magazine’s articles and other content clearly, you risk losing readers and your audience because they’ll get frustrated with a format that’s illegible. To make it easy to read, design your magazine text to be frequently broken up by attractive and high-quality images. At the same time, ensure that your text is chunked into shorter paragraphs.
  3. Do a final check before printing. Before you’re ready to print your magazine template, ensure that it’s totally perfect. This means going over everything—from the text, to the images, to the cover—with a fine-toothed comb. There’s nothing worse than printing your magazine, only to discover a glaring error that needs to be corrected.

Here are more design tips to make an impact with your magazine: 

Get Yourself a Magazine Template!

Don’t let the chance to buy magazine templates pass you by! They will help your content-marketing strategy by giving your audience richer and more in-depth content they can really sink their teeth into. Browse through our huge selection of creative Magazine Template Designs today, and find just the right one for your business.

https://design.tutsplus.com/articles/20-magazine-templates-with-creative-print-layout-designs--cms-26455 74408@feed.stefanherz.com Thu, 05 May 2016 13:55:31 GMT
<![CDATA[Faszinierende Photoshop-Plugins für den großen und kleinen Preis – Teil 2]]> Plugins beschleunigen Abläufe in Photoshop und vereinfachen komplexe Abläufe für den Einsteiger, um schneller qualitativ hochwertige Ergebnisse zu erreichen.

In diesem zweiten Teil (hier ist der erste Teil) geht es mit weiteren Plugins für Fotografen, Bildbearbeiter und Webdesigner weiter.

Color Efex Pro

Anbieter: google.com
Downloadgröße: 425 MB
Zielgruppe: Fotografen
Preis: 119,00 Dollar

Color Efex bietet uns zahlreiche Filter für Farbkorrekturen, die Retusche und kreative Effekte an. Die verschiedenen Vorgaben können leicht kombiniert werden, so dass schnell ganz eigene Bildlooks entstehen.

© google.com


Anbieter: Imagenomic
Downloadgröße: 4,2 MB
Zielgruppe: Fotografen
Preis: 199,95 Dollar

Mit Portraiture erhalten wir einen Retuscheprofi: Hier geht es speziell um die Verschönerung der Haut, wobei Falten reduziert, Unreinheiten entfernt und Farben kontrolliert werden. Wir erhalten dabei eine recht komplexe Software, die viel Handarbeit erspart und einen Test wert ist.

© Imagenomic

Machine Wash Deluxe

Anbieter: misterretro.com
Downloadgröße: 272 MB
Zielgruppe: Fotografen, Webdesigner
Preis: Kostenlos, 99,00 Dollar

Mr.Retro ist der Vintage-Meister. Hier werden Bilder auf Knopfdruck älter umgesetzt. Perfekt für abgeblätterte Farbe und Texturen, die sich kreativ überlagern. Dabei sind übrigens einige grundlegende Features kostenlos.

© misterretro.com

Pixel Dropr

Anbieter: pixeldropr.com
Downloadgröße: 2 MB
Zielgruppe: Webdesigner
Preis: 22,61 Dollar

Mit dem Pixeldropper können schnell eigene Bild-Kollektionen angelegt werden, wobei der Schwerpunkt dabei auf Icons, Interface-Elemente und andere Grafiken für das Netz liegt. Aber auch Illustratoren finden hier eine Option, einzelne Bestandteile schnell zusammen zu setzen.

© pixeldropr.com

Renamy 3.0

Anbieter: klaia.com
Downloadgröße: 800 KB
Zielgruppe: Fotografen, Webdesigner
Preis: 9,99 Dollar

Viele von uns kennen wohl das Problem, dass wir etwas unstetig bei der Benennung der Ebenen sind. Und so steht da oft “Ebene 3 Kopie 2″, wo eigentlich “Hautretusche” oder “Formularbutton” stehen sollte. Renamy hilft uns dabei, Ebenen in Massen umzubenennen.

© klaia.com

Subtle Patterns

Anbieter: subtlepatterns.com
Downloadgröße: 1 MB
Zielgruppe: Fotografen, Webdesigner
Preis: 11,99 Dollar

Mit nur einem Klick können hier aus einer großen Kollektion verschiedenste Muster ausgewählt und als Hintergrund eingesetzt werden. Und für die schönsten Kacheln können wir noch eigene Kollektionen anlegen, um den Überblick zu bewahren.

© subtlepatterns.com

Fluid Mask 3

Anbieter: Vertus LLP.
Downloadgröße: 36,1 MB
Zielgruppe: Fotografen
Preis: 149,00 Dollar

Mit Fluid Mask ist es leichter möglich, auch komplexe Bildbereiche auszuwählen. Dabei geht es besonders um die ansonsten recht aufwendige Selektion von Haaren oder anderen feinen Strukturen. Die Beispiele auf der Website sprechen für sich.

© Vertus LLP.

Magic Bullet PhotoLooks 2.0

Anbieter: redgiant.com
Zielgruppe: Fotografen
Preis: 399,00 Dollar

Mit knapp 400,00 Dollar müssen wir zwar recht viel Geld locker machen, erhalten dafür aber sehr hochwertige Bildlooks. Und das sind wahre Zeitsparer für den Fotografen, wenn die Fotos der Hochzeit oder der Porträts noch schöner werden.

© redgiant.com

http://www.photoshop-weblog.de/faszinierende-photoshop-plugins-fuer-den-grossen-und-kleinen-preis-teil-2/ 58092@feed.stefanherz.com Thu, 02 Apr 2015 11:17:42 GMT
<![CDATA[Apple Maps Connect in Deutschland: Firmeneinträge anlegen und bearbeiten]]> maps-connect-iconApple Maps Connect steht jetzt auch in Deutschland zur Verfügung. Das Portal ermöglicht das Hinzufügen von Firmeneinträgen zu Apples Kartenangebot. Inhaber von Kleinunternehmen können nach Anmeldung mit ihrer Apple ID einen neuen Unternehmenseintrag anlegen oder bereits vorhandene Bearbeiten. Dazu gehört neben der Adresse, dem Geschäftsbereich und ... | Weiter → ]]> http://www.ifun.de/apple-maps-connect-fuer-deutschland-unternehmenseintraege-anlegen-und-bearbeiten-73366/ 54868@feed.stefanherz.com Fri, 20 Feb 2015 13:32:02 GMT <![CDATA[Bell Lamp]]> Normann Copenhagen’s Bell Lamp is a luminous nod to industrial design. Available in four sizes and two color combinations, the lamp is both a sculpturally beautiful and functionally present piece. At the core of its design, is its simplicity. Made from aluminium and hanging from a 4m textile cord, the Bell Lamp is encompassing of the designer’s passion, to challenge the conventional design rules.

Designers Andreas Lund and Jacob Rudbeck believe their designs should be based on passing on the Scandinavian design tradition and create everyday objects that have personality without being loud. A statement that speaks worlds. Based in Copenhagen, the duo are responsible for envisioning carefully articulated designs that add character and emphasize quality and stripped back minimalist thinking. The Bell Lamp is testament to that.

Photography courtesy of Normann Copenhagen.

Normann-Copenhagen-Bell-Lamp-5 502100_Bell_Lamp_Grey_onblue.ashx Normann-Copenhagen-Bell-Lamp-6 502110_Bell_Lamp_Grey_OnBlue_Landscape.ashx 502110_Bell_Lamp_Sand_Detail.ashx 5021_Bell_Lamp_All.ashx Bell_Large_Grey.ashx NC_Furniture_Catalogue_2014_100.ashx ]]>
http://minimalissimo.com/2014/12/bell-lamp/ 51328@feed.stefanherz.com Wed, 17 Dec 2014 17:07:25 GMT
<![CDATA[5 Things You Can Do With HTML Meta Tag]]>

Meta Tag is used to store a piece of information on a web page. Essentially, it is information about data. Its purpose is for browsers and search engines to understand and know the page better.

As web developers, we’re used to setting the page description, author, or keyword via meta tag. However, there are a number of meta tag capabilities that most of us probably aren’t aware of. Here I’ve put together 5 meta tag features that you may have not heard of before.

1. Controlling Browser Cache

When you visit a web page, it stores the web page in cache to make it load faster in subsequent visits. You may have come across an instance where your page is not updated with the changes that you’ve made. This is because the browser shows you the cached page. To prevents this, you can disable browser cache by using meta tag. To disable browser cache, you can use:

 <meta http-equiv="Cache-Control" content="no-store" /> 

This meta tag is recognized in Firefox, Chrome, and Internet Explorer. Even more so in IE, where you can use more values and specifications to disable caching, as follows.

 <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" /> 

You can also set an expiration date to ensure that the browser will show the file that’s fresh from the server, rather than from the cache.

 <meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" /> 

The meta data above means that document is considered expired after the specified date and time. If you set it to “0“, the browser will check for a fresh new document on each visit.

2. Setting Cookies

Similar to cache, cookies is a small piece of data that is stored in the browser by the websites you’ve visited. Websites may reuse the cookies to tailor some website functionalities. A real everyday example is when you shop in an online store. If you’ve added a few items to the basket, as long as you have not yet checked out, the items will remain in the basket even though you have left the browser for several days.

To set cookies on meta-tag you can use:

 <meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE"> 

name=data is the name of the cookies which determines the values set in it. path is the path of document. Whereas, the value of expired indicates the time and date when cookies are deleted from your computer. If you leave the expired date empty, the cookies will be deleted once you quit the browser.

As an example, if we want the cookies to expire on 31 January, 2015 we can set:

 <meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2015 00:00:00 GMT"> 

3. Refreshing Web Pages

You can set a page to refresh after a certain period. meta http-equiv="refresh" specifies a delay in seconds for the browser to refresh the page automatically. This meta-tag specification below will make the browser reload the page every 5 seconds.

 <meta http-equiv="refresh" content="5"> 

Below, you can see that the page is automatically refreshed by the browser.

4. Redirecting

We can also use the refresh meta tag to redirect a page to a specific destination. This following example will lead us to example.com after we view the page for 5 seconds.

 <meta http-equiv="refresh" content="5; url=http://example.com/"> 

You can see it live below.

To redirect the page immediately, set it to 0, as follows:

 <meta http-equiv="refresh" content="0; url=http://example.com/"> 

5. Page Transition

You can also apply transitions to your web pages with meta-tag in a way that is similar to PowerPoint. The syntax of page transition with meta tag looks like below:

 <meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" /> 
 <meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" /> 
 <meta http-equiv="page-enter" content="blendTrans(duration=sec)" /> 

Note that this only works on ancient Internet Explorer since page-enter and page-exit are Microsoft’s proprietary meta tag specifications. You can specify how long the transition will run for using duration. The Transition should be filled by a number/integer between 0 – 23 that refers to the transition type provided by Microsoft. Whereas, <meta http-equiv="page-enter" content="blendTrans(duration=sec)" /> is another value that comes without a transition type.

http://rss.feedsportal.com/c/35261/f/656072/s/4079690c/sc/4/l/0L0Shongkiat0N0Cblog0Cmeta0Etag0Ehidden0Efeatures0C/story01.htm 48799@feed.stefanherz.com Fri, 14 Nov 2014 10:01:14 GMT
<![CDATA[Yosemite: Nach 5 Tagen Spotlight-Suche zurück zur Launchbar]]> lbImmer dann, wenn hier ein neues Mac-Betriebssystem installiert wird, versuchen wir zusätzliche Software-Installationen zu minimieren. Nicht das wir uns im Mac App Store nicht mit beiden Händen bedienen würden – auf Anwendungen die ab Werk vorhandene Funktionen doppelt implementieren, verzichten wir wo möglich jedoch konsequent. [...]]]> http://www.ifun.de/yosemite-nach-5-tagen-spotlight-suche-zurueck-zur-launchbar-68441/ 46757@feed.stefanherz.com Tue, 28 Oct 2014 11:30:13 GMT <![CDATA[“Chugplug” Zusatzakku für MacBooks in Deutschland verfügbar]]> icon32Der zu Jahresbeginn vorgestellte MacBook-Zusatzakku Chugplug von Lenmar ist jetzt auch in Deutschland verfügbar. Der 530 Gramm schwere Powerklotz lässt sich zum Preis von 160 Euro über Amazon bestellen. Apple bietet nun ja seit einiger Zeit schon MacBooks ohne Wechselakku an. In der Regel lässt sich der mobile Tag dank der [...]]]> http://www.ifun.de/chugplug-zusatzakku-fuer-macbooks-in-deutschland-verfuegbar-68008/ 46075@feed.stefanherz.com Mon, 20 Oct 2014 16:06:02 GMT <![CDATA[How to Create a Simple Spider Web Illustration in Adobe Illustrator]]> Final product image
What You'll Be Creating

In this tutorial you will learn how to create a simple spider web illustration in Adobe Illustrator. You'll start by creating the group of paths that will make up your spider web, using three paths and a basic blend, along with some Transform and Warp effects. Next, using the Appearance and Stroke panels and some basic blending techniques, you will add color and subtle highlights for your paths. Moving on, you will learn how to add a dark, subtly textured background and how to easily use a built-in symbol. Finally, you'll learn how to add a few more subtle details and how to darken your entire illustration.

1. Create a New Document and Set Up a Grid

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the Width box and 540 in the Height box, then click on the Advanced button. Select RGB, Screen (72 ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). You will need a grid every 10 px, so simply go to Edit > Preferences > Guides > Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid: it will make your work easier. Keep in mind that you can easily enable or disable it using the Control-" keyboard shortcut.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Don't forget to set the unit of measurement to Pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

setup grid

2. Create the Group of Black Paths

Step 1

Pick the Pen Tool (P) and focus on your Toolbar. Remove the color from the fill, then select the stroke and set its color at black (R=0 G=0 B=0.) Move to your artboard and simply create a 150 px vertical path. The Snap to Grid option should make this easier.

create black paths

Step 2

Make sure that your black path is selected and go to Effect > Distort & Transform > Transform. Set the Angle at 30 degrees, enter 11 in the Copies box, check the middle, bottom reference point, and then click the OK button.

create black paths

Step 3

Reselect your vertical path and go to Object > Expand Appearance. Make sure that the resulting group of paths stays selected and go to Object > Transform > Rotate. Set the Angle at 15 degrees and then click the OK button. Move to the Layers panel, open the existing layer, make sure that the your group is still selected, and hit the Shift-Control-G keyboard shortcut twice to Ungroup it. You will end up with a column of twelve simple paths.

create black paths

3. Create the Group of Blue Paths

Step 1

Return to your Toolbar and replace the existing stroke color with R=39 G=170 B=225. Focus on the top side of your black paths and grab the Pen Tool (P). Create a 80 px horizontal path and place it exactly as shown in the first image. Once again, the Snap to Grid option will make things easier. Using the same tool, create a 20 px horizontal path and place it exactly as shown in the second image.

create blue paths

Step 2

Disable Snap to Grid (Control-") and enable the Smart Guides (Control-U). Focus on your top blue path and grab the Direct Selection Tool (A). Select the left anchor point, hold the Shift button from your keyboard and simply drag that point to the right until you get the "intersect" smart guide. This smart guide lets you know that your selected anchor point intersects with the black path that lies underneath. Move to the right anchor point, select it, and drag it to the left until you get that same "intersect" smart guide. In the end your entire path should match the second image.

create blue paths

Step 3

Focus on your bottom blue shape and make sure that the Direct Selection Tool (A) is still active. Once again, use that "intersect" smart guide to squeeze your path as shown in the second image.

create blue paths

Step 4

Select both blue paths and go to Effect > Warp > Arc Lower. Enter the properties shown in the following image and click OK.

create blue paths

Step 5

Focus on your Toolbar and click on the Blend Tool to open the Blend Options window. Select Specified Steps from the Spacing drop-down menu, enter 3 in that white box, and click OK. Reselect the two blue paths and hit Alt-Control-B (or go to Object > Blend > Make) to create a simple blend.

create blue paths

Step 6

Disable the Smart Guides (Control-U) and enable the Snap to Grid (Control-"). Focus on your Toolbar and replace the existing stroke color with a random red. Using the Pen Tool (P), create a 150 px vertical path and place it as shown in the following image. Select this new path along with the existing blend and simply Group them (Control-G).

create blue paths

Step 7

Make sure that the group with the red and blue paths is selected and go to Effect > Distort & Transform > Transform. Again, set the Angle at 30 degrees, enter 11 in the Copies box, check the middle bottom reference point and then click OK

create blue paths

Step 8

Make sure that your group with red and blue paths is still selected and go to Object > Expand Appearance. Move to the Layers panel, select the resulting group, and Ungroup it (Shift-Control-G). This time you will have to hit this keyboard shortcut four times. Return to your artboard, select one of your red paths, and go to Select > Same > Stroke Color which will select the rest of the same with similar stroke color. Now that all your red paths are selected simply hit the Delete button from your keyboard to get rid of them.

create blue paths

4. Create the Background

Step 1

Focus on your Toolbar, remove the color from the stroke, and then select the fill and set the color at R=114 G=102 B=88. Pick the Rectangle Tool (M), and click on your artboard to open the Rectangle window. Enter 620 in the Width box and 560 in the Height box and click OK. Make sure that the resulting shape stays selected and send it to the back (Shift-Control-[ ). Move to the Layers panel, double-click on the name of this new path, and rename it "Background".

Next, you will need to center your "Background" shape, so open the Align panel (Window > Align). Set the aligning to Artboard (open the fly out menu and go to Show Options if you can't see the Align To section as shown in the following image), make sure that your shape is selected, and then simply click the Horizontal Align Center and Vertical Align Center buttons. In the end your rectangle should cover the entire artboard.

create background

Step 2

Making sure that your "Background" shape stays selected, focus on the Appearance panel (Window > Appearance) and add a second fill using the Add New Fill button. Focus on this new fill, set the color at black, and click on the Opacity piece of text to open the Transparency fly-out panel. Change the Blending Mode to Multiply, lower the Opacity to 10% and return to the Appearance panel. Make sure that your black fill is still selected and go to Effect > Artistic > Film Grain. Enter the properties shown in the following image and click OK.

Once you're done, move to the Layers panel and lock your "Background" shape to make sure that you don't accidentally select/move it.

create background

Step 3

Focus on your Toolbar and replace the existing fill color with white (R=255 G=255 B=255). Using the Rectangle Tool (M), create a 250 x 560 px rectangle and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the top side of this new rectangle. Select the left anchor point and drag it 190 px down, as shown in the second image. Make sure that this white shape stays selected, lower its Opacity to 20% and change the Blending Mode to Soft Light.

Move to the Layers panel, lock the white shape made in this step and simply drag it in the bottom of the panel, right above your "Background".

create background

Step 4

Focus on your Toolbar and replace the existing fill color with a black. Using the Rectangle Tool (M), create a 620 x 190 px rectangle and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on the right side of this new rectangle. Select the bottom anchor point and drag it 250 px to the left as shown in the second image. Making sure that this black shape stays selected, lower its Opacity to 20% and change the Blending Mode to Soft Light.

Move to the Layers panel, lock the black shape made in this step, and drag it to the bottom of the panel, right above your "Background".

create background

5. Add Transparent Strokes for Your Group of Paths

Step 1

Using the same Select > Same > Stroke Color option we used earlier, select all your black paths and focus on the Appearance panel. Select the stroke, replace the existing color with white, lower its Opacity to 15%, and click on Stroke to open the Stroke fly-out panel. Increase the Weight to 2 px and select Width Profile 2 from the Profile drop-down menu.

add transparent strokes

Step 2

Make sure that the set of paths edited in the previous step are still selected, and focus on the Appearance panel. Select the existing stroke and duplicate it using the Duplicate Selected Item button. Select the newly added stroke, increase its Opacity to 30% and decrease the Weight to 1 px. Once your're done, simply hit the Control-G keyboard shortcut to Group all these paths.

add transparent strokes

Step 3

Using that same Select > Same > Stroke Color option, select all your blue paths and focus on the Appearance panel. Select the stroke, replace the existing color with white, lower its Opacity to 20%, and then open the Stroke fly-out panel. Focus on the Profile drop-down menu and select Width Profile 1.

add transparent strokes

Step 4

Make sure that the set of paths edited in the previous step are still selected and focus on the Appearance panel. Select the existing stroke and duplicate it using that same Duplicate Selected Item button. Select the newly added stroke and decrease its Weight to 0.5 px. Once you're done, Group all the paths edited in this step (Control-G).

add transparent strokes

6. Distort Your Spider Web and Add Subtle Shading and Highlights

Step 1

Select the two groups of paths that make up your spider web and Group them (Control-G). Move to the Layers panel and rename this new group "spiderWeb". Make sure that this group stays selected and go to Effect > Warp > Bulge. Enter the properties shown in the following image, click OK and go to Effect > Warp > Fish. Enter the attributes shown in the following image and click OK.

distort shading highlights

Step 2

Make sure that your "spiderWeb" group is still selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the following image and click OK.

distort shading highlights

Step 3

Reselect your "spiderWeb" group and make a copy in front (Control-C > Control-F). Select this new group and focus on the Appearance panel. Select the existing Drop Shadow effect and simply remove it using the Delete Selected Item button.

Make sure that your group copy is still selected, go to Object > Expand Appearance and then open the Pathfinder panel (Window > Pathfinder) and click the Unite button. Fill the resulting shape with a random orange and make sure that it doesn't have a color set for the stroke.

distort shading highlights

Step 4

Make sure that your orange shape is selected, open the Gradient panel (Window > Gradient), and click on the gradient thumbnail to replace the existing fill color with the default black-to-white linear gradient.

Keep focusing on your Gradient panel, set the angle at 45 degrees, and then move to the gradient colors. Select the left slider and make sure that the color is set at white. Then select the right slider, set the color at white, and lower its Opacity to 0%. Keep in mind that the yellow zero from the Gradient image stands for Opacity percentage. Make sure that this shape stays selected, and focus on the Appearance panel. Select the existing fill, lower its Opacity to 50% and go to Effect > Path > Offset Path. Enter a -0.5 px Offset and click OK.

distort shading highlights

7. Add a Vertical Spider Web and the Spider

Step 1

Using the Pen Tool (P), create a 190 px vertical path and place it as shown in the following image. Make sure that this new path stays selected and focus on the Appearance panel. Add a 2 px white stroke and make sure that there's no color set for the fill.


Step 2

Make sure that your vertical path is still selected and focus on the Appearance panel. Select the existing stroke, lower its Opacity to 15% then open the Stroke fly‑out panel and select Width Profile 2 from the Profile drop-down menu.


Step 3

Make sure that your vertical path stays selected and focus on the Appearance panel. Select the existing stroke and duplicate it using that same Duplicate Selected Item button. Select the newly added stroke, increase its Opacity 30% and decrease the Weight to 1 px.


Step 4

Make sure that your vertical path stays selected and focus on the Appearance panel. Select the bottom stroke and duplicate it using that same Duplicate Selected Item button.

Keep focusing on the Appearance panel and select the bottom 2 px stroke. Replace the existing color with black, lower its Opacity to 10% and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image (make sure that you check the top left reference point), click OK and go to Effect > Blur > Gaussian Blur. Enter a 1 px Radius and click OK.


Step 5

Disable the Snap to Grid (Control-") and open the Symbols panel (Window > Symbols). Open the fly-out menu of this panel, go to Open Symbol Library > Nature, and a new window with a bunch of symbols will open. Select the one called "Taratula" and simply drag it on your artboard. Rotate and resize this symbol then place it roughly as shown in the following image.


Step 6

Make sure that your "Tarantula" symbol stays selected and go to Effect > Stylize > Drop Shadow. Enter the properties shown in the top left window (in the following image), click OK, and add the other four Drop Shadow effects shown in the following image.


8. Add Several Subtle Details and Darken Your Illustration

Step 1

Grab the Ellipse Tool (L) and click on your artboard to open the Ellipse window. Enter 4 in the Width box and 2 in the Height box, and then click the OK button. Make sure that the resulting shape stays selected and focus on the Appearance panel. Set the fill color at white, lower its Opacity to 40%, change the Blending Mode to Soft Light and then go to Effect > Stylize > Outer Glow. Enter the properties shown in the following image and click OK.

details darken

Step 2

Multiply the tiny, squeezed circle made in the previous step (Control-C, Control-F) and spread the copies across your spider web roughly as shown in the following image.

details darken

Step 3

Enable the Snap to Grid option (Control-"). Using the Rectangle Tool (M), create a new 620 x 560 px rectangle and center it using the Horizontal Align Center and Vertical Align Center buttons from the Align panel.

Select this new shape and fill it with the radial gradient shown below. Use the Gradient Tool (G) to stretch your gradient as shown in the following image, and don't forget that the yellow zero from the Gradient image stands for Opacity percentage. Make sure that the rectangle made in this step stays selected, and focus on the Appearance panel. Simply select the existing fill, lower its Opacity to 70% and change the Blending Mode to Multiply.

details darken

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

final result
http://design.tutsplus.com/tutorials/how-to-create-a-simple-spider-web-illustration-in-adobe-illustrator--cms-22176 45660@feed.stefanherz.com Wed, 15 Oct 2014 16:56:56 GMT
<![CDATA[OS X 10.10 Yosemite Clean Install: Bootfähigen USB-Stick erstellen]]> OS X 10.10 Yosemite wird es allein als Download im Mac App Store geben. Wer im Anschluss eine saubere Neuinstallation (Clean Install) vornehmen möchte, der muss einen bootfähigen USB-Stick erstellen. Wir zeigen hierfür drei Möglichkeiten.


Themen: OS X 10.10 Yosemite: Kostenlos ab Herbst mit iCloud Drive und mehr, OS X Server, OS X 10.9, Mac App Store, Apple]]>
http://www.giga.de/downloads/os-x-yosemite/tipps/os-x-10.10-yosemite-clean-install-bootfaehigen-usb-stick-erstellen/#utm_source%3Dgiga%26utm_medium%3Dfeed%26utm_term%3Dfeeds 45509@feed.stefanherz.com Wed, 15 Oct 2014 15:30:06 GMT
<![CDATA[10 Cool Photoshop Tutorials For Creating Your Own Cinemagraph]]>

Cinemagraphs were originally coined by American photographers, Kevin Burg and Jamie Beck of Ann Street Studio, who used this trick for their news and fashion photos back in 2011. It’s kind of a hybrid between a still photograph and a video. The whole image remains still except for a particular movement that is repeated over and over again in just one section. These are usually saved in a GIF format.

You can create a cinemagraph using editing software which would compose the photographs or the video frames into a seamless loop of sequential frames. It may take a bit of time but I believe cinemagraph is a form of art worth giving a chance. To help you along with the learning process, I’d like to share 10 ultra-cool cinemagraph Photoshop tutorials to assist you in creating your very own cinemagraph. Feel free to share your cinemagraphs in the comment field below too.

Create Cinemagraphs Easily Using Cliplets. This awesome image which showcases a moving skateboard wheel can be mimicked in no time with this tutorial. It uses Cliplets to help you create this cinemagraph.

How To Make a Cool Cinemagraph Image in Photoshop. This tutorial teaches you to play around with Photoshop action tools so that you can have your own cute shopping cinemagraph image like the shopping montage of the 90s.

How To Make A Cinemagraph for Photoshop Newbies. All you need for this particular tutorial is basic Photoshop skills, a tripod, a video camera, Photoshop (of course) and Quicktime player. If you’re armed with that, you’re good to go.

Create an awesome cinemagraph in Photoshop. In this lesson you learn how to use Photoshop frames to process footage, and how to tweak your sequence in order to find the ideal loop for export.

Creating a Cinemagraph in Photoshop. This cool video guide will walk you through the process of creating a cinemagraph in Photoshop and also tells you all the niceties of using this method including how to save the file in the correct format.

Cinemagraph tutorial. In just 6 easy steps, this tutorial can show you how to create a wonderful cinemagraph in Photoshop.

Create a Cinemagraph (or Cinegraph) Using Photoshop CS6. Use the latest Photoshop version CS6 to create a cinemagraph that’s bound to make everyone else green with envy!

How to Create a Cinemagraph Using Adobe Photoshop CS5. Hair fluttering in the wind or blinking eyes are the perfect parts of the photo to animate as they are subtle. Watch this short video to learn how to do it yourself.

Tutorial: Como hacer un cinemagraph con Photoshop. For all of you more comfortable with the Spanish language, here’s a handy cinemagraph tutorial in Spanish.

Cinemagraph: How to. Why not bring one of your favorite movie scenes to life in a different way? This guide will show you how to make a cinemagraph from a Vimeo video without having to take pictures.

Click Here To See More Cool Cinemagraphs »

http://rss.feedsportal.com/c/35261/f/656072/s/3f31c26c/sc/38/l/0L0Shongkiat0N0Cblog0Ccinemagraph0Ephotoshop0Etutorials0C/story01.htm 44670@feed.stefanherz.com Tue, 07 Oct 2014 10:01:59 GMT
<![CDATA[Aperture zu Lightroom: Adobe buhlt um Aperture-Nutzer]]>
Adobe Photoshop Lightroom (Programmsymbol)

Das baldige Ende von Apples EBV-Lösung Aperture nimmt Adobe zum Anlass, Nutzer zum Umstieg auf die hauseigene Anwendung Lightroom zu bewegen. Den komplizierten Vorgang erklärt ein Umstiegsführer.

Den nicht ganz unkomplizierten Umstieg von Aperture auf Lightroom beschreibt Adobe nun in einem sechsseitigen, nur englischsprachigen PDF-Dokument. Die Anleitung zeigt Schritt für Schritt, wie man bislang mit Aperture verwaltete Bilder mitsamt Metadaten und Einstellungen exportiert und in Lightrooms Obhut übergibt. Einige Informationen wie Gesichtserkennung, örtliche Zuordnung oder Farbetiketten bleiben hierbei allerdings auf der Strecke, ebenfalls werden Diaschauen, Fotobücher und Webseiten nicht…


http://www.dasauge.de/aktuell/foto_film/e2020 39082@feed.stefanherz.com Tue, 05 Aug 2014 12:19:00 GMT
<![CDATA[Design a CD Cover in Low-Polygonal Grungy Style in Adobe Illustrator]]> Final product image
What You'll Be Creating

Ever wanted to make your own stylish CD cover? In this tutorial, we’ll go through a process of creation of a stylish CD cover, with simple yet modern styled graphics.

We will use the popular low-polygonal style, and give our cover a unique grungy look with the help of Adobe Illustrator artistic brushes. Together, these elements will help our CD cover have a modern look and stand out among the crowd of other albums.

Let’s start!

1. Create a Low-Polygonal Base for the Elephant’s Head

Step 1

For this tutorial, I’ve used one of my old pictures (which you can download directly below by right-clicking on the image) that I File > Place on the Artboard as a reference. Lock the layer with your reference image and create a New Layer above the locked one. 


Step 2

I make the reference image a bit brighter, and started drawing small triangles above it using the Pen Tool (P).


Step 3

Continue covering the reference image with triangles of various sizes. You don’t have to be very precise here. Don’t waste your time trying to make the triangles match, because later we’ll do an easy trick in a few clicks.

add extra triangles

Step 4

If your image is more or less symmetrical, try using the Reflect Tool (O) to mirror some repeating parts to the other side of your image. Here, for example, I select a group of triangles around the eye-area and reflect it over the vertical axis. Use the Copy button to make a reflected copy of the selected area.

reflect tool

Continue rendering your image. Make the triangles larger to emphasize the large pieces, such as the wide upper part of the elephant’s trunk. Use smaller triangles to highlight the minor details such as eyes and tusks. 

larger and smaller triangles

Step 5

Finish up with the elephant’s trunk by covering it with a set of varying triangles.

triangled head

Step 6

Move on to the ears by putting some triangles over the left ear. Make the sides of the triangles longer to indicate that the shapes here are more extended and protruded.

triangle ears

When you are finished with one of the ears, use the Reflect Tool (O) again to copy the reflected objects to the other side of our image. Edit some triangles by changing their size and position if they are off the area.

reflect ears

Step 7

The base for our low-poly illustration is ready! I’ve changed the Stroke Color of the triangles to bright red, to see them more clearly.

outlined triangles

Step 8

Now the fun part! Find a group of triangles which you need to merge, so that they would fit nicely to each other. Select the corners of these triangles by dragging the Direct Selection Tool (A) over the anchor points or by using the Lasso Tool (Q). Focus on the Align Panel (Window > Align) and choose the Align to Selection option. Finally, click on the middle positions in Align Anchor Points and Distribute Anchor Points fields in order to combine the triangle corners.

merge triangles

Step 9

Move on to the next group of corners which you need to combine.

do it again

Step 10

If it happens so that your triangle don’t combine, like in the example below, just go ahead and add an additional triangle by dividing the big one into two separate shapes, and align the anchor points in the same way.

add extra triangles

Edit the shapes on the elephant’s face.

edit shapes

2. Color the Elephant Using the Live Paint Bucket

Step 1

When all the triangles are aligned nicely to each other, select everything and go to Object > Live Paint > Make.

Live paint

Step 2

Use the Eyedropper Tool (I) to pick the color from the reference image and then fill the shape with the selected color, using the Live Paint Bucket (K). Use the Alt key to switch between these two tools, thus speeding up your work.

paint in triangles

Step 3

Here is how the fully colored image looks at this stage. Some triangles are made much darker than the others to emphasize the shadows and to make our illustration more dimensional. The brightest shapes mark the highlights on the most protruded and bulged shapes.

colored elephant

Step 4

Remove your reference image and set the Stroke Color to None after you’ve finished coloring all the shapes. Fill in the blank missing parts if there are any. 

no reference image

You may notice that some of the triangle’s sides do not match. This may happen while using the Pen Tool (P), if you accidently click and drag, thus making a rounded smooth corner instead of a sharp corner. Don’t hesitate and edit the anchor points with the Convert Anchor Point Tool (Shift-C) by clicking on the anchor points in order to convert them to sharp corner.  

fix mis-matches

Step 5

As long as you are satisfied with the result, select several random shapes with Direct Selection Tool (A) and change their color to lighter and darker gray in order to make our image more intricate and stylish.

add grey

3. Design the Front Part of Your CD Cover

Step 1

Create a New Layer below the layer with the elephant’s head. Place the completed head over the blank CD-cover template. Keep the elephant’s head on a separate layer, so that you are able to add new objects behind it.

CD cover template

Step 2

Let’s create a nice grungy background. We don't want it to be too distracting, but at the same time still want it to highlight the main object, making the cover look trendy and minimalistic. Stick to gray monochromatic tones, so that the elephant’s head will remain the only bright and eye-catching object of our composition.

We’ll use some default Adobe Illustrator brushes, which you can find in the Brush Libraries Menu > Artistic > Artistic Watercolor and other from the same section. See the list of the brushes which I’ve used on the screenshot below.


Select some watercolor brushes to your liking and make several strokes with the Paintbrush Tool (B) in different directions.


Step 3

If some of the lines are off your drawing area, you can always hide the unneeded parts by duplicating the basic cover shape, placing it above the brush strokes and making a Clipping Mask.

hide lines that are off drawing area

Step 4

Continue filling up the background by using various ink splash and splatter brushes, varying their darkness.

add ink splashes

Step 5

Move from the center of the cover to the edges, adding smaller details and filling up blank spaces.

add smaller details

Step 6

I added a thick charcoal stroke at the bottom of the cover, assuming it as a good spot for some text.

text splash

Step 7

Add more details by using other brushes from the list. Choose lighter shades of gray in order to make the overall composition airy and light.

add more details

Step 8

Create a New Layer above the layer containing the elephant’s head. Make a few strokes with artistic brushes and switch the Blending Mode to Color Burn to add a nice touch of blue to our elephant.

color burn

Use the Clipping Mask again to hide the unneeded parts.

clipping mask

Step 8

Inspired by Indian and military facial warpaint, I decided to add a big stroke across the elephant’s eyes. Object > Expand Appearance, converting your stroke into a separate object, and switch it to Multiply Mode, lowering the Opacity down to 20%.

eye stroke

Step 9

The last but not the least thing to do here is to add a gentle shadow under the elephant’s head in order to make it more dimensional and to separate it from the background. Go to Effect > Stylize > Drop Shadow and play with the settings to your liking. You can find my settings on the screenshot below.


Fantastic Job!

Congratulations, you’ve just completed designing the front part of our CD cover! I hope it was a useful experience for you. Good luck with making your own unique CD cover design!

finished cover
http://design.tutsplus.com/tutorials/design-a-cd-cover-in-low-polygonal-grungy-style-in-adobe-illustrator--cms-21668 38814@feed.stefanherz.com Mon, 04 Aug 2014 09:00:00 GMT
<![CDATA[Frische Pixel: 18 schöne Wallpaper für Mac, PC, iPhone und iPad]]>

Themen: OS X 10.9 Mavericks: Gratis, schneller und mit längerer Batterielaufzeit (Zusammenfassung), goto fail – CVE-2014-1266: Die SSL-Schwachstelle in OS X und iOS]]>
http://www.giga.de/downloads/os-x-10.9/gallery/frische-pixel-18-schoene-wallpaper-fuer-mac-pc-iphone-und-ipad/#utm_source%3Dgiga%26utm_medium%3Dfeed%26utm_term%3Dfeeds 32330@feed.stefanherz.com Wed, 23 Apr 2014 17:55:09 GMT
<![CDATA[Adcade]]> http://www.cssdesignawards.com/sites/adcade/23856/ 17195@feed.stefanherz.com Tue, 05 Nov 2013 08:07:04 GMT <![CDATA[GODE]]> http://www.cssdesignawards.com/css-web-design-award-winner.php?id=22768 12712@feed.stefanherz.com Wed, 18 Sep 2013 08:19:36 GMT <![CDATA[Fluida Lamp]]> The delicate and versatile Fluida desk lamp has been created by Marco De Santi and Alessandro Paoletti of Studio Natural for Italian brand Martinelli Luce. The piece, as the name suggests, can be fluidly adjusted to changing lighting needs and uses of the desk A thin flexible strip, fitted with LEDs, is attached to two metal bases. These bases connect via magnets in multiple positions and allow to change direction of the light.

The Fluida lamp is the winner of the Young & Design Award 2013. Watch the video to see the piece in action.

timthumb 823BIfluidachiusa (1) 823BIfluidachiusaambiente timthumb (1) timthumb (2)

Fluida Lamp is a post by on Minimalissimo.

http://minimalissimo.com/2013/05/fluida-lamp/ 4008@feed.stefanherz.com Thu, 23 May 2013 23:00:34 GMT