포토샵에서 글꼴과 레이아웃에 유리 효과 만들기

유리 효과는 당신의 타이포그래피와 레이아웃에 우아함과 깊이를 더해줍니다. 투명하고 반사하는 하이라이트로 인해 당신의 디자인에 현대적이고 매혹적인 요소를 불어넣습니다. 로고, 제목 또는 창의적인 구성물에 대한 이 효과는 확실히 모든 눈길을 사로잡을 것입니다. 이 튜토리얼에서는 텍스트나 레이아웃 요소에 사용할 수 있는 실제 유리 효과를 Photoshop으로 어떻게 만드는지 단계별로 안내합니다. 시작해보고 당신의 디자인을 더욱 극대화해보세요!

첫 번째 유리 효과는 배경 이미지에서 흘러나오거나 뚫렸다는 느낌을 주어 배경과 어우러지도록 보일 것입니다.



두 번째 유리 효과는 배경과 융합되지 않고 올려져 있어서 약간 탁하거나 약간 우유 같은 외관을 보일 것입니다.

이 튜토리얼에 사용된 이미지 출처: archaeopteryx_stocks

1. 부분: 정적 유리 효과 텍스트 작성

첫 번째 유리 효과 텍스트는 순수한 유리처럼 약간 유동적으로 보일 것입니다. 이는 배경에서 약간 뚫렸다는 이미지를 줄 것입니다.

단계 1: 새 문서 만들기

저는 1600x1200 px 크기의 새 문서를 Ctrl+N으로 만듭니다. 문서 크기에 따라 채우기 옵션과 필터 설정이 다를 수 있습니다.

단계 2: 배경 이미지 선택

이 효과에 최적인 배경 이미지는 유리 효과를 통해 문자의 굴절이 잘 보일 수 있도록 상세한 이미지를 선택하는 것입니다. 구름 이미지와 같은 것은 안 좋습니다. 저는 꽃 이미지를 선택했는데, 거기에 꽃의 명확한 구조가 보입니다.

단계 3: 텍스트 배치

둥근 유리 효과를 얻기 위해서는 이미 선택한 글꼴이 이미 둥글게 가지고 있으면 유리하기가 유리합니다. 저는 640포인트로 'PSD'라는 글자를 검정색으로 입력했습니다.

단계 4: 광선 굴절을 위한 왜곡 매트릭스 레이어 생성

텍스트 레이어의 Alt를 눌러 텍스트를 선택합니다. Ctrl+Alt+R을 사용하여 가장자리 개선 대화 상자를 열고 약 15픽셀의 둥글게 함과 부드러운 가장자리를 설정합니다. 둥글게 함은 글꼴의 삐죽한 부분은 둥글지만, 글자 자체 - 즉 글꼴의 굵은 선 - 가 상당히 고르지 않기 때문에 중요합니다. 부드러운 가장자리는 유리 필터와 결합할 때 변환 효과를 부드럽게 만들기 위한 것입니다.

Ctrl+Shift+Alt+N을 사용하여 흰색으로 채운 새 레이어를 만듭니다. 흰색으로 채우는 가장 빠른 방법은 도구 모음에서 기본 색상을 D로 설정하고, 채우기에 전경색을 Ctrl+Backspace로 사용하는 것입니다. 선택 영역은 흰색으로 채워집니다!

Ctrl+D를 사용하여 선택을 해제합니다. 새 레이어를 만들고, 현재 흰색 글자 레이어 아래에 위치하도록 - 레이어 조작 창에서 새 레이어 아이콘을 Ctrl하고 클릭하여 현재 레이어 아래에 새 레이어를 생성합니다. - 검정색으로 채웁니다. 도구 모음에 기본색상이 설정된 경우, 전경색으로 채우기는 Alt+Backspace를 사용하여 가장 빠릅니다.

나머지 모든 레이어는 한 레이어로 줄여야 합니다. 이를 위해 레이어를 선택하고 Ctrl+E 단축키를 사용합니다. 남은 레이어가 배경 레이어인지 확인하는 것이 중요합니다. 이후 필터를 통과하기 때문에 뒷 배경 레이어로 줄여져야 하는데, 이렇게 함으로써 유리 필터를 통한 굴절 효과를 보다 원하는 대로 얻을 수 있습니다.

