PPOMI + 3 CATS = INFINITY

 

웹표준을 지켜서 코딩을 해야하는데

솔직히 제대로 찾아보지를 못해서

맞게 하는건지 의문이 들 때가 많다

 

 

오늘의 경우에도 PC버전 완성해서 모바일로 상태를 봤는데

완전 중구난방이었다

 

 

오늘도 웹표준을 검색하고 있는데

다음에서 웹표준 가이드를 제시했다는 내용을 확인하고

접속해보았다.

 

 

다음 웹표준 가이드

 

ui.daum.net

 

 

 

 

뭔가 메뉴가 많다.

 

 

HTML 가이드, CSS 가이드는 물론

네이밍이나 체크리스트 까지 제공하고 있다.

 

 

꼼꼼히 읽어보았는데, 나에게는 naming 규칙이 상당히

흥미로운 내용이었다.

 

어떤 사람도 자신만의 규칙을 가져야 하는데

나의 경우 가르치는 사람에게서 영향을 많이 받는 편이라

이제껏 전 회사의 개발팀장님의 방식을 따랐었다

 

이젠 가이드대로 하면 헷갈릴 필요가 없을것 같다

 

 

체크리스트 내용을 클릭해 보면

아래의 세부 내용으로 이동한다.

 

음..

아직 나에게는 필요 없는 내용인 듯 하다

 

너무도 멀고 먼 ..

 

 

 

CSS 가이드 쪽에서

이부분이 가장 흥미로운 내용이었다.

 

이미지 대체 텍스트에 관한 부분인데

권장하는 첫번째 방법이 상당히 인상적이었다

 

-9999px 이라니

 

 

이거 웹페이지로 말고 책이나 pdf 로 정리해줬으면 좋겠다

책장에 꽂아두고싶다

 

 

처음 보는 사람들도 쉽게 공부할 수 있는

CSS Property 내용도 제공을 하기 때문에

 

나같은 초보에게는 딱 좋을거 같다

 

 

오늘도 프론트엔드 개발자를 위해 화이팅!

(오늘따라 오글거린다)

 

 

 

 

 

 

 

 

창작은 힘들다

 

이제껏 웹과 관련해서는 창작을 해 본적이 없다

전부 이미 있는 사이트들을 베낀 것들 뿐

 

 

포트폴리오 준비를 위해 필요한

"잘 된" 웹디자인 혹은 사이트를 모아놓은 사이트를 소개한다.

 

 

 

1. DBcut

 

 

 

웹디자인 평가나 우수한 사이트를 모아 놓았다.

 

접속하면 오픈/리뉴얼 된 사이트들을 확인할 수 있다.

아무래도 등록일 순으로 조회하면 최신 트렌드를 읽을 수 있다

 

기존에 사용하던 Behance나 Github의 경우

영어 기반이라 참고하기 쉽지 않았는데

 

디비컷의 경우 다 우리나라 사이트라서 좋다.

 

 

 

아래로 내려보면 이렇게 카테고리화가 되어 있어서

만들고 싶은 사이트 분류를 확인할 수 있다.

 

물론 나의 경우 일단 다 훑어보고 카테고리를 정할 듯...

 

 

 

2. WordPress Themes

 

항상 워드프레스는 디자인이 좋았다

 

물론 사용이 어려워서 많이 안 만져봤지만...(내 기준)

 

웹에이전시에 따라 워드프레스로만 제작하는 곳이 있다고 해서

슬슬 공부를 시작해볼까 싶다. (사실 뭘 공부해야하는지 잘 모른다)

 

 

이것도 영어권이긴 하지만...

강사님이 추천해주셔서..일단 넣는 것으로...ㅋㅋㅋㅋ

 

 

 

 

일단 dbcut만 봐도

우리나라 웹디자인 트렌드를 읽을 수 있다

 

반응형 웹.. 언제 제작하지...

솔직히 베껴오는거 말고는 아무 생각이 안 떠올라서 큰일이다

 

진짜 창작자가 되고 싶다.

 

 

 

 

 

 

 

