'홈페이지제작'에 해당되는 글 148건

CSS에서 특수외국어 폰트 적용하기 
[웹프로그래밍 ]CSS따라잡기 -특수외국어 font 적용하기 스리랑카어(싱할라어)
 
오늘은 css에서특수외국어  font를 적용하는 법을 알아보겠습니다.
텍스트의 글꼴 모음은 font-family속성 으로 설정됩니다 .
이 font-family속성은 "대체 시스템"으로 여러 글꼴 이름을 포함해야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도합니다.
다른 글꼴을 사용할 수없는 경우 브라우저에서 일반 글꼴로 비슷한 글꼴을 선택하도록 원하는 글꼴로 시작하고 일반 글꼴로 끝냅니다.
참고 : 글꼴 패밀리의 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다.
하나 이상의 글꼴 군이 쉼표로 구분 된 목록에 지정됩니다.
글자의 크기는 고정형 px 단위 / 상대정 em 상재적사이즈 있습니다.
Em로 글꼴 크기 설정
사용자가 브라우저 메뉴에서 텍스트의 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 엠을 사용합니다.
em 크기 단위는 W3C에서 권장합니다.
1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본 크기는 16px입니다.
크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels  / 16 = em이다 
  

1. 사용자의 컴퓨터에 폰트가 없을 때 어떻게 디자이너가 사용한 폰트를 보여 줄 수 있는가
 
첫 번째 방법
디자이너가 홈페이지을 만들때 사용한 폰트가 사용자 컴퓨터에 없는 경우
자동으로 web font를 다운받아 볼수 있게 하는 것이다.
먼저 아래  구글접속해서 원하는 폰트를 찾아야한다
 
Google Fonts
https://fonts.google.com/
Browse and preview the collection, with customizable options and ready to use CSS.
위 주소를 클릭하면 여러가지 폰트가 나타는데  오늘 여기서는 폴리아카데미에 사용할 싱할라어(스리랑카어)폰트를 설치해 보려고 한다.
 

 
 화살표 부분에 Language 선택할 수 있다  드롭다운 메뉴를 선택하여 sinhala라고 나온 부분을 누르면

  화살표 부분을 누르면 html에 붙여 넣을 부분과 CSS에 붙여 넣을 부분이 나타난다 
  

특별히 CSS에 붙여 넣을 소스는
css 파일에서 링크하고 적용할 곳에 폰트를 추가해 주면된다.
 
font-family : ' Noto Sans Sinhala ', 산 세리프;
 
두번째 벙법은
아래 구글 주소에 접속한다  많은 외국어 폰트가 나타는데  사용하고자 하는 국가의 언어를 ctrl +F 를 이용하여 찾을 수 도 있다
https://fonts.google.com/earlyaccess
스랑랑카 언어인 싱할라(sinhala)를 검색하면 아래아 같은 창이 나타난다 
  

이렇게 검색을 하여 글자체를 다운로드 할 수도 있고
아래와 같이
 
 노토 샌스 신 할라 (신 할라)
컴퓨터가 텍스트를 렌더링 할 때 텍스트를 표시 할 수없는 문자가있을 수도 있습니다. 문자를 지원하는 글꼴이 없기 때문입니다. 이 경우 문자를 나타내는 작은 상자가 표시됩니다. 우리는 그 작은 상자를 "두부"라고 부르며 웹에서 두부를 제거하려고합니다. 이것이 노토 (Noto) 글꼴 군이 이름을 얻은 방법입니다.
노토는 모든 언어의 플랫폼에서 웹을 더욱 아름답게 만들어줍니다. 현재 Noto는 30 개가 넘는 스크립트를 다루고 있으며 향후 Unicode 전체를 다룰 예정입니다. 이것은 Sans Sinhala 가족입니다. 그것은 규칙적이고 대담한 스타일을 가지고 있으며 암시됩니다.
Noto 글꼴은 높이와 스트로크 두께가 서로 다른 여러 언어에서 시각적으로 조화를 이루도록 고안되었습니다. 현재 출시 된 Noto 글꼴은 code.google.com/p/noto/를 참조하십시오 .
 

위 소스는 CSS파일에 head에 삽입하고   font-family는 적용하고자 하는 곳에 붙이 면된다 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

[웹프로그래밍 ]CSS따라잡기 -패딩(padding)속성적용하기

