Webdesigner blog

Nowe funkcjonalności Photoshopa CS5 ujawnione

Bartek — Sun, 18 Oct 2009 19:02:12 +0000

Nowy pakiet Creative Suite ma pojawić się dopiero w okolicach kwietnia przyszłego roku (http://cs5.org/?p=136#more-136), lecz już teraz zaczynamy poznawać niektóre z nowych rozwiązań jakie Adobe planuje wprowadzić do swoich produktów. Poniżej zamieszczam filmik prezentujący dwie nowe funkcjonalności, w które wyposażony zostanie Photoshop CS5. Wyjątkowo ciekawie prezentuje się całkowicie odmieniony warp tool…

Zresztą zobaczcie sami:

Przerwa wakacyjna

Bartek — Thu, 09 Jul 2009 10:29:48 +0000

Od dłuższego czasu przestałem regularnie pisać na blogu. Niestety jest to spowodowane natłokiem obowiązków zawodowo-osobistych. Poza sporą ilością projektów, którymi ostatnimi czasy zostałem obłożony ;-), szykuje się spora zmiana w moim życiu prywatnym… Mianowicie 15 sierpnia powiem mojej drugiej połowie sakramentalne “tak” :-) A póki co, większość mojego wolnego czasu pochłaniają przygotowania do tej uroczystości, których – wierzcie mi na słowo – jest więcej niż się ktokolwiek spodziewał.

Zapewniam, że nie straciłem chęci do blogowania i blog nie umarł, ale nowe artykuły zaczną pojawiać się pewnie dopiero w okolicach września, kiedy to wrócę z podróży i przeprowadzę się do nowego mieszkania. :-)

Web Picks of the Week #4

Bartek — Mon, 22 Jun 2009 15:03:58 +0000

Web Picks of the Week #3

Bartek — Mon, 15 Jun 2009 19:15:11 +0000

Zasoby / Resources

50 Fresh Useful Icon Sets For Your Next Design

100 New and Beautiful Seamless Patterns

37 Vectors Mix Volume 2

100+ Sunburst Brushes

High Resolution Photoshop Smoke Brush Set

Tutoriale / Tutorials

How to Create a CSS Menu Using Image Sprites

30 Illustrator Videos To Turn You Into An Expert

Create a Simple Vibrant Light Effect in Photoshop

How to Create Organic Lettering Using Photo Manipulation Techniques

45 awesome Photoshop website template/layout tutorials

Aurora Borealis Wallpaper in Photoshop

Complex and Sophisticated Lettering Designs Photoshop Tutorials

Turn Any Font Into a Sketch Font

Strony / Websites

50 Inspiring Abstract Illustrations in Web Design

50 Alluring Typography and Grid Focused Websites

88 Single Page Website Designs For Design Inspiration

26 Creative Travel Website Designs for Inspiration

15 Grandiose Green Website Designs

Lighting in Web Design

Web Design Trend Hunting – The Messy Desk: Examples & Best Practices

Różne / Misc

Five Commonly Neglected Parts Of A Website That Deserve Detail

20 Tools to Make the Life of a Web Developer Easier

Web Picks of the Week #2

Bartek — Mon, 08 Jun 2009 09:08:25 +0000

Zasoby / Resources

33 High Quality Beautiful Free Icons Sets

22 Excellent Photoshop Brushes to Spice Up Designs

Tutoriale / Tutorials

29 Excellent Typography Tutorials for Designers

60+ Amazing Poster and Advertisment Tutorials

45+ Beautiful Logo Design Tutorials and Resources for Designers

Car Layout #5

Create another type of layout in Photoshop

How to Create a Large Header with a Simple Western Scene

How to Make Technodots in Photoshop

Vector Background Effect #1 – Marine Square Tiles

Create a Dynamic Scene with a Fallen Angel Theme

How to use Twirl filter to create an awesome text effect

Sexy Drop Down Menu w/ jQuery & CSS

Strony/ Websites

25 Fun & Creative Web Designs from DeviantArt

Web Design: Orange Sites

50 Beautiful Hand-Drawn Web Design

Best of CSS Design May 2009

50 Beautiful Website Designs For your Inspiration

Różne/ Misc

10 HTML Tag Crimes You Really Shouldn’t Commit