Adjustment 메뉴는 기능이 정말 많은 거 같다.

그만큼 포토샵이 사진 보정 전문 툴이라는 얘기일듯..

 

 

Raw 사진 파일 열어도 1초만에 열리고

필터 적용해도

HRD 토닝 적용해도 1초만에 되는

 

그런 슈퍼 노트북 갖고싶다... (....)

 

 

 

1. Photo color

 

 

원래 색은 유지하면서 위에 다른 필터를 덮을 수가 있다

 

 

물밑 정원....ㅋㅋㅋㅋㅋㅋ

 

원하는 필터가 없다면 컬러를 선택해서 원하는 색을 누르면 된다

 

 

 

2. Invert : 반전

 

 

따로 설정할 필요가 없이 ctrl + I 를 누르면 바로 보색으로 반전이 된다.

 

 

 

3. Posterize : 포스터화

 

 

사용 색상 수를 줄일 수 있다.

마치 포스터 그림처럼!

 

 

 

4. Threshold  : 고대비

 

 

자주 사용은 안하지만...ㅋㅋ

슬라이더를 위로 조절하면 더욱 세밀해 지기는 하지만

영역이 너무 어두워진다.

 

 

5. Shadows / Highlights

 

 

어두운 부분이나 밝은 부분을 선택하여 조절할 수 있다

 

 

 

6. Replace Color

 

 

 

색상을 선택하여 다른 색으로 대체할 수 있다

만약 꽃의 색을 바꾼다면, 기본 칼라를 선택하고

스포이드 옆에 +이 그려진 스포이드를 선택해서 잡히지 않은 꽃의 색상을 추가해 준다.

 

썸네일에 꽃이 흰색 영역으로 전부 선택되면

바꿀 색상을 선택해 조절하면 된다.

 

 

 

 

 

 

 

 

 

 

 

 

포토샵으로 가장 자주하는 일은 뭘까?

 

당연히 사진 보정이다.

 

어릴때는 소위 얼짱 사진 만들어본다고 많이 썼었는데..

오늘은 꽃 사진으로 사진보정을 해보았다.

 

 

1. Brightness & Contrast

 

밝기와 대비 조정이다

 

 

 

Image > Adjustment 의 최 상단 메뉴이다.

 

밝기는 많이 올리면 너무 하얘지니까

조금만 조정하고, Contrast를 높여 보다 생기가 느껴지게 보정한다

 

 

2. Levels

 

 

얼굴 뽀얗게 만들때도 많이 사용하는데

보통은 위의 이미지처럼 슬라이드를 조정하거나

 

 

이처럼 스포이드를 사용한다.

Option 버튼 아래에 있는 스포이드가 세 개 있는데

스포이드 안의 색이 다르다

 

가장 밝은 색 스포이드를 선택하고 이미지에서 가장 밝은 부분을 찍어주면

그에 맞춰 색이 변한다.

 

 

3. Curve

 

 

커브의 경우 포물선으로 되어있어서

처음 사용했을때 상당히 당황했던 기억이 난다

 

여기서 기억할 것은 딱 두가지이다

 

상단 부분은 밝은색, 하단 부분은 어두운 색을 의미한다는 것

 

그래서 밝은 부분을 더 밝게 하려면 상단부분의 포물선을 올려주고

어두운 부분을 밝게하려면 하단 부분의 포물선을 올려주면 된다

 

위 이미지에도 포물선에 2개의 포인트가 찍혀있는 것을 확인할 수 있을 것이다.

 

 

4. Exposure

 

 

빛의 양이 부족한 사진을

Exposure를 이용해 보다 빛을 많이 받은 사진으로 변경할 수 있다.

 

Brightness보다 디테일하다, 라고 생각하면 된다고 한다

 

 

5. Vibrance

 

 

왼쪽이 Vibrance 100 / 오른쪽이 Saturation 100

 

Vibrance : 색상값 유지하며 채도 조절  (보다 자연스럽다)

Saturation : 색상값 상실하고 채도 조절

 

 

6. Hue & Saturation

 

 