CSS 패딩속성 부여하기
CSS padding속성은 내용 주위에 공간을 생성하는 데 사용됩니다.
패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다.
CSS를 사용하면 패딩을 완전히 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다.
패딩 - 개별면
CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다.
padding-top
padding-right
padding-bottom
padding-left
모든 패딩 속성은 다음 값을 가질 수 있습니다.
length - px, pt, cm 등의 패딩을 지정합니다.
% - 포함하는 요소의 너비에 대한 패딩을 %로 지정합니다.
inherit - 패딩을 부모 요소로부터 상속해야한다고 지정합니다.
다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 패딩을 설정합니다.
예
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
 

패딩 - 속성
코드를 단축하려면 모든 패딩 속성을 하나의 속성에 지정할 수 있습니다.
이 padding속성은 다음과 같은 개별 패딩 속성의 속기 속성입니다.
padding-top
padding-right
padding-bottom
padding-left
예
p {
    padding: 50px 30px 50px 80px;
}

그래서, 그것이 작동하는 방법은 다음과 같습니다 :
padding속성에 4 개의 값 이있는 경우 :
패딩 : 25px 50px 75px 100px;
상단 패딩은 25px입니다.
오른쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
왼쪽 패딩은 100px입니다.
padding속성에 세 개의 값 이있는 경우 :
패딩 : 25px 50px 75px;
상단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
하단 패딩은 75px입니다.
padding속성에 두 개의 값 이있는 경우 :
패딩 : 25px 50px;
상단 및 하단 패딩은 25px입니다.
오른쪽 및 왼쪽 패딩은 50 픽셀입니다.
padding속성에 하나의 값 이있는 경우 :
패딩 : 25px;
4 개의 패딩 모두 25 픽셀입니다.
예
div.ex1 {
    padding: 25px 50px 75px 100px;
}
div.ex2 {
    padding: 25px 50px 75px;
}
div.ex3 {
    padding: 25px 50px;
}
div.ex4 {
    padding: 25px;
}
위 속성을 적욯한 값은 아래와 같습니다.
 

 ====================================================

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

CSS 여백설정하기

CSS margin속성은 요소 주위에 공간을 생성하는 데 사용됩니다.
margin속성은 경계 외부의 공백의 크기를 설정합니다.
CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각면 (위, 오른쪽, 아래 및 왼쪽)의 여백을 설정하기위한 CSS 속성이 있습니다.
여백 - 개별면
CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.
margin-top
margin-right
margin-bottom
margin-left
모든 margin 속성은 다음 값을 가질 수 있습니다.
auto - 브라우저가 여백을 계산합니다.
length - px, pt, cm 등의 여백을 지정합니다.
% - 포함하는 요소의 너비에 대한 여백을 %로 지정합니다.
inherit - 부모 요소에서 여백을 상속해야한다고 지정합니다.
팁 : 음수 값이 허용됩니다.
다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 여백을 설정합니다.
예
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
 

 
여백 - 속기 속성
코드를 줄이기 위해 하나의 속성에 모든 여백 속성을 지정할 수 있습니다.
이 margin속성은 다음과 같은 개별 여백 속성에 대한  속성입니다.
margin-top
margin-right
margin-bottom
margin-left
예
p {
    margin: 100px 150px 100px 80px;
}

그래서, 그것이 작동하는 방법은 다음과 같습니다 :
margin속성에 4 개의 값 이있는 경우 :
여백 : 25px 50px 75px 100px;
상단 여백은 25px입니다.
오른쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
왼쪽 여백은 100 픽셀입니다.
시작은 위에서 오른쪽 아래 왼쪽으로 진행됩니다.
margin속성에 세 개의 값 이있는 경우 :
여백 : 25px 50px 75px;
상단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
하단 여백은 75px입니다.
margin속성에 두 개의 값 이있는 경우 :
여백 : 25px 50px;
상단 및 하단 여백은 25px입니다.
오른쪽 및 왼쪽 여백은 50 픽셀입니다.
margin속성에 하나의 값 이있는 경우 :
여백 : 25px;
네 가지 마진 모두 25 픽셀입니다.
자동 가치
margin 속성을 설정하여 auto컨테이너 내에 요소를 가로로 가운데 놓을 수 있습니다.
그러면 요소가 지정된 폭을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에서 균등하게 분할됩니다.
예
div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
 

 
상속 된 값
이 예에서는 부모 요소에서 왼쪽 여백을 상속 할 수 있습니다.
예
div.container {
    border: 1px solid red;
    margin-left: 100px;
}
p.one {
    margin-left: inherit;
}
 