The CSS Box Model

55 Best Ways To Track Your Website Daily Traffic

Color Psychology in Logo Design

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Six Ways that Google Wave is Going to Change Your Business, Career and Life

10 Tips to Create a More Usable Web

10 properties that ‘were’ impossible to implement in IE6

Wordpress

10 Wordpress Plugins That Will Increase Your Search Engine Ranking

The Wordpress Plugins I Use Everyday

Web Picks of the Week #1

Bartek — Sun, 31 May 2009 21:17:08 +0000

Każdego tygodnia przeglądam setki najrozmaitszych stron i wpisów na blogach. Postanowiłem, że najlepsze/najciekawsze/najbardziej inspirujące (niepotrzebne skreślić ;) artykuły, newsy, zasoby i tutoriale będę zamieszczał na swoim blogu. Po części już to robiłem (zakładka “znalezione u innych” w stopce), ale wydaje mi się, że forma cotygodniowego wpisu jest bardziej przystępna i czytelniejsza.

Jeśli uważasz, że również znalazłeś coś wartego uwagi, czym chciałbyś podzielić się z innymi to zapraszam do komentowania :)

Zasoby / Resources

50 Free Metal Textures

14 High Res Assorted Maps Photoshop Brush Set

500+ Watercolor Brushes for Photoshop

45+ Beautiful Light Abstract Photoshop Brush Sets

23 High Resolution Photoshop Splatter Brushes

32 Free Vectors – Mega Vector Mix Collection

6 Free Guitar Vectors

Massive Giveaway of Designious Goodies

110 Ultimate Round-Up of Free Photoshop PSD Files and Resources

10 Awesome Free Grunge Fonts

35+ Really Awesome Free Grunge Fonts with inspirational Showcases

45+ Exceptionally Useful Free Handwritten Fonts

10 free fonts with a family

Tutoriale / Tutorials

Design an awesome colorful layout

Awesome Tutorial Portfolio Design

30 Best Photoshop Abstract Effect Tutorials

Abduzeedo’s Text Effect Tutorials

How to Design a Nice Vertical Menu with CSS

Convert A Content Box Design Into XHTML and CSS

Design and Code a Slick Website from Scratch

16 Unveiled Logo Design Processes!

Strony / Websites

30 Creative And Eye-Catching Web Designer Portfolios

17 more must see horizontal scrolling websites

22 Creative Uses of Robots in Web Design

50 great websites designs for your inspiration

35 Amazingly Well-Designed Church Websites

30 Inspiring Dark and Sleek Web Designs

Różne / Misc

Ask SM: CSS Quick-Question Edition

22 Neat Code Editors for Windows

10 Super Useful Tools for Choosing the Right Color Palette

Ultimate List of 32 Font And Typography Tools

Wordpress

WordPress SEO – 6 basic tips for better SEO

40 Exceptional “CMS Enabling” WordPress Plugins

Create an iPhone Application Website

Bartek — Thu, 28 May 2009 03:05:07 +0000

Hi there! This will be my first web design tutorial written on this blog and also first post written in English :) I decided to write it in English rather than Polish, so I can reach more audience and – hopefully – help more people create their own iPhone related website :) But enough talking, let’s start designing…

Final Result

Here’s a preview of what we’ll be creating. Click on the image to see a full-size version.

Step 1 – Download 960 Grid System

If you haven’t already, download it from here and open 960_grid_12_col.psd. I’m not really going to stick to it very much, I just prefer to treat it more like a guide.

Step 2 – Setting up the Photoshop Document and Background

We need to make the document a little bigger, so go to Image / Canvas Size and change the dimensions to 1500 x 1050.

Ok, now we can create the actual background… I’m going to use a wood texture. You can find lots of useful hi-res textures in the web (ie. here). For this particular design, I’ll use this one. Download it and open in Photoshop, go to Edit / Define Pattern and click OK.

Now let’s get back to our main design. Double-click the background layer and go to Blending Options. Choose Pattern Overlay and select the pattern that we’ve just created.

Create new layer, set foreground color to black and choose Gradient Tool (or press G).

Create a gradient like shown on the image below. You can press Shift while creating the gradient to make the line horizontally straight.