Hue 값을 조절하면 노란색 꽃을 다른 색 꽃으로 수정할 수 있다

동시에 Saturation과 Lightness까지 조절할 수 있다

 

 

 

7. Color Balance

 

 

보통 Midtones에 놓고 조절을 많이 한다.

 

 

 

8. Black & White

 

 

흑백으로 만들어 주되, 특정 부분을 강조할 수도 있다.

색상에 따라 흑백의 강도를 조정할 수 있다.

 

원래는 Desaturation을 사용했었는데, 이건 일괄 적용이라

보다 디테일하게 하기 위해서 Black & White 를 사용할 수 있다고 한다.

 

 

 

특히 "Tint"를 이용해 흑백 이미지 위에 새로운 색을 입힐 수 있다.

자주 사용한다고 한다  모노톤!

 

 

 

 

 

 

 

 

오늘은 포토샵으로 그라디언트를 배웠다

쉬운 부분이긴 하지만, 보통 직접 만들어 쓰지는 않는다

 

직접 컬러 찍는거 보다 훨씬 예쁜 그라디언트가 이미 만들어져 있는 곳을

소개하려고 한다.

 

 

1. webgradients.com

 

웹그라디언트 닷컴

 

 

 

보다시피 접속하면 아주 예쁜 그라디언트들이 보인다

두 가지 색을 사용한거 뿐인데

진짜 예쁜게 많다

 

 

이 그라디언트를 사용해 보기로 했다.

첫 색인 앞의 코드를 더블 클릭해서 복사했다

 

 

포토샵 그라디언트 컬러 코드에 넣어주고 OK를 눌러

그어준다.

 

 

예뿌당...

 

 

사이트의 화살표를 클릭하면 PNG파일을 받을 수 있고

 

 

아래의 Copy CSS 버튼을 누르면

CSS 코드를 자동으로 복사해 준다

 

 

 

 

두 번째 소개할 곳은

 

uigradients.com

 

 

 

 

접속하면 이런 식으로 바로 그라디언트가 보인다

summer라는 이름의 이 그라디언트도

상큼하고 예쁘다

 

 

왼쪽 상단의 버튼을 누르면

모든 그라디언트 목록을 볼 수 있다.

 

 

세 번째 소개할 곳은

 

css3generator

 

 

 

접속하면 이거 밖에 안나오는데,

메뉴를 클릭하면

 

 

그라디언트가 보인다.

클릭해 주면 새로운 주소를 가르쳐 주는데

이동하면 된다.

 

 

그렇게 도착한 곳이 이곳!

포토샵의 그라디언트와 동일하게 편집이 가능하다.

게다가 그라디언트 방향도 설정할 수 있어서

 

CSS 코드에 관한 부분이라면 이 사이트가 가장 적합하다

 

 

 

아래로 스크롤 하면

브라우저 적합성도 확인할 수 있다

 

 

역시 익스는...(절레절레)

 

 

 

 

 

 

 

항상 포토샵은 "그냥" 사용하는 것이었다.

 

최근에 드디어 설정창을 만져서 여러가지를 변경해서

사용해 봤다...

 

근데 플러그인도 있다고 하는게 아닌가

 

 

오늘 강사님이 가르쳐주셔서 소개하고자 한다.

 

 

솔직히 회사에서 포토샵 CC 2017 버전을 사용했기 때문에..

플러그인을 찾을 필요가 전혀 없었는데

 

지금은 학원에서 CS6 버전을 사용하고 있으니

플러그인이 상당히 유용하다.

 

 

 

구글에 Assistor PS 를 검색해 준다.

한글이 나오는걸 보니, 우리나라 제작자 분이 만드신걸까 싶다

 

 

현재 접속이 불가하다

 

네이버에서 Assistor PS를 검색해준다.

 

 

바로 다운로드 해준다

 

 

실행하면... 로그인하라고 한다... 30일 무료 사용가능한듯

그냥 30 Day free Trial 을 눌렀다

 

 

가장 많이 사용하는 기능은 이 부분일것이다.