여백 축소
요소의 위쪽 및 아래쪽 여백은 두 개의 여백 중에서 가장 큰 것과 동일한 단일 여백으로 축소됩니다.
이것은 왼쪽과 오른쪽 여백에는 발생하지 않습니다! 위쪽 및 아래쪽 여백 만!
다음 예제를보십시오.
예
h1 {
    margin: 0 0 50px 0;
}
h2 {
    margin: 20px 0 0 0;
}
 

위의 예에서 <h1> 요소의 하단 여백은 50px입니다. <h2> 요소의 상단 여백은 20px로 설정됩니다.
상식적으로는 <h1>과 <h2> 사이의 수직 여백이 총 70px (50px + 20px)가 될 것입니다. 그러나 마진 붕괴로 인해 실제 마진은 50px가됩니다

-----------------------------------------------

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

[홈페이지제작]을 위한 html5과 css3 예제

html과 css 에 대하여
현재의 웹 페이지 제작 기술들 중에서 가장 큰 화두는 HTML5입니다.
10여년간 꾸준히 사용 되어오던 XHTML+CSS2의 웹페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용하는 것 외에는 다른 대안이 없었으며 인터렉티브한 요소를 사용하기 위해서는 플래쉬나 다른 ActiveX와 같은 요소를 사용해야 했으며, 무엇보다 표준화 되지 않은 제작기술의 범람으로 크로스 브라우징이라는 당연히 적용되어야 하는 주제를 무척이나 까다로운 이슈로 남겨놓았습니다.
새롭게 등장한 HTML5는 이러한 웹 페이지 제작의 어려움들을 해소하기 위해서 고안되었습니다.
기존에 사용하던 XHTML + CSS2의 표준화된 요소들 위에 더욱 시맨틱해진 태그 요소들과, 그래픽적인 부분을 보완하기 위한 다양한 효과들, 멀티미디어를 HTML 자체에서 지원하기 위한 방법을 제공하는 등 HTML5로 제작된 웹 페이지는 기존의 XHTML 기반의 웹 페이지보다 더욱더 인터렉티브해 집니다.
특히 CSS3에서 추가된 “미디어 쿼리”기능은 한 번의 작업으로 다양한 해상도에 따라 각기 다른 UI 형태를 제공할 수 있도록 하여 PC + 테블릿 + 스마트 폰을 한번에 지원하는 “반응형 웹”이라는 새로운 제작 기법을 탄생 시켰습니다
html5의 간단한 예시블 보도록 하겠습니다.
<!doctype html>:Html을 알리는 태그
<html (lang="ko")>:시작과 끝
<head>:브라우저에게 정보를 주는 태그
<body>: 몸통과 같은 존재(내용)
<meta>: <meta charset="utf-8">
html5에서 한국어뿐만아니라 모든언어를 사용할수있는 문자세트
<div> 전체를 감싸는 요소
<title>
<br>:줄바꿈
<img>,<video>,<audio>
<header>: 머리말
/<nav>: 문서 +사이트 연결 내비게이션 역할
<ul>,<ol>,<li>: 목록 /
<p>:텍스트
<hn>:크기별 제목
<article>:콘텐츠
<aside>:사이드바
<footer>: 저작권표시
<table>,<tr>,<td>,<th>:표
◈<form>,<fieldset>,<legnd>,<label>,<button>,<input> 등: 폼만들기◈
css3의 간단한 예시블 보도록 하겠습니다.
 
<style>, .class , #id : 스타일 정의하고 적용!
font-size,wieght,align,shadow,height,style: 텍스트 꾸미기
color, background(배경)
margin(박스 바깥 여백)/ padding(박스안쪽 바깥 여백)
border(테두리) -radius(둥글게)
transform(웹요소변형)
transition(애니메이션효과),animation(애니메이션)
@media(반응형웹디자인)
 
 
웹문서의 기본적인 스타일을 미리 지정해둔 스타일시트. html로는 웹문서를 다양하게 설계하고 수식하는데 한계가 있기 때문에 이를 보완하기 위해 만들어진 것으로, 문서의 일관성을 유지하고 이용하기 편리하다는 특징이 있다.html이 웹문서의 뼈대를 잡기 위한 도구라면, CSS(스타일시트)는 그 뼈대를 더 예쁘게 꾸미는데 필요한 도구라고 설명할 수 있다.
 