레이어>새로 만들기>배경에서 레이어 생성을 통해 투명 레이어를 배경 레이어로 변환할 수 있습니다.

이제 원본 이름으로 PSD 파일로 저장합니다. Matrix-01-Original.psd입니다.

단계 5: 유리 구조와 사상 필터 적용

원본 작업 파일이 다시 나타날 때까지 Alt+Z를 누릅니다. 이제 불필요한 Matrix 구조 레이어를 삭제하고 PSD 문서로 작업파일을 저장하면 됩니다.

그 후 배경 레이어를 선택합니다. 배경 레이어가 아직 스마트 객체가 아니라면 레이어 조작 창에서 우클릭을 하여 스마트 객체로 변환할 수 있습니다. 스마트 필터의 장점은 언제든지 손실 없이 조정할 수 있다는 것입니다. 레이어가 스마트 객체로 변환된 후 스마트 필터를 적용할 수 있습니다.

필터>왜곡 필터>유리 메뉴를 통해 유리 필터를 호출합니다. 왜곡을 20, 평활화를 15로 선택합니다.

이제 구조 가이드로 나의 행렬을 가지고 와야 합니다. 이를 위해 구조 메뉴>구조 불러오기를 호출합니다. 열리는 브라우저에서 이전에 저장한 행렬 PSD 파일을 선택합니다. 이제 미리보기에서 글자 대신 희미한 유리 효과가 나타납니다.

현재 효과는 다음과 같습니다:

단계 6: 텍스트 레이어 다시 활성화하기

처음에 생성한 블랙 텍스트 레이어를 활성화합니다.

텍스트 레이어를 스마트 객체로 변환하는 것이 유용합니다. 텍스트 자체는 원래 스마트 객체 (PSB 파일)에 보호되며, 추가적인 편집은 비파괴 방식으로 수행됩니다.

단계 7: 텍스트 효과 만들기

텍스트 레이어의 적용 옵션에서 다음 값과 함께 부드럽게 조각낸 약간 평평한 가장자리를 설정할 수 있습니다.

• 깊이: 400 퍼센트
• 크기: 8 픽셀
• 흐림: 4 픽셀
• 각도: 120도
• 높이: 30도
• 깊이 모드: 곱하기로 40%의 불투명도 및 70%의 밝기 (B)로 설정됨
  
  
  
  
  
  레이어의 채우기 방법은 스크린으로 설정됩니다.
  
  

이 튜토리얼에서는 빈도 있는 밝기 값에 대해 말할 것입니다. 무엇에 대해 이야기하는지 간단히 설명하겠습니다. 포토샵의 색상 선택기는 Hue (색상), Saturation (채도) 및 Brightness (밝기)의 세 가지 값이 있는 HSB 모델과 가장 유사합니다. 색상 (Hue)은 오른쪽의 색상 막대이며, 채도 (Saturation)는 색상 선택에서 좌우로 움직여 설정하며, 밝기 (Brightness)는 상하로 움직입니다. 여기서 밝기 값을 언급할 때는 색상이나 채도와 관련이 없는 HSB 모델의 B-값만을 말합니다.

깊이 모드는 70 %의 밝기로 설정되었습니다. 따라서 색상 선택에서 이미지가 다음과 같이 나타납니다.

효과는 지금까지 다음과 같습니다:

단계 8: 예술 필터 플라스틱 시트 사용하기

효과를 강화하기 위해 예술 필터를 적용할 것입니다. 먼저 텍스트 레이어를 스마트 객체로 변환하여 여전히 조명 옵션 변경 등이 손실 없이 가능하도록 합니다.

예술 필터의 플라스틱 시트에서 가장 높은 조절 설정을 선택합니다:

- 광채: 20

- 세부 사항: 15

- 평탄화: 15

효과가 훨씬 유리하게 변하며 유리 구슬과 비슷해 보입니다.

단계 9: 필터 다시 적용하기

효과를 더 강조하기 위해 마지막 필터를 다시 적용하기 위해 간단히 Ctrl+F를 선택합니다.

레이어 패널에서 스마트 객체 에 두 번째로 플라스틱 시트 스마트 필터가 표시되며 이제 필요에 따라 각각 수정할 수 있습니다.