Now, when we have the first shadow created, Duplicate that layer. Select the new layer and go to Edit / Free Transform (or simply press Ctrl + T). Right-click and select Flip Horizontal, now move it to the right side of the document.

Step 3 – Logo and Menu

Create a new group, Choose Type Tool and enter some company name – in our case it’ll be “iPhone Appplications”. Instead of overused Myriad Pro I used font called Kozuka Gothic Pro.

Apply this blending Options:

Gradient colors are #e1e4e5 and #8d8e8f.

Now we’ll create a floating-like effect. The easy way would simply be to duplicate this text layer and change size and distance values of the Drop Shadow effect. But to achieve a better looking result do the following: duplicate text layer and disable it’s blending options. On the layers window move this layer below the original iPhone Applications layer. Right click on the layer and select Rasterize Type. Now Select Filter / Blur / Gaussian Blur and change Radius to about 2,0. Next, move down the layer for about 8px and change the opacity to 55%.

Select Edit / Free Transform (Ctrl + T) and change the width to something like shown on the image below:

That’s it, now it’s time to create site menu. Create new group called menu and new layer called box. Choose Rounded Rectangle Tool (U), set Radius to 10px. If you want it to have the exact same size as mine, choose Fixed Size and set it to 580 x 50 px.

Go to Blending Options and set these parameters:

Gradient colors are #e1e4e5 and #8d8e8f.

Create new layer, select Elliptical Marquee Tool (M), and try to select area like on the image:

Fill it with white color and set opacity to 18%. Now holding Ctrl select ‘box’ layer, right-click on the selection and choose Select Inverse. Go back to the previous layer and press delete.

