- WEB 썸네일형 리스트형 어도비 포토샵 CC 2024 신기능 생성형 채우기 이용해서 크롭 늘리기! Adobe Photoshop Generative Expand어도비 포토샵 CC 2024 신기능 생성형 채우기 이용해서 크롭 늘리기! 보통 크롭툴 (Crop tool) 은 뭔가를 잘라낼 때 사용하는 툴이지요. 어도비 CC 2024 포토샵 업데이트가 되면서 크롭툴을 이용해 이미지 사이즈를 늘리면! 생성형 채우기를 통해 자연스럽게 늘릴 수 있답니다. 불과 CC 2023이나 2024년 초에도 잘 되지 않던 기능이에요. 그냥 크롭툴이나 캔버스 사이즈 조절을 통해 여백이 늘어나면.. 컨텐츠-어웨어 필을 통해서 채우기를 했었는데 정말 이상하긴 했었거든요. 특히 웹배너 가로 1920에 세로 600짜리 기이인~ 배너 만들땐 이미지 맞는거 하나도 없고. ㅜㅜ근데 이제 살았습니다. 작업시간 +200시간 단축 !@!자 일단.. 어도비 포토샵으로 사진에 생성형 이미지 합성하기! #포토샵 #이미지합성 어도비 포토샵으로 사진에 생성형 이미지 합성하기! 하루가 다르게 발전하고있는 어도비 포토샵 생성형 AI 이미지 합성하기 ! 전체적인 이미지 만들때에는 어도비 파이어플라이를 사용하는것이 좋은데, 배경에 일부 합성을 하고 싶을 경우에는 생성형 이미지로 FILL 채워넣는것이 유리하다. 오늘도 언스플래쉬에서 예제로 사용할 이미지를 하나 가져오자. 예제용 사진: Unsplash의Tim Stief, 포토샵을 켜고 예제용 이미지를 불러온다. 생성형 이미지를 넣고싶은 부분을 선택하면 Generative Fill 명령어를 넣을 수 있는 창이 바로 나온다. 넣고싶은 이미지를 간단하게 적고 (한글로 적으면 구글 번역서비스를 이용함) , Generate 버튼을 누른다. 맘에드는 이미지가 나오지 않을 경우, Generat.. 고도몰Pro SSL 연장신청하기 (PC/MOBILE) HTTPS적용 고도몰Pro SSL 연장신청하기 (PC/MOBILE) HTTPS적용고도몰은 1년에 1번, 1년단위로 SSL 연장이 가능합니다! 근데 이게 서비스가 좀 이상해서.. (통합이 안되어있다고 해야하나;;) 쇼핑몰에서 연장을 눌렀을 때, PC버전이랑 모바일버전 연결되는 신청페이지가 다릅니다 😂😂 고도몰 > 기본설정 > 보안서버관리 [PC쇼핑몰/모바일쇼핑몰] 을 눌렀을 때 위와 같은 화면이 나오는데요, 여기서 SSL 보안신청을 눌러서 들어가기. 이런 페이지가 나오고, 서비스 신청을 누르면.. 요런 페이지가 나오며, 이건 진짜정말 신규신청 하는 페이지 입니다. (헤데이크... 아이고뒷목)그러면 대체 왜 저페이지를 연결해둔걸까요. 😡 다시 SSL보안서버 신청을 눌러 나오는 페이지에서 (NHN커머스) http.. 어도비 포토샵 자동합성모드 오토블랜딩 어도비 포토샵 자동합성모드 오토블랜딩 오토-블랜드-레이어 Auto-Blend Layers... 요즘 포토샵이 너무 좋아져서 클릭 한번으로 자동 누끼따기도 되고, 생성형 이미지로 하늘에 비행기 띄우는것도 가능하답니다! 오늘은 구름에 비행기합성을 먼저 알아보고, 내일은 AI 이미지 생성을 배워볼게요. 이미지들은 언스플래쉬(@UNSPLASH)에서 가져왔습니다!출처는 아래 >> 하늘 사진: Unsplash의Taylor Van Riper비행기 사진: Unsplash의John McArthur 포토샵에서 이미지 두개를 열어줍니다!저는 보기 쉽게 옆으로 두개 나란히 띄웠어요. 비행기 사진에서 비행기를 자동선택툴(W)로 눌러 선택해줍니다. 비행기 주변도 자연스럽게 합성하기 위해 EXPAND를 해줄게요. 비행.. 어도비 포토샵 CC 포토샵 AI 생성형 명령어창 (작업창/입력창) 띄우기 어도비 포토샵 CC 포토샵 AI 생성형 명령어창 (작업창/입력창) 띄우기 가끔 작업을 하다 보면 입력창이 귀찮아서 꺼버리는 경우가 생긴다. 그럴 때 자주사용하는 확장생성작업을 사용하려 해도 ㅜㅜ 명령어 입력창이 없어서 어떻게 처리하지 못한다는거.. 생성형 작업을 하기 전에 미리 띄워두자 😊 Windows > 제일 아랫쪽에 Contextual Task Bar 를 체크하면 우상단위에 원하던 생성형 명령 프롬프트가 나온다. 추가로 포토샵 내에서 생성형 이미지 제작하는 방법도 있다! 좌측에 있는 Generate Image 아이콘을 누른 뒤, 명령어를 입력하고 Generate 버튼을 누르면.. 포토샵 내에서 파이어플라이처럼 이미지 생성이 가능하다. 혼공 자바스크립트 스터디그룹 6주차 Chapter 07-08 문서 객체 조작하기 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 6주차 #혼공학습단 #혼공 #혼공JS6주차 (8/15~8/21)진도범위 : Chapter 07-08문서 객체 조작하기이벤트 활용구문 오류와 예외예외 처리 고급1. 기본미션 : p.315의 을 실행한 후 출력되는 고양이 이미지 캡쳐하기.http://placekitten.com/width/heightwidth를 (index0+1)*100 = 100px (index1+1)*100 = 200px(index2+1)*100 = 300px(index3+1)*100 = 400px(index4+1)*100 = 500px 이 되게 만들어서, src 속성에 값을 넣음! height 값은 고정 250! 문서의 객체 속성 조작하기메소드 이름설명문서 객체.setAttribute(속성 이름,값)특정.. 혼공 자바스크립트 스터디그룹 5주차 Chapter 06 미션 객체,속성,메소드가 뭘까? #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 5주차 #혼공학습단 #혼공 #혼공JS5주차 (8/8~8/14)진도범위 : Chapter 06 객체객체의 기본 객체의 속성과 메소드 사용하기객체와 배열 고급1. 기본미션. 객체, 속성, 메소드가 무엇인지 설명하기속성(Property)name과 value로 표현되는 속성.메소드(Method)속성 중에서 동작(함수)인 것. 객체(Object)실제로 존재하는 사물. name과 value로 구성된 속성을 가진 기본 데이터 타입. 대체 객체가 뭔데! 메소드는 뭔데! 이랬던 시절이 있는데 그땐 그냥 외웠다. 뜻은 모르고 그냥 이정도를 객체라고 하는구나.. 이젠 알긴 아는데 어떻게 설명해야할지 모르겠다.. 😂 배열과 같이 객체도 여러가지 자료를 한번에 다룰 수 있는 특별한 자료형// 배.. 혼공 자바스크립트 스터디그룹 4주차 Chapter 05 미션 #혼공학습단 #혼공 #혼공JS 함수만들기 혼공 자바스크립트 스터디그룹 4주차 #혼공학습단 #혼공 #혼공JS4주차 (7/25~7/31)진도범위 : Chapter 05. 함수Chapter 05. 함수익명함수선언적함수매개변수콜백함수화살표함수타이머함수즉시호출함수1. 기본 미션 : p.202 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷기본적인 함수 예제 👉 윤년을 확인하는 함수 만들기.윤년은 2월 29일4로 나누어 떨어지는 해는 윤년이다. 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.하지만 400으로 나누어 떨어지는 해는 윤년이다. 윤년의 특징을 조건부 연산자를 사용해 isLeapYear()라는 이름의 함수로 구현.자바스크립트에서true 또는 false를 리턴하는 함수는 is★★★이라는 이름으로 만드는 편. 2. 2022년은 .. 혼공 자바스크립트 스터디그룹 3주차 Chapter 04 미션 #혼공학습단 #혼공 #혼공JS 비파괴적 처리 / 파괴적 처리 혼공 자바스크립트 스터디그룹 3주차 #혼공학습단 #혼공 #혼공JS3주차 (7/18~7/24)진도범위 : Chapter 04Chapter 04. 배열배열. 요소 추가하기자료의 비파괴와 파괴반복문for infor offorwhilecontinue중첩 반복문 사용하기 예제들1. 기본 미션 : p.169 자료의 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기1. 비파괴적 처리- 장점 : 원본 데이터를 보호하며 작업할 수 있다. 하나의 원본 데이터를 여러곳에 사용할 수 있다. - 단점 : 메모리를 많이 차지한다.2. 파괴적 처리- 장점 : 메모리를 절약할 수 있다. - 단점 : 원본 데이터가 변경되기 때문에 두가지 중 뭐가 더 좋다고 할 수는 없다. 파괴적 처리라고 무조건 틀린것은 아니다. 메모리가 여유로워.. 혼공 자바스크립트 스터디그룹 2주차 Chapter 03 미션 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 2주차 #혼공학습단 #혼공 #혼공JS2주차 (7/11~7/17)진도범위 : Chapter 03Chapter 03. 조건문if 조건문if else 조건문중첩 조건문if else if 조건문switch 조건문조건부 연산자짧은 조건문1. 기본 미션 : p.139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷문제 정답은 &&vs code에서 어떻게 실행해야 하는지 모르겠다 🤔 크롬으로 열어보자. x 값을 15로 넣어 콘솔창 확인하니 조건에 맞다고 한다 !! x 값을 11~19가 아닌 다른 값을 넣으면 console.log에 아무것도 나오지 않는다. if 뒤에 else{ console.log('조건에 맞지 않습니다')} 를 넣어 conso.. 혼공 자바스크립트 스터디그룹 1주차 Chapter 01 ~ 02 미션 #혼공학습단 #혼공 #혼공JS 혼공 자바스크립트 스터디그룹 1주차 #혼공학습단 #혼공 #혼공JS 1주차 (7/4~7/10) 진도범위 : Chapter 01 ~ 02 자바스크립트란 웹 브라우저에서 작동하는 프로그래밍 언어입니다. ECMAScript란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭입니다. 웹애플리케이션이란 기존의 웹페이지보다 많은 기능을 구현한 웹 페이지를 말합니다. 개발환경 설치와 코드 실행 텍스트에디터 : 비주얼스튜디오 코드 / 코드 실행기 : 구글 크롬 웹 브라우저 1. 기본 미션 : p.54의 에서 'Hello World' 출력하기 (p54~) 1단계 : HTML 페이지 생성하기 2단계 : HTML 페이지 작성하기 emmet으로 html:5 입력후 Tab 또는 Enter 눌러서 자동완성. 태그 내부에 태그.. 혼자 공부하는 자바스크립트 #혼공스 #혼공학습단8기 #커리큘럼정리 혼자 공부하는 자바스크립트 #혼공학습단 #혼공단 #혼공JS # 진도 기본 미션 선택 미션 1주차 Chapter 01 ~ 02 p.54의 에서 'Hello World' 출력하기 Chapter 01(01-1) 확인 문제 1번 상세하게 적고 인증샷 2주차 Chapter 03 p.139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷 p.152의 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기 3주차 Chapter 04 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기 4주차 Chapter 05 202쪽의 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷 p.240 확인 문제 1번 풀고, 풀이 과정 설.. 일러스트레이터 회색 박스 없애기 (+ 상단 메뉴아래 컨트롤러 표시하기) 일러스트레이터 회색 박스 없애기 (+ 상단 메뉴아래 컨트롤러 표시하기) 일러스트레이터에서 개체 이동시 생기는 회색 박스. 설정으로 간단하게 안보이게 할 수 있다. 회색 박스 없애기 : Edit → Preferences → Smart Guides... → Measurement Labels 체크해제 작업을 하려고 보니 어라? 상단 컨트롤러가 안보인다. 상단 메뉴아래 컨트롤러 표시하기 : Window → Control 클릭 하면 나온다 . 순식간에 해결. VS CODE에 깃허브 GitHub 프로젝트 연동하기 VS CODE에 깃허브 GitHub 프로젝트 연동하기 (깃 클론하기) 2021.08.30 기준. VS CODE 설치 GIT 설치 깃허브 사이트에서 프로젝트를 생성해 둔다. (퍼블릭/프라이빗 상관없음) 1. VS CODE를 열고, 좌측에서 Clone Repository 클릭. 2. Clone from GitHub 클릭. 3. 웹에 로그인 되어 있다면 바로 계속하기 누르면 되고, 아니면 로그인 필요. 4. 로그인 후 다시 VSCODE 열기. 5. 로그인 되면 내 레포지토리를 볼 수 있다. 원하는 작업 프로젝트 선택. 6. 복사해 올 시스템 폴더 선택(상위 폴더를 선택해야 한다.) 하위 프로젝트 폴더가 생기면서 모든 내용이 클론 됨. 7. 기존 창 or 새 창으로 열 것이냐 선택 8. 신뢰한다 선택. 소스 약.. Svelte 자바스크립트 웹 애플리케이션 개발 프레임워크 ( = 리액트. 뷰. 앵귤러 등) https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec svelte.dev 튜토리얼, REPL 이용해 스터디. node 윈도우 명령프롬프트(PowerShell)에서 리액트 프로젝트 시작하기 윈도우에서 리액트 프로젝트 시작하기 1. 시작표시줄의 검색 -> cmd (명령프롬프트) 실행 후 npm init react-app "프로젝트이름" 입력해서 프로젝트 생성. 2. cd hello-react(프로젝트이름) 으로 해당 폴더로 이동 후 npm start 리액트 서버 구동 3. 웹 브라우저에서 http://localhost:3000 입력 후 잘 구동되는지 확인. 리액트 + 리액트 네이티브 개발환경 준비하기 # 한빛미디어 '처음 배우는 리액트 네이티브' 교재 실습. hanbit.co.kr/store/books/look.php?p_code=B8811528616 처음 배우는 리액트 네이티브 단순히 UI 컴포넌트를 설명하는 이론서가 아니라, 실제로 간단한 모바일 앱을 만들면서 디버깅과 배포까지 빠르게 입문할 수 있는 책이다. hanbit.co.kr 1. Homebrew 설치. ( brew.sh/index_ko ) 2. watchman 설치하기 [$ brew install watchman ] 3. Node.js 설치하기 ( nodejs.org/en/ ) 4. yarn 설치 ( classic.yarnpkg.com/lang/en/ ) 5. nvm : node version manager 설치하기 ( github.com.. 무료 이미지 사이트 1. Unsplash (언스플래쉬) 고화질 무료 이미지 2. FreePik Vectors, 사진, PSD 등 여러 타입의 이미지 제공 일부 사용권 표시 / 로그인후 사용시 많은 다운로드 가능 3. Pixabay 사진, 일러스트, 백터, 비디오, 음악 제공 4. Flaticon 벡터아이콘 무료. SVG/EPS/PNG/PSD 선택 다운로드 가능 5. Videezy Footage & 4K 비디오 Free 6. Pexels 고화질 무료 스톡 사진.영상 저작권표시 불필요 7. Picjumbo 사진작가가 찍은 사진 8. VisualHunt 고해상도 사진 (색상검색 가능) VS CODE : EXTENSIONS 확장프로그램 1. D2 Coding font (프로그램은 아니고, 가독성 높이기 위해..) github.com/naver/d2codingfont naver/d2codingfont D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 2. Live Server 다이나믹 페이지 실시간 미리보기 3. Code Runner 코드 실행도우미. JavaScript : 불 자료형으로 변환 - Boolean() 함수 JavaScript : 불 자료형으로 변환 - Boolean() 함수 > Boolean(0) false > Boolean(NaN) false > Boolean("") false > Boolean(null) false > let 변수 undefined > Boolean(변수) false 0, NaN, "", null, undefined 자료형은 -> false로 변환됨. (암기!!) JavaScript 복합 대입 연산자 활용 JavaScript 복합 대입 연산자 활용 // 변수 선언 let list=''; // 연산자 사용 list += ''; list += 'list 1'; list += 'list 2'; list += ''; // 문서에 출력 document.write(list); Node.js 설치 (mac) Node js 홈페이지 접속 후, 원하는 버전으로 설치. (LTS : 장기지원버전). Current 짝수 버전도 나중에 장기지원버전이 될것이므로 설치해도 괜찮음. nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 패키지 파일 더블클릭 후 > 사용권 계약 동의하고 컴퓨터 비밀번호 입력 후 설치. 맥에서는 옵션 선택할것이 없다. 터미널 들어가서 설치된 node, npm 버전 확인 버전관리도구 nvm 설치 github.com/nvm-sh/nvm nvm-sh/nvm Node Version Manager - POSIX-compliant bash script to manage.. Node.js 설치 (windows) Node js 홈페이지 접속 후, 원하는 버전으로 설치. (LTS : 장기지원버전) nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치시 'Automatically install the neccessary tools. Note that this will also install Chocolatey. ...' 체크 후 설치 . Chocolatey 포함 여러 도구 추가 설치 체크인데, 필요없을경우 체크해제 해도 됨. 환경변수 설정 (windows) 바탕화면에 내컴퓨터가 없어서 이건 들어갈때마다 햇갈림. 윈도우 검색창에서 '고급 시스템 설정 보기' 검색해 들어가면, 시.. MySQL 설치 (Windows) / 초기설정 dev.mysql.com/downloads/ MySQL :: MySQL Community Downloads The world's most popular open source database dev.mysql.com 설치 제품군 선택 -> 멀티미디어콘텐츠제작전문가(2020) 실기 준비 / 합격후기 플래시때부터 하나 취득해놔야지 했던 멀티미디어 콘텐츠 제작전문가. 애프터이펙트로 실기 변경된다는 예고와 함께 다시 해보기로. 필기는 온라인에있는 문제은행만 보고 가도 충분하다. 기능사~산업기사 정도 수준의 문제. 시각디자인기사. 컬러리스트기사. 멀티미디어콘텐츠제작전문가. 웹디자인기능사. 컴퓨터그래픽스운용기능사. 전자출판기능사. 사진기능사까지 필기가 고만고만한 내용으로 출제되는것 같다. 실기도 플래시가 아니라 솔직히 말하면 쉬워졌다고 할 수 있다. 에프터이펙트만 사용해도 되고, 포토샵 일러스트 프리미어 사용할 줄 알면 조금 더 시간단축이 된다. 산업인력공단 시험은 퀄리티보다, 원하는 요청사항을 그대로 완수했는지가 중요하다. 문제에 대해 정확하게 파악하고 시간분배 하는것이 중요. 추가로 말하자면, 웹디/컴그.. Adobe AfterEffect : 에프터이펙트 정리 (for windows) NTSC : 미국. 일본. 한국 등 / PAL : 유럽 -----> 지금은 디지털 방송으로 HD RTX 그래픽카드 : 영상랜더링 빠름 파일 속성, Interpret, Footage - Alpha 확인. 8bpc -> 프로젝트 셋팅. 시간 ↔프레임 변경시 Ctrl + 클릭 (시간이 있는 곳 모두 적용) 타임라인 바 : CTI (Crrent Time Indicator) shy 레이어 드래그하면 한번에 됨. 쉐이프 -> 컨텐츠 속성과 트랜스폼 속성으로 나뉨. 쉐이프 선택된 상태에서 쉐이프를 추가하면, 컨텐츠 안에 합쳐져서 만들어짐. 별도 레이어로 만들 경우 기존 쉐이프가 선택되지 않았는지 필히 확인. File -> Collect File로 최종 저장하면 여러사람이 공유하면서 수정 가능 (ai로 치면 bmp도 .. Python 파이썬 설치 / 시작하기 1. Python 파이썬 설치 1) 홈페이지 방문 후 원하는 릴리즈버전 다운로드 2) PATH 자동등록 체크 후 install Now 하면 편함. 3) cmd에서 python 입력 후 설치확인 2. Python 시작하기 1) hello world ! print("hello world") 2) 주석, 인코딩지정 # 주석입니다 # -*- coding: utf-8 -*- 3) 한 라인에 여러 구문이 올 경우 세미콜론 사용 (;) 4) 들여쓰기 중요하지만 조심할 것 -> 가독성을 높이지만 논리적인 오류가 날 경우 잡기 힘듦. 3. 웹에서 파이썬 실행하기 repl.it/ The collaborative browser based IDE Repl.it is a simple yet powerful online IDE,.. Vue.js + Atom : 시작하기 1-1. Atom 설치 https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 1-2. Atom Language-vue Package 설치 Setting - Install - Packages 'Language-vue' 검색 https://atom.io/packages/language-.. 이전 1 2 다음