단계 10: 내부 그림자 및 드롭 그림자 추가하기

마지막으로 레이어에 약간의 내부 그림자를 85%의 밝기로 추가하여 글자가 약간 테두리가 있는 것처럼 만듭니다.

레이어의 조명 옵션을 호출하고 그림자의 밝기를 색상 선택을 통해 설정합니다. 다음 설정도 추가합니다:

• 불투명도: 70 퍼센트
• 거리: 1 픽셀
• 크기: 1 픽셀
• 반원 형태의 윤곽선
  
  내부 그림자는 한 쪽에서 계산되는 조명 모드이므로 반대편에서 동일한 효과를 내는 드롭 그림자를 만들어야 합니다.
  
  설정은 내부 그림자와 동일합니다.
  
  
  
  

단계 11: 다양한 사항

이 효과는 매우 쉽게 변수화할 수 있습니다. 예를 들어 조명 옵션에서 여러 모드를 선택하고 효과를 어떻게 변화시키는지 살펴볼 수 있습니다. 또한 텍스트 레이어를 복제하고 다양한 레이어 모드에서 계산할 수도 있습니다.

텍스트 레이어에 추가적인 필터를 항상 적용할 수 있습니다. 따라서 거의 무한한 변화 가능성을 가질 수 있습니다.

이 경우 배경에서 유리 효과로의 부드러운 전환을 상상할 수 있습니다. 따라서 텍스트의 글자를 다시 Ctrl와 클릭으로 선택한 다음 킹지향 개선 대화 상자를 호출합니다. 선택 영역에 라운드 및 약간의 부드러운 가장자리가 추가되어 텍스트에서 배경으로의 전환을 더 부드럽게 만듭니다.

제 단축키 Ctrl+Shift+Alt+N을(를) 사용하여 새 레이어를 생성하고 그 레이어를 검은색으로 채웁니다; 활성화된 표준 색상을 사용하면서 도구 모음에서 Alt+백스페이스 단축키를 사용합니다.

Ctrl+D로 선택을 해제합니다. 이제 Alt를 사용하여 간단히 기존 텍스트 레이어의 채우기 옵션과 스마트 필터를 새 레이어로 끌어옵니다. 채우기 옵션과 스마트 필터가 복제됩니다. 이 경우 음영과 내부 음영을 비활성화합니다. 마찬가지로 원래 텍스트 레이어를 비활성화하고 새 텍스트 레이어를 끼워넣기 모드로 설정할 수 있습니다.

내 최종 효과는 더 부드럽고 유동적인 전환이 됩니다. 여기에서 편평한 가장자리와 농구 기술에 단단히 조각을 적용해 볼 수도 있습니다.





이 유리 효과의 단점은 텍스트의 위치를 쉽게 변경할 수 없다는 것입니다. 위치를 변경하면 해당 매트릭스도 변경해야 합니다. 그러나 텍스트의 위치 변경에 맞춰 광항 사상이 언제든 새로운 텍스트 위치에 맞게 자동으로 조정되도록 하는 방법이 있습니다.

2. 단계: 동적 유리 효과 텍스트 생성

동적 유리 효과 텍스트는 언제든지 글자를 텍스트적으로 크기별로 변경하거나 문서 전체에서 텍스트를 이동할 수 있는 특징을 가집니다. 광항 사상은 언제나 유지되며 새로운 배경에 자동으로 맞춰집니다.

예제 텍스트는 첫 번째 예제처럼 완전히 유리처럼 느껴지지 않고 조금 무딘 유리처럼 밀려 백그라운드 위에 올려집니다. 이 튜토리얼에서는 서로 다른 유리 효과 텍스트를 만드는 두 가지 가능성을 보여줍니다.

단계 1: 새 문서 생성

크기가 1600x1200px인 문서를 Ctrl+N을(를) 사용하여 생성합니다. 문서 크기에 따라 채우기 옵션 및 필터 설정이 달라질 수 있습니다.

단계 2: 배경 이미지 선택

이전 예제와 마찬가지로 꽃 이미지를 선택합니다. 꽃의 명확한 구조가 보이는 이미지입니다.

단계 3: 텍스트 배치