◈ CSS(스타일시트)의 선택자
- 태그 : 선택한 태그가 사용된 모든 내용에 대해 스타일을 적용하는 것 / ex) a 태그의 기본 기능인 파란글씨/밑줄을 없애는 것
- 클래스 : 비슷한 계열의 내용에 같은 스타일을 적용하는 것 / 같은 이름의 클래스가 존재할 수 있음
- 아이디 : 한 '화면'에서 유일한 값으로 특정 범위에만 스타일을 적용하는 것 / 같은 이름의 아이디가 존재할 수 없음
 
 
◈ CSS(스타일시트)의 문법
태그명 { 속성명:값; 속성명2:값2; }
#아이디명 { 속성명:값; 속성명2:값2; } /* 설명을 써주세요 */
.클래스명 { 속성명:값; 속성명2:값2; }
CSS(스타일시트)는 html과 다르게 () 대신 {}중괄호를, = 대신 :(콜론)를 사용하며, 값 뒤에는 반드시;(세미콜론)을 붙여야 한다.
또한 스타일시트에서는 '/* */'를 주석으로 쓰며, /* 와 */ 사이에 내용을 입력하면 된다.
 
2. font 태그(글자)와 관련된 CSS 속성
1) color : 색상값 ; - 글자 색상
2) font-size : 사이즈값 ; - 글자 크기
3) font-family : 폰트명 ; - 글자 폰트(폰트명이 길어 띄어쓰기된 경우 작은따옴표로 묶어줘야 함 / ex) 'time new roman'
4) font-style : (italic/normal) ; - 글자 기울임꼴 지정 / 태그 자체에 글자 기울임꼴이 지정되어 있는 경우가 있어 바꾸기 위한 기능
5) font-weight : (bold/normal) ; - 굵은 글꼴 / 태그 자체에 굵은 글꼴이 지정되어 있는 경우 바꾸기 위한 기능 / ex) th 태그
6) text-align : (left/center/right) ; - 글자의 가로 정렬 / 컨트롤에서 많이 쓰임 / ex) 버튼 위 글씨라서 가운데 정렬이 필요할 때
7) test-decoration : (underline/none) ; - 글자의 밑줄 / ex) a 태그에서 밑줄 지울 때
 
+ 사이즈를 나타내는 단위
절대크기 - pt, mm, cm, inch
상대크기 - px(해상도에 따라 달라짐), %, em
 
CSS(스타일시트)를 적용해볼 예시
◈ 태그에 CSS(스타일시트) 적용하기
<p> 태그에 스타일시트로 속성을 변경한 경우
  
 

 
위의 예시에서 <body> 부분은 전혀 건드리지 않고, p 태그에 스타일시트를 이용해 오렌지색 / 10pt / 기울임꼴 / 가운데 정렬을 속성으로 설정한 결과 아래와 같이 내용의 스타일이 변경되었다.
+ 참고로 스타일시트는 <head><body> 사이에 작성하며 <style> ........ </style>의 형태로 내용을 쓴다
◈ 클래스에 CSS(스타일시트) 적용하기
 
 
클래스에 스타일시트를 적용하는 것이기 때문에 .(점)을 클래스명 앞에 붙인 후 중괄호로 속성을 적용한다.
빨간색 / 20pt / 글자 밑줄을 "testA"라는 클래스에 적용한 예시이며, "testA"클래스를 제외한 나머지 내용에는 직전에 적용한 p태그의 스타일시트가 그대로 남아있음을 알 수 있다.

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 홈페이지 제작을 위한 워드프레스의 장점

최근에는 워드프레스 홈페이지 제작 수요가 증가하면서 많은 웹호스팅 업체에서 워드프레스 자동설치를 지원하고 있고 함께 웹호스팅에 워드프레스 프로그램, 코어를 설치해야 하며,
새로이 쇼핑몰 창업에 관심을 가지는 사람들이 사이에는 간편한 CMS,콘텐츠 관리 시스템(CMS, Contents Management System)의 하나로, 반응형웹지원, 깔끔한 디자인 등의 장점이 있는 워드프레스 쇼핑몰이 주목을 받고 있다.
워드프레스 쇼핑몰 플러그인이라면 대다수의 사람들은 전세계 사람들이 이용하고 있는 우커머스 플러그인을 떠올린다.
 
