【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
写真が動く・・・だと!?Photoshopを使ったシネマグラフの作り方
1-1．シネマグラフとは シネマグラフ（Cinemagraphs）は、写真の一部分を動かすことで、そこに注目を集める表現手法のことです。動画を撮影し、注目させたいところ以外は動きを止めてしまいます。作成自体はそんなに難しくないですが、使用する動画を準備するのが一番の難所かもしれません。 1-2．シネマグラフのサンプル 言葉だけだとなかなかわかりずらいので実際にサンプルを集めてみました。 海外からオシャレなシネマグラフを紹介します。 Cinemagraphs 女性の髪と服だけが風になびいています。 Cinemagraphs 電車がホームを通りすぎる様子がループになっています。シネマグラフはモノクロもかっこいいですね。 Ann Street Studio 落ち葉がひらひらと落ち続けています。コーヒーを飲みながらしばらく眺めていたいですね。 いかがでしょう？不思議な世界に迷い込んだ感じじゃありま
Create Inspirational 3D Gold Text with Photoshop Extended
Learn how to make any inspirational message look more meaningful by turning it into a 3D typography poster. In this Photoshop tutorial, you will how to create striking 3D gold text, add reflections with image-based lighting, create a drywall background from scratch, and position your lights using an easy method that feel like you’re playing a 1st person shooter game. To follow this tutorial, you’l
残業するフォトショッパーを駆逐する！作業効率化ルール | Picture Picture
今回は、Photoshopなどの画像編集ソフトを使っている方が、知らず知らずのうちに、仕事を遅くしてしまっているかもしれないポイントと、その改善方法を紹介いたします。 普段、画像編集作業において、画面の「拡大率」について意識することってありますか？ もしかしたら、意識していないばかりに、多くの時間をとられ、無用な残業をするハメになっているかもしれません。 実は、作業時にこの「拡大率」を意識するだけで、業務を効率化することができるって知ってました？ 丁寧な仕事をしようとするほど、ハマりがちなこの「拡大率」の落とし穴。 今回は、カメラマン坂田と、デザイナー山本の二人でご紹介します！ とある日。 夜11時を過ぎた頃・・・ ふーっ・・・ 書類を整理していたら遅くなってしまった・・・ おっと・・・！もうこんな時間・・・帰るか・・・。 ・・・あれ？ PCの明かりが点いてる・・・。 誰かいるのかな？ 薄
これで完璧っ！5種類のphotoshop切り抜き方法を使い分けて輪郭線を背景になじませるクオリティの高い合成をマスターしよう。
Photoshopは画像加工や写真のレタッチに適したデザインソフトですが、実はPhotoshopひとつ使えるだけで、WEBデザインやロゴマーク、ポスターなどあらゆるデザインが可能になります。 これまでスリームデザインでは、Photoshopを使ったさまざまなデザインチュートリ... ケース①：選択ツールで切り抜くまずはじめにphotoshopの切り抜き方法が全くわからない方のために基本を説明します。 必要な部分以外を透明に切り抜く場合、画像（写真）をphotoshopで開いた時点では背景となっていてそのまま切り抜くことはできません。 ↓画像のように背景を複製（背景レイヤーの上で右クリック）し、背景と複製レイヤーの間に分かりやすい色（黒など）で塗った新規レイヤーを挟むと切り抜きしやすくなります。 多角形選択ツールなどで選択し、キーボードのDeleteキーを押せば切り取られます。 切り抜かれた
Quick Tip: How to Create a Triangle Pixelation Effect in Photoshop
Photoshop makes it easy to pixelate with the mosaic filter but it’s boring and overused. Thankfully, there’s an easy trick that lets you pixelate using triangles instead of squares! This tutorial is incredibly easy so give it a try. Final Results Step 1Start by opening any photo you want into Photoshop. You should resize the image to your final output size before you continue. This is the photo th
キラキラ光る星効果
ブラシで作るキラキラ光る星のような効果。作り方も簡単なのですぐに覚えられます。１）ブラシで直線を引く見やすいように背景を黒で作成します。新しいレイヤーを追加して基本ブラシで１ピクセルの（場合によっては２ピクセル）ぼかし無しのブラシを選択して直線を引きます。直線はSHIFTキーを押しながらドラッグすると簡単に引けます。２）ぼかし（移動）[フィルタ]→[ぼかし]→[ぼかし（移動）]でこの直線の左右を延ばしたような効果をつけます。プレビューを見ながら最適な長さになるよう調整しましょう。３）複製していくCTRL+J...
フォトショップ 使い方マニュアル デコレ文字風加工
キラキラ素材を文字の周りにちりばめたデコレーション文字です。クリスタル画像を置いていく方法もありますがお手軽にベベルとエンボスを使って作成してみましょう。1)文字の入力まずは塗りつぶしレイヤーを用意してクリーム色に塗りつぶします。(#F5F5CC)続いて書体（Wide Latin）を選択して文字色(#FF6666)で文字を入力します。今回はベースサイズを240px×240pxで作成しました。文字は200pxで書いています。2)選択範囲の作成テキストレイヤーの先頭四角枠をCTRLキーを押しながらクリックし、文...
簡単にできるPhotoshopの手書き風の記事10選
優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。 Photoshopで簡単にできる手書き風の記事を集めました。 写真加工 Photoshopできれいな水彩画風デザインに挑戦！ | Webクリエイターボックス Photoshopできれいな水彩画風デザインに挑戦！ | Webクリエイターボックス 水彩画はやさしいタッチがだせるので重宝します。 写真をイラスト風に加工する方法 写真をイラスト風に加工する方法 アバンギャルドなデザインをする場合に使えそうです。 更に加工することで、歴史風にすることもできそう。 写真をイラスト風に加工する 写真をイラスト風に加工する FMステーションや英語の教科書のニューホライズンなどであったようなイラスト。 ポップな雰囲気をだしたい場合に。 写真を加工して、手描きの雰囲気を作り出そう！ 写真を加工して、手描きの雰囲気を作り出そう！ 墨な
写真画像をかっこいいモノクロにするPhotoshopのテクニック集 | コリス
Photoshop, Photoshop Elementsを使用してカラーの写真画像をモノクロにするテクニックはさまざまなものがあります。その代表的なテクニックとそれぞれの利点・欠点を紹介します。 元にした画像：Chase the sun 下記は各ポイントを意訳したものです。 はじめに 1. 調整レイヤー：白黒 2. モード：グレースケール 3. 調整レイヤー：色相・彩度 4. モード：Labカラー 5. 調整レイヤー：グラデーションマップ 6. 調整レイヤー：チャンネルミキサー 7. Photoshop Elements：モノクロバリエーション 8. 調整レイヤー：色相・彩度x2 9. 調整レイヤー：白黒（カラースライダー） はじめに モノクロの写真は、ファッション雑誌をはじめ、Flickrのようなソーシャルウェブサイトでも非常に人気の高いジャンルです。デジタルが到来したことで、一つ重要
Create a Colorful Retro Poster in Photoshop and Illustrator
Take a photo and turn it into this amazing retro-style artwork using Photoshop and Illustrator. You'll learn how to create this using very few stock photos and with creative techniques that can also be used in your other designs. To follow this tutorial, you'll need to have some basic experience with Adobe Illustrator. Preview of Final Results Tutorial Resources Model - Poorsouls StockGalaxy - Dec
Photoshop Tutorials
We're humans. We live on land. Sharks live in water. So if you're swimming in the water and a shark bites you, that's called trespassing. That is called trespassing. That is not a shark attack. In this Photoshop tutorial we learned how to create a surreal underwater scene. First we created a underwater scenery, then […]
アニメーションGIFを作ろう！ 役立つツールと作り方 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
Photoshopで写真にモザイク処理を施す方法 | 簡単にわかるPhotoshop（フォトショップ）の使い方
はじめに 今回は【Photoshop】で簡単に写真にモザイク処理を施す方法をご紹介します。(使用ソフト Photoshop5.5) STEP1 画像を開く まずは【Photoshop】で加工したい画像を開きます。 STEP2 モザイクの範囲を選択する 選択ツールで、モザイクをかけたい部分を選択しましょう。全体的にモザイクをかけたい場合は、この工程を抜かしても問題ありません。 STEP3 モザイクをかける 「フィルタ」＞「ピクセレート」＞「モザイク」を選択します。 STEP4 モザイクの大きさを設定 「セルの大きさ」を変えることで、モザイクの細かさを変えられます。プレビューしながら、お好みのモザイクにしましょう。 STEP5 完了 「OK」を押して完成です。 おわりに いかがでしたか？どうぞお役立てください。 【Photo by 足成】 キャプチャ作成：著者 最後まで読んでいただきありがと
Photoshopで一括処理！写真のExif情報を一気に削除する方法 | 簡単にわかるPhotoshop（フォトショップ）の使い方
はじめに 写真をデジタルで撮影した場合、撮影時の情報が詳細に書かれた「Exif情報」というのが、画像には埋み込まれます。 これには日付・カメラ設定・GPS情報などが書かれており、非常に便利ですが、誰でも調べることのできる情報ゆえに、扱いには充分注意が必要です。 例えば、Exif情報を削除しないままネット上に写真をアップロードした場合、GPS情報から住所が他人に知られてしまったり、日付情報からクリスマスの独り身アリバイ工作をファンに見抜かれて炎上してしまったり……等々、Exif情報から思わぬトラブルが起きてしまうことがあります。 ここでは、そんな思いがけないトラブルを未然に防ぐために、Exif情報の確認方法と、削除方法をご紹介します。 Exif情報の確認方法 STEP1:プロパティを見る Exif情報を確認したい画像のアイコン上で右クリックし、プロパティを選択します。 STEP2:「詳細」タ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
http://vectorboom.com/load/tutorials/icon_design/vector_sketch_photoshop_illustrator/4-1-0-324
Ngi-d.net
Webデザインのタネ | Web制作の効率化やトレンド・ノウハウ