둥근 유리 효과를 얻으려면 선택한 글꼴 자체에 이미 둥근 부분이 있으면 유리합니다. 임의의 색상으로 640 포인트로 PSD란 글자를 문서에 작성합니다.

단계 4: 영역을 0%로 줄임

영역 조절기를 0%로 줄입니다. 투명도와 영역의 차이는 이 튜토리얼에서 특히 두드러집니다. 투명도 조절기를 통해 레이어 내용 및 레이어 스타일을 투명하게 만들 수 있지만 영역 조절기를 통해 레이어 내용에만 영향을 줄 수 있습니다. 선택한 레이어 스타일은 보입니다.

아직 채우기 옵션을 적용하지 않은 상황에서 텍스트 레이어의 현재 보기는 완전히 가려져 있습니다.

단계 5: 유리 효과 설정

여러 채우기 옵션을 사용하여 글자에 유리한 효과를 줄 수 있습니다. 중요한 점은 문서 및 글자 크기에 따라 채우기 옵션을 조정해야 합니다.

그림자:

그림자는 다음 옵션을 사용하여 45% 밝기를 가집니다:

• 곱하기로 채우기
• 60% 투명도
• 12 픽셀 거리
• 10 픽셀 크기
• 반원 형태의 부드러운 윤곽
  
  
  
  

그림자 효과:

내부 그림자:

내부 그림자는 다음 옵션을 사용하여 90% 밝기를 가집니다:

• 곱하기로 채우기
• 85% 투명도
• 15 픽셀 거리
• 밑+조각 30%
• 크기: 57 픽셀
• 선형 모양의 부드러운 윤곽
  
  
  
  

외부 광택:

외부 광택은 20% 밝기를 가집니다:

• 매꿀 방법 부정적 곱하기
• 불투명도: 60 퍼센트
• 크기 10 픽셀
• 반원형, 매끈한 윤곽에서 70% 범위 안

평탄한 가장자리와 레리프:

안쪽 평탄한 가장자리는 꼼히 조각하였다. 변화로는 둥글게도 가능!

다음 옵션 중 선택:

• 깊이: 100 퍼센트
• 크기: 20 픽셀
• 흐리게 하기: 8 픽셀
• 각도 120도
• 높이 70도
  
  -60% 밝기의 뎁스 모드와 40% 불투명도에서 처리된 그림자

현재 설정으로 완성된 효과:

광채:

광채는 70% 밝기를 가지며 다음 옵션이 있음:

• 매꿀 방법 색상간섭
• 불투명도: 40 퍼센트
  
  -각도 100도
• 간격 100 픽셀
• 크기 100 픽셀
• 선형, 매끈한 윤곽
  
  글레이스 스타일의 문자가 완성되었습니다. 채우기 옵션을 바꾼다면 유령비 효과를 매우 섬세하게 개인 맞춤할 수 있습니다.
  
  

나는 이미지 스타일에 그레이스케일을 사용하여 글래스 텍스트를 다른 배경 이미지에 쉽게 적용할 수 있도록 했다. 그리고 다시 채우기 옵션에 있어서 새 이미지 배경에 맞추기 위해 색상을 새 이미지 배경에 맞춘다는 귀찮은 과정이 필요하지 않다. 색상 간섭 메뉴에서 유령비 효과를 선택해서 이미 충분한 색상적인 활력을 줄 수 있다.

단계 6: 광선굴절을 위한 행렬 레이어와 왜곡 생성

텍스트 레이어를 Ctrl+J 단축키로 복제한다. Ctrl을 누르고 새로운 레이어 아이콘을 레이어 패널에서 클릭하여 복제한 텍스트 레이어 아래에 새 레이어를 만들어야 한다. 이 레이어에는 60% 밝기로 회색으로 채워져야 한다.

그림자 내부를 제외한 모든 채우기 옵션을 텍스트 레이어에서 비활성화한다. 그림자 내부는 여전히 채우기 옵션에서 조정할 수 있다. 거기서 내 회색의 밝기 값을 50% 정도로 줄여 내부 그림자를 약간 강하게 만든다.