CC버전의 경우 radius rectangle을 만들고 상단 패널에서 radius 값을 변경하면

바로 반영이 되는데, 그 이하버전은 안된다.

 

이때 이 기능을 사용해 "APPLY"버튼을 눌러주면

알아서 바꿔준다.

 

 

다른 기능도 있지만

이부분이 가장 유용한.!

 

생각보다 많은 분들께서

기능에 관한 정리를 해 두셨으니

잠깐 네이버에 검색하면 정보를 얻으실 수 있습니다.

 

그럼 빠빠

 

 

 

 

 

 

 

 

 

 

 

웹표준 웹표준 그러는데

솔직히 이전 회사에 있을 때는

지킬 일이 전혀 없었다.

 

완전 주먹구구식 처리.

 

심지어 내 뒤에 들어온 자칭 '웹디자이너'는

공백을 흰색 jpg로 처리...

퍼즐 맞추듯이 모든 이미지를 "썰어"줘서

충격이었다

 

 

오늘은 웹표준을 지켰는지 안 지켰는지 확인할 수 있는

한 가지 툴을 소개하고자 한다.

 

Color Contrast Analyzer : 줄여서 CCA라고 한다.

 

 

오늘 강사님의 소개말씀으로는

글자색과 배경색의 명도대비가 적어도 4.5 이상이어야 된다고 하셨다.

 

 

일단 CCA부터 다운로드 받아보자.

 

 

구글에 검색하면 최상단에 보인다.

 

 

 

이러한 페이지가 열리고, 나는 윈도우니까 "Download for Windows" 버튼 클릭

 

 

Downloads 중에

Source code ZIP 파일을 다운로드 받으면 된다.

 

 

 

압축을 푼 후, Package 폴더 안의 응용프로그램 중 자신의 사양과 맞는 것을 실행시켜 주면 된다.

 

 

 

실행 후에는 검사를 하고 싶은 페이지의 글자 부분과 배경 부분을 각 피커로 찍어보면

아래 창에서 결과를 확인할 수 있다.

 

검정색과 흰색으로 하면 최대치인 21:1이 나온다.

 

 

이젠 접근성인지 표준성인지 죄다 지켜야지

 

하하

 

 

 

 

브러시 조절하는 법에 관해 배웠다

이전에도 배운건데

왜 그때하고 잊어버린건지.

 

 

 

 

74픽셀의 브러시와 Mode 사이의 버튼을 누르면 브러시 패널이 열린다

 

 

먼저 Spacing에 관한 내용을 배웠다.

쉽게 말해 브러시가 찍히는 간격이다.

 

 

우리가 사용하는 브러시는 그어지는것이 아니라

원이 1% 간격으로 겹쳐서 보이는 것이었다 (두둥)

Spacing 을 100%로 했을때

Spacing 을 200%로 했을 때

 

 

두번째로 Roundness와 Angle 조절에 관해 배웠다

Roundness는 낮추면 납작한 모양이 된다

Angle은 보통 캘리그라피 등을 쓸 때 사용한다

 

 

세번째로는 Scattering을 배웠다

 

아무래도 Bokeh를 만들때 많이 사용하다보니

그나마 익숙한 쪽이다.

 

Scatter가 흩뿌리는 정도,

Count는 흩뿌릴때의 갯수

Counter jitter는 그 갯수가 얼마나 왔다갔다 할 것이냐에 관한 것.

 

직접 조정해서 아는수밖에 없다

 

 

다음은 color dynamics

Foreground / Background Jitter를 조정하면

전경색과 배경색을 얼마나 왔다갔다 할 것인가를 정할 수 있다.

근데 보통 Hue jitter 정도만 사용한다고 한다.

 

위 Scattering / 아래 Scattering + color dynamics

Shape Dynamics도 조절해 보았다.

Shape Dynamics를 사용하면

작은 원 큰 원이 나온다.

 

 

마지막으로 Transfer

왜 Transfer인지 모르겠지만

투명도를 조절하는 부분이다

 

어떤거는 투명하게, 더 투명하게, 덜 투명하게 랜덤하게 나온다.

 

 

