Adobe Stock 이미지를 CSS와 결합하여 매력적인 웹 그래픽 제작

Adobe Stock에서 애니메이션에 사용할 멋진 이미지를 찾습니다. Adobe Stock에서 사진 콘텐츠를 설명하는 키워드 등 다양한 기준별로 검색할 수 있습니다.

원하는 사진을 찾고 미리 보기를 다운로드하거나 Creative Cloud 라이브러리에 추가합니다.

저녁 별로 가득한 깨끗한 하늘 사진을 찾고 저장합니다.

Photoshop에서 빠른 선택 툴과 레이어 마스크를 함께 사용하여 도시 스카이라인 사진에서 하늘을 제거합니다. 파일을 투명한 PNG 파일로 저장하여 투명도를 유지합니다.

밤 하늘을 배경으로 빛나는 도시 빛을 시뮬레이션하기 위해 도시 뒤에 투명한 그레이디언트를 추가합니다.

저녁 하늘에 마스크를 적용한 다음에는 간편한 내보내기 형식 옵션을 사용하여 PNG 파일을 만듭니다. 내보내기 대화 상자에서 투명도 옵션을 사용하여 이미지의 투명도를 유지합니다.

Photoshop에서 캔버스를 확장하여 별 사진을 가장자리가 보이지 않게 회전할 수 있을 정도로 크게 만듭니다. 복제 도장 툴을 사용하여 원본 이미지에서 샘플링한 별로 캔버스를 채웁니다.

#stars CSS 규칙에 애니메이션 속성을 추가하여 몇 가지 값을 정의합니다. 지속 시간은 210초로, 애니메이션 스타일은 선형으로, 반복 제한은 무제한으로 설정하여 별이 천천히 움직이도록 합니다.

Adobe Stock을 CSS와 결합하여 웹 사이트에 사용할 매력적인 애니메이션을 만들어 보시기 바랍니다.

Adobe Stock의 선별된 컬렉션에서 향후 프로젝트에 활용할 이미지를 찾아보십시오.