그러나 해외의 쇼핑몰 환경과 국내 쇼핑몰 환경은 많은 차이가 있어 이러한 차이를 좁히기 위해 제작사들은 국내환경에 맞게 커스터마이징을 진행하여 사용자들에게 제공하고 있지만 자세히 들여다보고 선택하지 않으면 쇼핑몰 창업 예산이 늘어나는 결과가 나올 수 있다.
 
기존에 우커머스 플러그인을 자세히 들여다보면 쇼핑몰기능 외에 추가로 설치해야 하는 기능이 몇 있는데 찬찬히 살펴보면, 쇼핑몰 가입 회원을 관리할 수 있는 회원관리 플러그인, 국내 홈페이지/쇼핑몰 운영할 때 필수인 SSL(보안서버)연동, 신용카드 결제에 필요한 PG모듈, 판매 및 배송 현황을 알 수 있는 SMS연동, 페이시스템을 적용한 간편결제, 네이버 쇼핑 연동, 성인고객 확인을 위한 성인인증, 등이 있다.
 
워드프레스 쇼핑몰 제작을 진행하는 제작사들은 이러한 기능들을 유/무료 플러그인으로 제공하고 있는데 유료 플러그인 같은 경우는 적게는 1~2만원부터 많게는 30만원까지의 플러그인 비용을 책정하여 판매하고 있다.
그리고 워드프레스의 플러그인 부분 외에 유료테마 구매와 호스팅 도메인 구매를 같이 한다면 100만원 +@의 비용이 나올 수 있다.
 
또한 해당 기능들에 대해 세부적인 기능변경을 요청하는 경우 유지보수 비용이 추가로 책정되며, 플러그인간 호환성도 중요하게 체크해야 한다. 마지막으로 위에 나열한 부분은 쇼핑몰을 직접 제작한다는 가정하에 책정된 비용이고 쇼핑몰 제작회사에 대행을 할 경우 200만원 이상의 비용이 청구될 수 있다.

 
 
물론 유료 테마, 유료 플러그인을 사용하지 않고 무료기능만으로도 우커머스 쇼핑몰은 구축이 가능하지만 국내 쇼핑몰환경에 최적화된 타 워드프레스 쇼핑몰/쇼핑몰 솔루션과의 기능경쟁에서 밀려 사용자들의 외면을 받을 수 있다.
 
해외 워드프레스 쇼핑몰 플러그인도 무료 플러그인에 대해 기능을 제한을 두고 있기 때문에 이 또한 여의치 않다.
 
그럼 워드프레스 쇼핑몰 제작에는 우커머스 플러그인 밖에 없을까? 국내 워드프레스 테마 제작사인 보부상 워드프레스에서 나온 BBSe-Commerce 플러그인을 탑재한 Blog Shop, Style Shop(이하 블로그샵)테마를 우커머스 플러그인의 대항마로 본다.
 
워드프레스는 오픈소스 소프트웨어를 기반으로해서 불편한 구조를 없애고 비용까지도 확실히 절감하기 때문에 많은 분들의 인기를 얻고 있으며 이런 워드프레스 홈페이지를 만들기 위해선 우선 호스팅 서버 또는 개인서버가 필요하다.

또한 수 많은 플러그인과 오픈소스의 확장성으로 현재는 기업 홈페이지로도 손색이 없으며 단순히 블로그 제작 도구를 넘어 기억의 홈페이지 제작에도 적용이 가능하게 된 것이다. 워드프레스는 기업이나 개인 구분 없이 누구나 무료로 사용할 수 있고 소스코드 수정을 통해 자신만의 도구로 변경 적용할 수 있다는 것이 장점이라 하겠다

포토샵 툴을 통해 CS7 이해하기

포토샵 CS7 버전 기본 툴 이해하기
 
◈ 기본적인 툴의 이해는 책과 인터넷등을 이용해서 하시면 10분이면 가능합니다. 하지만 그 기본적인 툴로 만들 수 있는 건 극히 한정적입니다. 오늘은 그렇게 배운 툴을 이용해서 보다 빠르게 응용해서 포토샵 작업 할 수 있는 포토샵을 배워보도록 하겠습니다.
 