모든 레이어를 선택하고 Ctrl+E 단축키로 병합한다. 병합 후에는 필요한 뒷배경 레이어로 되어 있어야 한다. 이렇게 되어야만 뒤이어 사용하는 글라스 필터가 기반이 되는 행렬 레이어를 필요로 하기 때문이다. 행렬 레이어가 뒤배경 레이어로 수정되지 않을 경우, 글라스 필터를 통해 광선굴절이 원하는대로 작동하지 않을 수 있다. 레이어>새로운>레이어에서 배경을 생성함을 통해 투명 레이어를 배경 레이어로 변경할 수 있다.

단계 7: 행렬 구조를 사용하여 글라스 필터 적용

Ctrl+Alt+Z 단축키로 행렬을 생성하기 전의 원래의 편집 상태로 돌아간다.

Ctrl+J로 처음에 배치한 배경 이미지를 복사한다.

복제본을 열고 왜곡 필터를 선택한다. 구조에는 행렬 레이어를 선택한다.

조절기를 통해 왜곡 효과를 마음대로 조절할 수 있다. 나는 다음을 선택했다:

• 왜곡: 18
• 부드러워짐: 12
  
  확인을 클릭한다. 내 텍스트가 있는 부분에는 이제 글라스가 되어 있다. 광선 굴절을 통해 글라스 효과가 거의 실제와 같이 보인다.
  
  

효과가 텍스트 영역에만 표시되고 굴절된 테두리가 발생하지 않도록 하기 위해 Ctrl을 누르고 레이어 패널에서 계층 미니어처를 클릭하여 텍스트를 선택하고 내 글라스 필터에 스마트 필터 마스크로 선택을 추가한다. 그렇게 하면 이펙트가 원하는 영역에만 적용되도록 바로 잘려진다.

효과가 완성되었다. 행렬을 통한 방법이 복잡하다고 생각되는 사람은 진동 필터를 사용할 수 있다. 이펙트는 완전히 최적이라 할 수는 없지만, 광선 굴절을 향한 현실적인 경험을 제공해 줄 것이다.

텍스트를 이동하려고 할 때, 복제된 백그라운드 레이어의 광학효과가 동반되지 않는 것을 알 수 있습니다. 이것은 지금 텍스트를 최종 배치하기 위해 새로운 행렬을 다시 조정해야 하는 번거로움을 느끼게 합니다.

단계 8: 표준 행렬 생성

이 효과용 표준 행렬을 처음부터 생성하는 것이 더 나은데, 여기에는 텍스트의 모든 배치가 잘 작용하는 모든 위치가 포함됩니다.

matrix-02-original.psd 를 다시 불러와서 텍스트를 여러 번 복제하고 복제본을 문서에 겹쳐 배치합니다. PSD 파일이 백그라운드 레이어만으로 구성되어 있기 때문에 클론 스탬프로 가장 빠르게 할 수 있습니다.





이 예에서는 PSD 텍스트가 간단히 복사되었습니다. 특정 구조를 표준 행렬에 그릴 수 있으며, 이는 나중에 계산되어 텍스트가 보이지 않도록 처리됩니다. 그럼 이후 유리 처리시에도 어떠한 문자도 보이지 않도록 보장됩니다.

문서를 matrix-02-standard.psd로 저장합니다.

단계 9: 표준 행렬로 유리 필터 적용

Glas 왜곡 필터가 스마트 필터로 적용되었기 때문에 해당 필터를 다시 클릭하여 호출합니다. 필터 메뉴에서 새로운 matrix-02-standard.psd 파일로 구조 설정을 업데이트합니다.

단계 10: 레이어 구조 다시 정렬

스마트 필터 마스크를 지금 다시 삭제할 수 있습니다. 텍스트를 문서에서 이동하려면 마스크가 너무 정적입니다. 새로운 필터 효과가 있는 레이어는 레이어 패널의 최하단에 배치합니다. 그 위에는 원래의 백그라운드 이미지가 있습니다.

필터 효과가 있는 레이어를 투명에서 백그라운드 레이어로 변환해줘해야합니다. 이 작업은 레이어>새로 만들기>레이어에서 백그라운드로 메뉴를 통해 수행합니다.

단계 11: 클리핑 기법 적용

새 레이어 구조 때문에 효과가 더 이상 보이지 않습니다. 다음 단계에서는 광학 효과를 이미지로 가져옵니다.