Use Type Tool to create the text of the main navigation. Set font size to 24 pt and in Blending Options check Drop Shadow (1px Distance and Size, 50% Opacity) and Gradient Overlay (values #181818 and #5f5f5f. Now our menu should look like this:

Step 4 – Header

Header is a great place to introduce a company slogan or a catchy intro title. First of all, we’ll insert a nice iPhone photo. There’s really no need to create an iPhone by yourself, as there are many great resources you can use. I’ll use iPhone PSD Vector Kit that I found on Smashing Magazine blog.

So insert the iPhone image, and duplicate the layer. Now we’ll create a shadow in a similar way that we did in Step 3 with ‘iPhone Applications’ text. Put the duplicated layer below the original one and in Blending Options set Color Overlay to black. Now select Filter / Blur / Gaussian Blur and set Radius to 7,3. Decrease the Opacity to about 75-80%. To make Shadow more realistic, choose Edit / Transform / Warp and try to play a little bit with the corners of the shadow:

Great, now it’s time to create a nice big slogan that will grab user attention. I used the font Rockwell. The first line has a size of 85pt and the second 43pt. Apply these options:

Gradient colors are #38393b and #0b0e10.

Next we’ll create a sleek aluminium-like download button. Select Rounded Rectangle Tool. Leave the Radius at 10px, change only the Fixed Size to 210 x 60 px and on a new layer create the rectangle. Modify it’s Blending Options:

Gradient Stops: 0% – #d0cbcb, 21% – #ffffff, 40% – #eff2f1, 60% – #c2c3c3, 87% – #d4d8da, 100% – #e7ecee

Create a nice shadow effect using the same method as we used with the iPhone image. Now put on some Apple or iPhone logo and a Download text. Voila, our button is ready.

Step 5 – The Main Content

We’ll try to achieve an interesting concave effect by playing a little bit with shadows, but first create a white 1px weight horizontal line and change Opacity to 20%. Duplicate the layer, move it one pixel down, set Color Overlay to Black and the Opacity of the layer to 45%. This will create a subtle engraved effect.

Now create a new layer, choose Rectangular Marquee Tool (M) and select area below our two lines. With large (around 400-600px Master Diameter, 0% Hardness and 50% Opacity) Brush Tool (B) create shadow, concentraiting mostly on the left side of the selection, directly below the Header Slogan.

To create a similar bottom of our main content, just duplicate the group (with the two lines and shadow layer) and move it about 440px down. Now move the white line one pixel below the black one. Select the shadow layer, flip it horizontally (Edit / Transform / Flip Horizontal) and try to squeeze it a little by decreasing the height in Free Transform mode. Also change the opacity of the layer to 75%.

Between the two shadows, with the use of Rounded Rectange Tool (40px radius), create a 215×215 px rectangle. Create new layer and insert new wood texture, similar to the background one (but not the same). Don’t worry about the size of it. Right-click on this layer and choose Create Clipping Mask. Now apply these blending options to the rectangle layer:

Now insert an iPod icon. You can also apply a slight gradient, and bevel and emboss to create a nicer effect. On new layer, using the technique described in Step 3 about Elliptical Marquee Tool, create a shiny glass impression. Our icon should now look like this:

Use Type tool to add some dummy content to the right of the icon. I used Tahoma 24pt size for the title and 14pt for the description. I also added Drop Shadow effect (1px Distance and Size) which really creates a cool result.

Step 6 – Footer

We’re almost done. Below the main content you can insert some less significant informations like copyrights, quick contact info, client login area and so on. Point out more important aspects by changing text size and weight.

I inserted twitter bird that i found on Hongkiat blog. If you want to achieve the same effect, set the blending mode for the layer to Screen, and add Inner Shadow (5px Distance and Size) and Gradient Overlay (colors #4a220b and #82411e).

Step 7 – Last but not least

It’s time to create that nifty light effect which you can see on top of the website. Create a new document with dimensions 1500×1050 px. If Photoshop didn’t make it by default, fill the backgound with white color. Select Filter / Render / Lighting Effects and set parameters as on the image:

Press OK and copy created layer to our main document, on top of all other layers. Set the blending mode for the layer to Linear Dodge. Now using Free Transform Tool (Ctrl + T) resize it to fit website the way you like it. Decrease layer opacity to 72% and fill to 69%.

That’s it! Our design is complete. Your final result should look like the following:

Final Thoughts

I hope you liked this tutorial and found it useful. If something was unclear or confusing or you found a mistake, don’t hesitate and leave a comment. I’ll try to help.

You can find more inspirational and great-looking iPhone applications websites on PixelApnea and Kreativuse.

Wojna na reklamy

Bartek — Wed, 27 May 2009 15:35:06 +0000

Zdaję sobie sprawę, że temat już trochę leciwy ale dopiero niedawno trafił do mnie mail o następującej treści…

Wojna na reklamy między BMW, Audi i Subaru zaczęła się od poniższej reklamy.

Dział reklamy Audi nie kazał na siebie długo czekać i przygotował taką oto reklamę:

Na tym może i wszystko by się skończyło gdyby Subaru nie zdecydowało się na przyłączenie do tej utarczki w następujący sposób:

Po tym już można było oczekiwać przyłączenia się i innych korporacji samochodowych do tych reklamowych przepychanek. Jednakże wszystkich wyprzedziła następująca reklama, po której wymyślanie czegoś nowego było już bezsensowne:

Niezły przykład kreatywnego marketingu :).

Monumental video, czyli nowa forma reklamy?

Bartek — Sun, 17 May 2009 21:17:55 +0000

Ostatnio trafiłem na bardzo ciekawy filmik, prezentujący możliwości, jakie niesie ze sobą mapowanie wideo na obiektach architektonicznych. Efekty uzyskane w ten sposób są po prostu niesamowite. Aż ciężko uwierzyć, że to “tylko” rzutnik. Czy tak w przyszłości będzie wyglądać reklama w wielkich miastach? Kto wie, na pewno przyciąga uwagę o wiele bardziej niz tradycyjny billboard :)

Warto poświęcić te 8 minut i obejrzeć całość, bo niektóre efekty na prawdę zapierają dech w piersiach.

Stwórz świetny layout od podstaw – 26 inspirujących tutoriali Photoshopa

Bartek — Sat, 16 May 2009 14:10:46 +0000

Photoshop to świetne narzędzie do tworzenia layoutów stron, i zdecydowanie najczęściej wykorzystywane przez projektantów.

Tutoriali do Photoshopa jest nieskończona ilość i nie sposób przejrzeć je wszystkie, ale starałem się wybrać chociaż część z tych najbardziej pomocnych, przedstawiających projektowanie strony od podstaw. Poniżej znajduje się lista 26 wybranych przeze mnie, świetnie wyglądających i inspirujących designów wraz z linkami do tutoriali. Kolejność raczej przypadkowa ;-)