◈ 포토샵 도구툴에는 Quick seletion Tool이 있습니다. 흔히 사용하는 Magic Tool과 같은 메뉴에 있죠. 이것은 빠르게 레이어를 딸 수 있게 합니다. 하지만, 주변 색이 비슷하다면 이것 또한 어려움이 있습니다. 따라서 주변 배경색과 확실하게 구별이 될 때 이 툴을 사용하시면 보다 쉽게 원하는 부분을 딸 수 있습니다.

◈ 이렇게 선택한 부분(영역)으로 레이어창 하단의 반원을 클릭하시면 여려 효과를 주실 수 있습니다. 그중에서도 Photo Filter를 적용해 보도록 하겠습니다. Photo Filter는 원하는 부분의 색상을 조정해주는 기능입니다. 원하는 부분에 세피아효과나, 그레이효과 즉 화면 전체에 빨간빛이라던가, 파란빛이 돌 수 있게 만드는 기능입니다.
 ◈ 이렇게 선택해 주시면 됩니다. 물론 퍼센트를 정해서, 진함과 연함의 구분도 이루어지게 됩니다.
 ◈ 또 눈 여겨 볼 효과로는 Threshold라는 효과가 있습니다. 이 효과는 이미지의 중간 톤을 없애고, 흑백으로 표현하는 것입니다.
◈ 이렇게 중간 톤의 색상이 사라지고 흑백으로 사진이 변해버렸습니다. 역시 조절을 통해 세밀하게 표현 할 수 있습니다. 흑백화 효과 방법에는 여러가지가 있는데, 이 Threshold가 하나의 방법이죠
 

◈ 그 다음으로 툴중에 하나인 복제툴입니다. Clone Stamp tool은 그림 속 이미지를 그대로 복제하는 기능이 있습니다. 화면지 내에는 오렌지 카라멜이 있는데요, 리지가 2명입니다. 바로 이 Clone Stamp tool로 작업을 한 결과입니다. Alt를 눌러 복사할 영역을 선택하고 복제하고자 하는 영역에서 드래그를 통해 원하는 이미지를 그립니다. 그러면 복사 완료!
◈ 화면이 너무 밝거나, 어둡다면 Level효과를 적용해 보세요! Adjustments에는 Levels값 뿐만 아니라, 밝기, 색감, 노출 등 정말 다양하게 이미지를 조정 할 수 있으니 유용하게 사용 할 수 있습니다.
◈ Levels의 경우에는 화면의 밝기를 설정해 줄 수 있습니다.
◈ 역시 Auto Tone, Contrast, Color를 통해 자동으로 이미지를 조정 할 수 있습니다.
◈  포토샵에는 또 하나 재미있는 기능입니다. Puppet Warp 기능인데요, 화면속의 그림을 왜곡시키는 기능입니다.

◈ 이렇게 말이죠! 리지가 뚱뚱하게 변해버렸네요, 이 기능은 관절을 움직일 때 주로 씁니다. Puppet의 한글말은 인형, 꼭두각시를 의미하는데 이렇게 효과를 적용해보니 진짜 꼭두시각시를 조종하는 것 같네요.
  ◈ 시험기간 대비, 공부한 포토샵 수업을 짧게나마 올려볼 예정입니다. 많은 분들이 포토샵 딱 툴까지만 배우고 어떻게 해야하나 막막해 하시는 분들이 많은데, 이런 강의들을 보고, 적용, 실습 함으로써 향상되는 실력을 직접 보실 수 있을겁니다. 그럼 이어서 빠르게 배우는 포토샵 기능 2탄으로 만나요

 포토삽(photoshop)단축키 모음

포토샵 기초 외워두면 편한 포토샵 단축키 모음
포토샵 단축키는 몇 가지만 알아두면 작업 속도도 빨라질 뿐만 아니라 재미가 있을뿐더러
작업속도가 배나 빨라질 수 있어 좋습니다.
 