텍스트 레이어의 전체 옵션을 호출하고 심화된 색칠 옵션에서 강한 클리핑을 활성화합니다.

이제 이 문서의 투명 부분을 텍스트 모양을 중심으로 텍스트 레이어와 백그라운드 레이어 사이의 모든 투명도가 자동으로 제외됩니다. 그것은 문서에서 구멍을 뚫은 것처럼 흥미로워요. 문서에서 투명 부분은 정확히 표시됩니다. 백그라운드 레이어는 투명 부분을 알 수 없기 때문에 항상 해당 위치에서 적용된 백그라운드 필터가 표시됩니다.

이렇게 하면 텍스트를 어디든지 쉽게 이동할 수 있으며 광학 효과가 문자에 유지됩니다. 이전에 복제된 백그라운드 레이어는 광학 효과없이 표시됩니다.

단계 12: 클리핑 대체안: 클리핑 마스크

클리핑 기술은 약간 덜 알려져 있으며 그 효과의 변화에도 조금 형식적입니다. 이미 알려지고 있고 변형에 융통성이 있는 좋은 대안이 있습니다: 일반 클리핑 마스크.

단축키를 사용하여 Ctrl+Alt+Z로 가서 Glas 스마트 필터와 함께 다시 스마트 객체로 돌아가는 Hintergrundebene를 다시 받을 수 있습니다. 텍스트 레이어의 클리핑은 비활성화됩니다. 이렇게 복원된 스마트 객체 즉 광학 효과 레이어를 텍스트 레이어 위에 배치합니다.

레이어 패널에서 텍스트와 광학효과 레이어 사이에서 클릭하여 클리핑 마스크를 만듭니다. Ctrl+Alt+G 단축키도 사용할 수 있습니다.

클리핑 마스크를 사용하면 광학 효과가 텍스트 레이어의 모양에 맞게 잘 표시됩니다.

효과가 표시되기 시작하는 것은 밀림 조절기를 0 %에서 100 %로 다시 설정하는 것입니다. 클리핑 마스크를 통해 가는 길의 장점은 이곳에서 백그라운드 레이어가 필요하지 않으며, 실제로 레이어를 스마트 객체로 사용하여 스마트 필터와 효과를 손실없이 변화시키는 가능성도 있습니다.

단계 13: 변형

문자 텍스트의 변형은 다른 글꼴 및 전체 옵션을 통해 쉽게 가능합니다.

광학 효과는 왜곡 필터 Glas를 통해 변형 가능하며, 예를 들어 크레이셀크 또는 오션 웨이브도 효과적으로 적용할 수 있습니다. 광학 효과가 너무 약하면 필터를 텍스트 레이어에 Ctrl+F로 다시 적용합니다.

효과가 전체 옵션에 색상 중립적으로 적용된 경우 - 즉, 회색 값과 빛 조절 채우기 방식으로 주로 작업했으며 빛 아래에서 - 매우 쉽게 새로운 배경을 텍스트에 배치할 수 있습니다. 결과적으로 새로운 배경을 위해 행렬을 한 번만 적용해 줍니다.

이 예에서는 새로운 백그라운드 이미지를 배치하고 이를 복제하였습니다. 이 복제본은 텍스트 레이어에 클리핑 마스크로 사용됩니다. Alt를 사용하여 기존 광학 효과 레이어의 스마트 필터를 새로운 복제된 배경에 적용합니다. 이렇게 하면 다른 배경에서 효과를 빠르고 손쉽게 조정할 수 있습니다.

다른 변형 가능한 옵션에는 광학굴절을 약간 부드럽게 또는 날카롭게 표현하는 것이 있습니다. 표준 매트릭스에서 강한 구조를 말끔하게 해주는 데 유용합니다. 이미지에 2 픽셀의 픽셀 픽셀 흐림 값이면 충분합니다.

흐림 처리 대신 하이패스 스마트 필터를 통한 날카로운 처리가 매우 효과적입니다. 스마트 필터 옵션에서 혼합모드를 콜라주로 설정하겠습니다! 이를 통해 광학굴절에 좀 더 선명함과 대조를 부여하여 광학굴절 효과가 더 현실적으로 표현됩니다.

마지막으로 하이패스 필터가 적용된 원래 이미지: