Workathon에 갔었어요. 4박5일 해커톤+워크샵. 이때는 더이상 방황하지않기위해 어피니티다이어그램을 사용하는중...

Mon, 22 Apr 2013 21:24:58 -0400

Workathon에 갔었어요. 4박5일 해커톤+워크샵. 이때는 더이상 방황하지않기위해 어피니티다이어그램을 사용하는중 ㅎㅎ

Sweet kitchen 로고/ 메뉴판 작업

Mon, 22 Apr 2013 21:22:26 -0400

Sweet kitchen 로고/ 메뉴판 작업

Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!)

Tue, 09 Apr 2013 10:37:07 -0400

http://sarahjustine.com/2013/03/17/featherweight-ui-a-free-vector-based-and-retina-ready-ui-kit-with-bonus-mini-tutorial/

Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!)

Hot on the tails of my last design experiment, here’s a fresh UI kit out of the oven. Every element is vector based, retina ready and distributed through layers. Text and colours are easily editable. This kit is completely free for use for personal or commercial projects.

The font used is Lato Normal, available from Google Web Fonts for online or offline use.

Featherweight UI Download PSD

The Process

When I posted the Afterglow UI Kit, I got questions from curious designers wanting to know how the PSDs are built and how to use them. This article written by designmodo explains the value in grabbing these kits and how you can go about using them for inspiration and integration into your own projects.

What is a UI Kit and Why You Should Use It

While the kit is distributed via PSD, I use a combination of Photoshop and Illustrator to create shapes. Being an Illustrator fangirl down to my very core, I prefer to use this method as the tools AI are optimized for vector drawing. Below is a mini-tutorial to get you started on creating complex vector shapes using Photoshop and Illustrator.

Drawing

Iconography for the kit starts in Illustrator with a combination of using the pen tool and manipulating shapes. AI is built with the intent of creating vector-based artwork, so the tooling and features available are far more powerful than those found in Photoshop which is primarily focused on raster-based content.

Using Strokes

A significant advantage of starting in Illustrator is the manipulation of strokes drawn with the Pen tool which can later be expanded to shapes with fills.

You can also take advantage of the width tool (Ctrl/Cmd+W) to adjust the widths of your stroke at any point on the path, creating natural looking strokes as they would be drawn by a brush. This is a powerful feature since the stroke is fully manipulatable after you apply width so you can continue to make fine-tuned adjustments to your path.

Pathfinding

Using the Pathfinder panel, you can knock-out paths to create “holes” in your objects or merge multiple shapes together. Find the panel by selecting Window > Pathfinder.

In the below example I’ve used divide to separate the objects, and by deleting the purple circle I leave a counter in my original shape. Experiment with the different options to achieve unique shapes through merging and dividing.

Preparation

Once you’re happy with your shape, convert all strokes to outlines in preparation for transfer to Photoshop. Since Photoshop doesn’t recognize strokes, it will go ahead and fill your shape (you don’t want this) so this is an important step in the process.

To convert strokes to outlines, go to Object > Expand Appearance. You can also take advantage of intelligent selection options for multiple objects by selecting your stroked object and going to Select > Same. From the submenu there’s an array of options which will help you clean up and grab similar stroked objects for expanding.

Pasting Shapes

Now it’s time to move onto Photoshop. Select the object you want to transfer and Ctrl/Cmd+C. This will copy the path information to your clipboard. With an active document open in Photoshop, Ctrl/Cmd+V to paste. You’ll be greeted with some options:

Select “Shape Layer” from the menu. This will paste the paths as if you had drawn the object using shape tools in Photoshop. The pasted object will take on the fill of the foreground colour.

You now have a shape layer in the Layers panel with the path accessible in the Paths panel. Want to further edit your shape? No problem! Use the Direct Selection Tool (A) to adjust the beziers and anchors. You can also use the Direct Selection Tool to copy your paths and paste back into Illustrator. Roundtripping is a beautiful thing.

Once the shapes are all laid out, you’re ready to go ahead and style. Double click on the shape layer to bring up the Layer Style dialogue.