알고만 있어야지

 

어차피 만들어진 소스를 쓸테니...

 

 

 

오늘은 Liquify = 픽셀 유동화와

content aware = 내용인식에 관해 배웠다.

 

Liquify 툴의 경우 얼굴 보정에도 상당히 많이 사용하는데

깜빡했던 advance 모드에 관해서도 다시 짚을 수 있었다.

 

 

Liquify = ctrl + shift + x

 Filter > Liquify로도 들어갈 수 있다.

 

 

 

일반 모드

 

 

Advanced Mode 체크시

 

3개의 메뉴가 더 생긴다.

 

 

 

가장 윗 버튼을 이용해서 보통 턱을 갸름하게 만드는 등의 수정을 하고

5번째 버튼을 이용해서 눈을 더 크게 만든다.

 

움직이지 않았으면 하는 픽셀은 마스크를 씌워 영향을 주지 않을 수도 있다.

아래에서 4번째 버튼이 마스크를 씌우는 버튼,

아래에서 3번째 버튼이 마스크를 지우는 버튼이다.

 

 

 

Content Aware = 내용인식 하기

 

 

 

이 귀여운 고양이 사진에서

고양이만 그대로 두고, 뒷 배경은 width를 더 길게 만들 생각이다.

 

 

먼저 Lasso 툴을 이용하여 고양이를 선택한다.

 

 

선택한 고양이의 영역을 save selection으로 지정해 준다.

 

 

뒷 배경을 늘리고 싶은 정도만큼 캔버스 사이즈를 조정한다.

 

 

Protect영역을 저장한 선택영역인 "cat"으로 지정하고

content aware시키는 영역을 캔버스 사이즈 만큼 늘여준다.

 

 

짜잔~

 

늘인 부분이 살짝 거슬리긴 해도

일단 이렇게 사용하는 걸로 ^^

 

 

 

 

포토샵에서 패턴을 만들고

패턴을 적용하고, 패턴을 수정하는 법을 배웠다.

 

나도 그렇지만 패턴을 직접 만들어 쓰는 경우는 거의 없고

다운로드해서 사용하는 편이다.

 

 

오늘은 패턴을 미리볼 수 있는 사이트와

다운로드 할 수 있는 사이트를 공유하려 한다.

 

 

 

1. Patternify

 

패턴을 미리보며 만들어 볼 수 있고, CSS코드로 생성해 준다.

 

 

기본 화면이다

 

왼쪽 아래에 이미 만들어진 프리셋을 이용할 수도 있고

컬러나 투명도를 변경하여 직접 위의 캔버스에 찍을 수도 있다.

 

찍은 패턴은 Preview 부분에서 확인할 수 있고,

바로 아래칸에서 css코드로 퍼갈수도 있다.

 

 

이미 만들어진 해골 패턴에 추가로 무언가를 더할 수도 있다.

바로 코드를 카피할 수 있는 부분이 유용한거 같다

물론 아직 적용해본적은 없어서.....(...)

 

 

 

2. Patternico

 

일러스트에서나 만들 법 한 귀여운 패턴을 쉽게 생성할 수 있다.

 

 

오른쪽에 보이는 여러 아이콘들을 사용해서 배경으로 깔리는 패턴을 사용할 수 있다.

이미 깔린 패턴들이 미리보기라서 아이콘을 추가하거나, 위치를 변경하거나, 색깔을 바꾸었을 때

어떻게 보이는지 확인하기가 쉽다.

 

대충 아이콘 넣어도 귀엽게 보여서

상당히 유용할 듯 하다.

 

 

 

3. The Pattern Library

 

패턴을 다운로드 받아 사용할 수 있다

 

 

 

진심 넘나 귀엽다

패턴 진짜 귀엽고 고퀄인듯...!!!!

 

 

 

4. Topal

 

패턴 라이브러리처럼 다운로드 받아 사용할 수 있다.

 

 

은은한 스타일이 많은거 같다

아무래도 어디든 적용하기 편할 듯!

 

 

 

유용하다아아아 -