◈ 새로 만들기 : Ctrl + N
◈ 이미지 열기 : Ctrl + O
◈ 이미지 저장하기 : Ctrl + S
◈ 이미지 인쇄하기 : Ctrl + P
◈ 작업하는 파일 닫기 : Ctrl + W
◈ 포토샵 종료 : Ctrl + Q
◈ 다른 이름으로 저장 : Ctrl + Shift + S
◈ 웹용으로 저장 : Ctrl + Shift + Alt + S
◈ 전단계로 돌아가기 : Ctrl + Z
◈ 복사하기 : Ctrl + C
◈ 붙여넣기 : Ctrl + V
◈ 잘라내기 : Ctrl + X
◈ 자유변형 : Ctrl + T
◈ 한단계전으로 돌아가기 : Ctrl + Alt + Z
◈ 선택한 영역 붙여넣기 : Ctrl + Shift+ V
◈ 칠하기 : Shift + F5
◈ 전체 선택 : Ctrl + A
◈ 선택 영역 해제 : Ctrl + D
◈ 재선택 : Ctrl + Shift + I
◈ 눈금자 열기 : Ctrl + R
◈ 안내선 잠그기 : Ctrl + Alt + ;
◈ 실제 픽셀 크기 : Ctrl + 1
◈ 화면크기에 맞게 조절 : Ctrl + 0
◈ 확대 : Ctrl + [+]
◈ 축소 : Ctrl + [-]
오늘은 포토샵 기초를 주제로 외워두면 편한 포토샵 단축키 모음에 대해 살펴보았습니다!
파일, 편집, 선택, 보기! 이렇게 네 가지 단축키만 공부해도 작업 효율은 두배로 늘어난답니다
참고해서 작업하시면 모두들 포토샵 고수가 되실 수 있을 것 같습니다.
  

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

포토샵(PhotoShop)의 기능
 

 포토샵 은 컴퓨터 소프트웨어의 한종류로 영문으론 Photoshop 이라고도 하며 여러 버전이 많은데 가장 최신버전은 Photoshop CS7가 출시 되었으며 말에는 큰 뜻이 없고 말그대로 사진점 (Photo+ shop) 그런 의미가 됩니다.
 
유저들은 이 프로그램을 이용해서 JPEG, GIF 등의 이미지파일을 편집하거나 형하는데 쓰입니다..
흔히 한국인들이 '포샾'한다고 표현을 자주 쓰며 포토샾의 기능중에 화이트 발란스와 콘트라스트 기능이있는데
조절을 잘하면 사진에 얼굴이 환해지는 효과 등이 있습니다.
미국 어도비 시스템스사에서 개발한 2차원 컴퓨터 그래픽 프로그램. 원래 매킨토시 컴퓨터에서 영상 합성, 색상 분해, 컬러 그림 그리기 등에 사용하던 전문가용 소프트웨어였으나 이후 IBM PC를 위한 윈도용도 출하되었다. 컴퓨터 그래픽 작업에 가장 기본이 되는 프로그램으로 널리 쓰이고 있다.
  

 포토샵은 어도비사의 프로그램으로 많은 분들에게 친숙한 그래픽 도구이며
오늘은 기초적인 포토샵 cc버전 강의가 아닌 많은 분들이 모르고 사용하지 않는 기능들을 활용하는 법을 알아겠습니다. 폴리 스쿨에는 이렇게 오늘 소개하는
그래픽과 웹 프로그래밍, 프로그래밍 언어 , MS오피스 다루는 강의 등 폴리스쿨이라는 말에 걸맞게 컴퓨터를 통해 할 수 있는 모든 것들을 앞으로 이 블러그를 통해 배울 수 있게 될 것입니다.
오늘은 포토샵인강을 함께 보도록 하였으니, 포토샵, 일러스트 카테고리에 들어와 다양한 포토샵관련 내용을 알아 보겠습니다.
첫 번째 기능중의 하나인 레이어 이빈다.
레이어의 계층 구조는 일반적으로 포토샵에서 화면 우측 하단에 위치해 있으며 기본적으
로 Background 라는 레이어 이름을 가지고 있습니다
새로운 레이어를 추가하게 되면 그 위에 브러쉬나 연필 툴 등 여러가지 툴을 이용해 사진을 수정하거나 덧붙일 수 있으며 투명 용지를 올려놓은 것처럼 아래의 사진의 내용을 볼 수 있습니다
특히 레이어 스타일이나 마스크 기능을 사용하여 이미지를 적절히 꾸며 주는데도 이 레이어가 기본이 됩니다, 레이어를 알고나면 포토샵이 한결 수월해 질 것입니다
 
 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)