Layer styles scale with your object which makes them perfect to use with vectors. To learn how to get started with Layer Styles, check out this article from tutorial9.com.

Using vector shapes in Photoshop is optimal especially for UI based elements, as you can easily scale objects targeting various resolutions. Leveraging Illustrator for complex shapes, you can use your custom shape definitions for styling in Photoshop with simplified cross-product workflows.

That’s the architecture of it, the rest of the design comes from imagination and inspiration wherever you may find it. Happy Photoshopping!

CSS Pattern Generator

Sat, 06 Apr 2013 10:29:57 -0400

CSS Pattern Generator:

patter generator using only css

Photo

Sun, 14 Oct 2012 03:59:25 -0400

OSSI 시안2 컨셉:구리지만 재미있게..였는데 조과제로 하다 보니 산으로 갔다;;;

Mon, 06 Aug 2012 08:38:56 -0400

OSSI 시안2

컨셉:구리지만 재미있게..였는데 조과제로 하다 보니 산으로 갔다;;;

pixel작업

Mon, 06 Aug 2012 08:36:59 -0400

pixel작업

OSSI webpage 시안1

Mon, 06 Aug 2012 08:36:06 -0400

OSSI webpage 시안1

Photo

Mon, 06 Aug 2012 08:35:11 -0400

Photo

Mon, 06 Aug 2012 08:34:17 -0400

my desk

Mon, 06 Aug 2012 08:33:31 -0400

my desk

GUI for iphone

Mon, 06 Aug 2012 08:19:26 -0400

GUI for iphone

Photo

Tue, 19 Jun 2012 23:29:22 -0400

website intro page 타이포가 어색하다 그리드도 어렵다. 좀더 수정을 봐야 하는데 인트로만 하다가 시간...

Sat, 26 May 2012 09:15:41 -0400

website intro page

타이포가 어색하다

그리드도 어렵다.

좀더 수정을 봐야 하는데 인트로만 하다가 시간 다 가겠네 ;;

test render

Sat, 26 May 2012 07:44:38 -0400

test render

Photo

Fri, 17 Feb 2012 11:07:55 -0500

Video

Fri, 17 Feb 2012 11:04:12 -0500

스타일프레임컷중하나…. 그림은 잘 안그리는 편이지만, 한번 시도해봤다. 원하는 스타일이 잘 안나와서...

Fri, 17 Feb 2012 11:01:00 -0500

스타일프레임컷중하나….

그림은 잘 안그리는 편이지만, 한번 시도해봤다. 원하는 스타일이 잘 안나와서 아쉬웠다..

information design 팜플랫 디자인1

Fri, 17 Feb 2012 10:56:38 -0500

information design 팜플랫 디자인1

제품 상세 페이지 작업 中

Fri, 17 Feb 2012 10:55:02 -0500

제품 상세 페이지 작업 中

Hyun-hee An

Workathon에 갔었어요. 4박5일 해커톤+워크샵. 이때는 더이상 방황하지않기위해 어피니티다이어그램을 사용하는중...

Sweet kitchen 로고/ 메뉴판 작업

Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!)

Featherweight UI – A free, vector based and retina ready UI kit (with bonus mini-tutorial!)

The Process

Drawing

Using Strokes

Pathfinding

Preparation

Pasting Shapes

CSS Pattern Generator

Photo

OSSI 시안2 컨셉:구리지만 재미있게..였는데 조과제로 하다 보니 산으로 갔다;;;

pixel작업

OSSI webpage 시안1

Photo

Photo

my desk

GUI for iphone

Photo

website intro page 타이포가 어색하다 그리드도 어렵다. 좀더 수정을 봐야 하는데 인트로만 하다가 시간...

test render

Photo

Video

스타일프레임컷중하나…. 그림은 잘 안그리는 편이지만, 한번 시도해봤다. 원하는 스타일이 잘 안나와서...

information design 팜플랫 디자인1

제품 상세 페이지 작업 中