새로운 Z커뮤니케이션 세상 New LG데이콤
LG데이콤 신규 사이트 제안에 여러 가지 아이디어 회의 끝에 회사의 아이덴티티를 살려 가는 방향으로 컨셉을 잡았고 로고를 활용하는 모티브를 이용하기로 했다. 로고를 메인 전면에 활용해 콘텐츠를 자리잡는 형식의 디자인을 강구, 타원형인 로고를 다각도로 맞춰가며 알맞은 레이아웃 형태를 만들어 보았다.
글. 최문정
d2 e-Biz 디자인그룹 대리
hazki2@d2.co.kr
로고를 이용한 세련된 레이아웃 만들기
1) 컨셉
아이덴티티를 살리는 로고의 활용
2) 벤치마킹
회사 기업 사이트(sk 등의 로고를 모티브로 한 사이트 계열)
시안 제작
신규 document 사이즈를 1024 x 768 에 맞추어 놓는다
그림 1. 새 창을 연 모습
일러스트에서 LG데이콤 로고 가운데 타원만 그려 포토샵으로 불러들인다
그림 2. 일러스트에서 로고만 그린 모습
CS2에서는 벡터 파일을 복사해서 바로 불러들일 수 있다. 일러스트에서 벡터 개체를 복사한 다음 포토샵에 붙여 넣기 할 때 Smart Object 기능이 추가되었다. 벡터 개체의 속성을 그대로 유지한 상태로 캔버스 상에 붙여 넣어 진다. 이후 확대, 축소, 변형, 회전 등에도 원본 이미지의 품질이 그대로 유지된다.
그림 3. 일러스트 파일을 불러온다
그림 4. 불러온 이미지
‘작업’ 이란 이름의 폴더를 추가하고 폴더 아래 로고를 붙여 넣은 레이어 이름을 빨간 로고라 짓는다. 빨간 로고를 Edit > Transform > Rotate 90CW해 눕힌 다음 scale을 키워 타원 반쪽만 나오게 배치한다.
그림 5. 로고를 키운 모습
타원 안에 콘텐츠를 채울 예정이므로 1024x768 사이트에 스크롤 생기지 않는 영역 한에서 알맞게 각도를 자리잡아 본다.
그림 6. 1024x 768사이즈에 컴팩트하게 들어간 외형의 모습
여기서 빨간 로고 Vector Smart Object 레이어를 클릭하고 오른쪽 마우스를 클릭하면 Rasterize layer가 보이는데 레이어를 merge시키는 역할을 한다. 앞으로 빨간 영역에 내비게이션이 흰 영역에 콘텐츠가 들어갈 것이다.
그림 7. 레이어 merge
이 레이어에 그래픽 작업을 추가할 것이므로 Rasterize layer를 클릭해 레이어를 merge시킨 후 왼쪽 끝 가장자리 부분을 부드럽게 하기 위해 Gradient Tool을 이용해 Mask 적용을 한다.
그림 8. 왼쪽에 Gradient Tool을 적용한 모습
그림 9. Mask 적용
빨간 로고 레이어를 copy해 컬러를 연 회색으로 변경한 후 회색 로고라 이름 짓는다. 위치를 아래로 뒤바꾼 다음 Edit > Transform > Rotate 하여 빨간 타원과 약간씩 회색 타원형이 양쪽으로 겹쳐 보이게끔 조절을 한다. 몇 번씩 재조정을 하여 원하는 모형을 만든다. 앞으로 단조로움을 피하기 위해 빨간 타원형 안에 몇 가지 요소를 추가할 것이다.
그림 10. 아래 연회색 타원형을 겹친 모습
빨간 로고 레이어를 전체 Copy하여 맨 아래로 배치하고, Filter > Blur > Motion Blur의 Distance 값을 70을 준다.
그림 11. 빨간로고 Copy본에 Motion Blur를 입힌 모습
Motion Blur 준 레이어에 Gradient Tool을 이용해 왼쪽부분을 남겨두고 blur로 번진 영역을 삭제한다.
그림 12. blur로 번진 영역 삭제
그림 13. Motion Blur까지 입힌 배경의 모습
빨간 로고 레이어를 전체 Copy해 흰색으로 컬러변경을 한 다음 왼편으로 30픽셀 정도 이동시키고 Opacity값을 30%로 낮춘다. 레이어를 흰색 로고라 이름 짓고 Gradient Tool을 이용해 반 정도를 살짝 마스크해 지워준다.
그림 14. Gradient Tool을 이용해 지원 준다
그림 15. 흰색 영역의 마스크가 씌워진 모습
흰색 로고 레이어를 선택한 상태에서 레이어를 하나 추가하여 이름을 흰색 라인이라 짓고 Edit > Stroke를 흰색으로 입힌 후 Opacity값을 60정도로 낮춘다. 그리고 빨간 영역 외에 벗어난 라인은 삭제한다. 그리고 왼쪽으로 조금 이동을 한다. 그 흰색 라인을 또 선택한 상태에서 레이어를 하나 더 추가하여 빨간 라인이라 이름 짓고 이번엔 빨간색으로 변경한 후 Opacity 값을 역시 60%정도로 낮춘다. 빨간 영역 안에 있는 라인은 삭제한다.
그림 16. 흰 라인과 빨간 라인이 중간과 왼쪽 영역에 엷게 들어간 모습
빨간 로고 레이어를 선택한 상태에서 기존 로고 색보다 약간 어두운 색을 채우고 하단부는 삭제한 다음 레이어를 어두운 빨강이라 이름 짓는다. 어두운 빨강 레이어에 Alt를 누른 상태에서 빨간 로고 레이어 사이에 Clipping Mask를 시키면 빨간 로고 상단 부분만 조금 어둡게 임팩트가 생겨 입체적으로 보이게 된다.
그림 17. Clipping Mask 적용
그림 18. 그림 10과 비교해 보면 빨간 로고 도입부분이 조금 어두워진 모습
자, 이제 이 로고들이 더욱 입체적으로 보이게끔 하는 일만 남았다. 이 로고들을 받치는 그림자를 생성해주는 것이다. 그림자도 마찬가지로 면과 선을 이용하여 반대로 하나씩 하나씩 겹쳐 보이게끔 만들어 주면 된다.
처음 로고 스케일을 키우기 전의 로고를 다시 불러와서 지금의 형태보다 훨씬 작은 빨간 타원 형을 만든다. 오른편으로 배치한 후 Edit > Transform > Rotate 90CCW 한다.
그림 19. 작은 타원로고 그림자를 추가한 모습
추가한 레이어를 작은 로고라 이름 짓고 Opacity 값을 15%로 낮춘다. Gradient Tool을 이용해 하단부분을 마스크해 지워준다. 그 레이어를 전체 Copy하여 생긴 레이어를 작은 모션 로고라 이름 짓고
Filter > Blur > Motion blur Distance값을 20정도 준다. Opacity 값은 20%로 낮춘다
마지막으로 작은 로고를 Copy해 Scale을 120%정도 키운 다음 해당 레이어를 삭제하고 새로운 레이어를 추가해 빨간 라인 2라고 이름 짓는다.? Edit > Stroke 빨간 라인을 1픽셀 주고 Opacity 값은 40%로 낮춘다. 시작점을 작은 로고 레이어 시작점과 동일하게 상단으로 약간만 이동시킨다.
그림 20. 레이어 조정
그림 21. 그림자 최종으로 넣은 모습
이제 시안의 로고를 이용한 배경이 다 완성이 되었다.
그림 22. 최종 완성된 모습
로고를 모티브로 완성된 형태가 나오기까지 많은 시행착오가 있었다. 이번 강좌에 설명이 부족했다면 실제 www.lgdacom.net 사이트를 보시고 나름대로 응용하여 만들어 보시길 바란다. Dacom.net이 기업홍보사이트라면 고객 서비스를 위한 http://hi.lgdacom.net 사이트 또한 이 쉐이프를 이용한 레이아웃을 기본 형태로 제작하였다. 로고를 활용하여 세련된 레이아웃을 만드는 것이 주된 목적이므로 조금씩 변형하며 형태를 다듬어가다 보면 여러 가지 느낌의 모습들이 나올 것으로 예상된다
