https://ameblo.jp/maribu1313/ WEBデザイナーを目指すひろです。HTML/CSSのコト、Ps、Aiのコトを超・ド初心者でもわかるように書いていきます！なぜなら、私もまだまだまだのスキル....(_ _;WEBデザインナーを目指している方、共にがんばりましょうー！！ ja 最近、座りっぱなしなので腰が痛くなり始めた25歳、ひろです...ヾ(＠°▽°＠)ﾉ



みなさん、突然ですがコレ知ってますか？？

ファイヤーモバイるスッtムイrLe◯*#...


...噛んだ！！







(怒らんどいて、ビーグル君。)



正しくは、「FireMobileSimulator」！


もしスマホサイトで気に入ったデザインのサイトがあれば、
以前紹介したwebpage screenshotも合わせて使うと
簡単にパシャ！と保存しておけるんです♪

スマホ本体でもできますが、このFireMobileSimulatorだと
縦長のサイトを一発で撮れるのが便利なんです～


これも会社の先輩から教えてもらいました！
私の場合仕事で、スマホ用の画面キャプチャ撮りをiphoneを使って
何回も何回も撮るという地味～な作業に苦労していたところだったので、
それがPCからスマホのキャプチャ撮りができるなんて♡と、小躍りしました♪





↑chrome版とFirefox版もあります。




使い方は
インストール後にウィンドウの右上に丸っこいアイコンが現れます。

それを押すとこんな感じ↓



iphone版を選択して
お好きなサイトを開きます。

すると、




この前紹介した webpage screenshot を使ってパシャりとすれば
もしサイトがなくなっても見ることができますね！

知らない方はぜひ！


あ...! 注意点が一つ！
いつもの画面サイズに戻したい場合は、
また丸っこいアイコンをクリックして
「端末選択解除」を選択してね！

でないとスマホサイズのままになってしまいます。

お気をつけて～♪











]]> https://ameblo.jp/maribu1313/entry-11923081966.html Wed, 10 Sep 2014 22:39:37 +0900 （タイトルがぽかったので歌ってみました♪）

こんにちは！
昼顔にハマって木曜日が待ち遠しいひろです！

今日はJPGとGIFとPNGの違いについて。
また、それぞれの使い分けについて簡単にご紹介します！


JPEG

・写真やグラデーションを用いた画像等に最適！
　24ビット(1670万色)まで扱えるから

・容量を落とすことができる

・ただ、圧縮するとデータが欠けていくので、元の画像には戻せない
　( 画像を正方形8×8ブロックに分けてその一部を削ってる)

・圧縮率を指定できる
　(削るブロックの数を指定できる)

・ロゴ等には不向き
　→写真に対して単調な色を扱うロゴ等だと、圧縮した場合色を揃えようとするので
　　画像がモザイク状にみえてしまう

・透過はできない



GIF

・表現できる色の制限が256色まで

・その代わり、容量が軽い

・ロゴ等の色が少ないものに適している
　JPEGのようなモザイクが起きにくいから

・透過ができる
　透明か不透明か選べる


PNG

・PNG-8、PNG-24の2種類ある

・PNG-8
GIFと同じ表現できる色の制限が256色まで

・PNG-24
　フルカラーを扱えるがJPEGより重くなる

・圧縮による画像の劣化がない

・3つの中で一番ファイルサイズが大きくなりがち

・透明色を用いた画像に向いている


見やすく箇条書きでまとめてみました！

画像編集するときはPNGを用いて、最後に保存するときにJPGを使うと
劣化が一度だけなのでいいと思います！












]]> https://ameblo.jp/maribu1313/entry-11922115678.html Mon, 08 Sep 2014 22:50:57 +0900 最近犬を飼いたすぎて、かわいい犬の動画を観ては飼いたい衝動を抑えているひろです！

みなさま、一昨日ぶりです～笑
最近、ブログの更新が一日おきになっている状態です(´＿｀｡)

まさか犬の動画を観すぎて寝不s...なんてことはないですよ！！！！

飼いたいんですけど、ワンコがかわいそうかなあ～と。
散歩とかまめに遊んであげられない気がしてですね、
うちに来てこの子は幸せなのかなーと思ってしまいそうだからです(´・ω・`)


今回はひろがおすすめするかわいい犬の動画をしょうか...い..







...だとブログの内容が変わってまう！！！！(((゜д゜;)))
(ほんとは観せたい動画がいっぱいあります♪)




....では、このブログの主旨に則りまして笑
この前のスクリーンショットの続きです。

前はFire Fox対応のPage Saverをご紹介しましたが、
今回はWebページスクリーンショット（ webpage screenshot )です！





使い方を以下にまとめてみました！

・Google chrome で利用可能

・保存先はダウンロードファイルの中

・ブラウザ右上のカメラアイコンをワンクリックで
ブラウザ表示画面か、開いているページ上から下まで、を選んでpngで保存できる

・EvernoteやDropboxに保存することができる

・スクリーンショット後、すぐに図形や文字を書いたりと加工できる
↓こんな感じ




私が気に入った点は、Page Saverと違って
ページを下までスクロールしなくても１ページを上から下まで保存できるのが便利だと思いました！


一度は使ってみることをおすすめしますー！
ヾ(＠°▽°＠)ﾉ

明日から仕事の方が多いと思います。
ブルーマンデーに負けず、ファイトー！一発ー！







]]> https://ameblo.jp/maribu1313/entry-11921577692.html Sun, 07 Sep 2014 22:55:43 +0900 (そんなに行く機会はないが) デング熱が恐くて代々木に行けないひろですヾ(＠°▽°＠)ﾉ

突然ですが...
スクリーンショットってご存知ですか？
画面キャプチャで認識してる人もいるかと思いますが、
表示されている画面を画像として保存できます～


使ったことない方でも簡単にできるんですよ！
MACのコマンドだと
・画面全体→shift + command + 4
・ドラッグで選択した範囲をスクショ→shift + command + 4 ですよ

↑はブラウザ問わずにできちゃいます♪




ただ今回はもっと簡単に便利にできる方法があるんです♡
今日会社で教えてもらったのでお伝えしますね～


ブラウザがFirefox、またはGoogleChromeのときで使えるツールです。

一つはPage Saverです！Firefoxで対応！
インストールすると画面右上にカメラのアイコンが出てきます。

そのアイコンをクリックするだけで
今みてる画面が画像としてデスクトップに保存されます。

また、長いページをスクリーンショットする場合は
一度そのページを最後までスクロールして画像を読み込んでください。

Page Saverのおすすめポイントは
HP画面上のブックマークやタブが省かれますよ～♪


早くしりたかっった...！
ね！




明日土日で嬉しいひろでした～
続きはまた明日～ヾ(＠°▽°＠)ﾉ







]]> https://ameblo.jp/maribu1313/entry-11920647092.html Fri, 05 Sep 2014 23:24:24 +0900 一に睡眠、二に睡眠！なWEBデザイナーを目指すひろです！

昨日は更新がありませんでした...すいやせん。(´□｀｡)
睡魔に教われてから今日まで眠り続けてました。
うそです。実は気づいたら21時に寝てました...


この前の続きです。

WEBデザインのことを学ぼうと思い
会社終わり休みの日に学校に通い始めました。
が、全くついていけず...

授業の進行スピードも速く、
先生は恐いし、
まわりは私よりできる人ばかり...
でも通い続け、一通りサイトを作り上げる
基礎スキルを学びました。


ある程度スキルがついたら、
会社を辞めました。辞めるのって大変な労力がいるんですね...
なんやかんやで揉めました笑
辞める時期についてお互いの主張がぶつかり、
挙げ句の果てには人事の方に
「解雇扱いにもできるんだよ」
って言われました...大人って恐いですね♡♡♡


今の職場に就くまでの道のりは、
受けたその一社が人手がかなり欲しかったみたいで
すんなり通り苦労はしませんでした。
次転職するときにコツとかあればまた書きますね！

今回私は人材派遣に登録して職を紹介してもらいました。
DOD◯はWEB系の数が少なかったので、
◯&Rに登録しました。
人材会社の方がいうには、年々正社員の求人が増えているけど、
実務経験1～2年以上の募集内容が多いとのことです。
参考までに。



長くなりましたが、
一歩踏み出すことが大事だと思います。
遊びの時間割いて学校に通ったり、
長年勤めた会社を思い切って退職したり、

よく聞く言葉ですが、
後悔しないように生きてください。

せっかく一歩踏み出したから、絶対がんばろうと思えるはずです。

がんばりまひょ～！
ヾ(＠°▽°＠)ﾉ




]]> https://ameblo.jp/maribu1313/entry-11919656197.html Wed, 03 Sep 2014 23:56:52 +0900 今日は雨がすごいですね～
雨の日は嫌！という方もいるかもしれませんが、
私は昔から雨の日は気持ちが落ち着くので、結構すきです:*:・(￣∀￣)・:*:



今回は私が未経験でWEBデザイナーに向けて転職した内容を
書いていこうと思います！


私は大学卒業後、通信会社の営業として入社しました。
氷河期のせいにしたくはないですが笑、
40社以上受けたのを覚えています。
人生って甘くないんだな、と感じたことを覚えています。。
（でもいい経験でした）


その後、3年とちょっとその会社で営業をしました！
...って、話が長くなりそうなので端折りますと笑



正直、営業は好きではなかったので笑
自分の好きなことをして食べていきたいと思いました。


昔からもの作ったり、絵を描いたりすることが好きだった、
あと自営業の父のHPをつくってあげたかったので
思い切ってHP作成の学校に通い始めました！



が、しかし....



(↑画像は全く関係ないです。シーズーがすきなのでつい...つい..)




続きは、明日書きます！
眠くなってきました。三大欲求の中で最も強い睡魔が襲ってき...ta






]]> https://ameblo.jp/maribu1313/entry-11918665864.html Mon, 01 Sep 2014 23:55:52 +0900 WEBデザイナー未経験から転職して
初めての土日をいただいたひろですヾ(＠°▽°＠)ﾉ


今日は私が個人的によく使う
Illustratorのショートカットをお伝えします。

もしよければ、ご参考にしてください～！
ちなみにMAC用のショートカットです
:*:・(￣∀￣)・:*:こちらです↓


その１

・ズームイン（拡大）→　z　＋　クリック

・ズームアウト（縮小）→　z　＋　option　＋　クリック

便利なのは、ズームインするときに
ズームしたい場所をドラッグしながら四角で囲んでください。

そうすると、ピンポイントでズームされますよ！


その２

・グループ化　→　command　+　G

・グループ解除　→　command　+　G

グループ化したいときはオブジェクトを全て選択してグループ化してください。



あと最後に...

v を押すと選択ツールに戻れるのでとても楽です！


また、増えたらまとめていきますー！
あと、おすすめのショートカットあれば教えてください～ヾ(＠°▽°＠)ﾉ


明日から仕事だ～(・・；)はよ寝なければ。






]]> https://ameblo.jp/maribu1313/entry-11918154801.html Sun, 31 Aug 2014 23:32:14 +0900 WEBデザイナー未経験で最近仕事をはじめたひろです。
最近肌寒くなりましたね～
暑いのが好きな私としては、非常に悲しい...・°・(ノД｀)・°・
そろそろ衣替えをしないとですね！



さて！今日はIllustratorで切り抜きをする方法をご紹介します。

私はよくPhotoshopで切り抜きを使いますが、
（後々ご紹介します～）
Illustratorではあまり使った記憶がないので...Σ(･ω･ﾉ)ﾉ
とても簡単でっせー！そこのお兄さんっっ！！


完成品はこんな感じだよ。






１、切り抜きたい写真をボードにはりつける


・「ファイル」→「新規」 でボードを開きます。

・切り抜きたい写真をボードに貼付けます。
　　方法その１：「ファイル」→「開く」から写真を開く。
　　方法その２：切り抜きたい写真をコピーして、「ファイル」→「ペースト」でボードに貼付ける。




↓




２、切り抜く形をつくる

・「長方形ツール」から切り抜く形を選びます。
　
　下図のように色んな種類を出すには、「長方形ツール」の右下の三角形をクリックしてください。
　今回はスターツールで星の形を選びます。




３、切り抜く形の位置を定める

・星を出す方法は、どこかをクリック→ドラッグで大きさを変えられます。



　心の声（あ、星の位置をずらしたい...）

　↑こういう時、ありませんか？？
　
　「選択ツール」を使って星を選択し、移動しても大丈夫です。
　ただ、もっと良い方法がありますー！

　それは、星を作っている最中がポイントです。
　星を作るとき、クリック→ドラッグのときに、
　クリックしたままにしてください！！

　そのときに、スペースを押しながらドラッグすると、
　形を維持したまま移動だけすることができますよ！便利！



↓




４、切り抜きをする

・星と写真の両方を選択します。
　shift押しながら、星と写真を選択すると簡単ですよ。

・そうすると、選択したことがわかる青の色になります。

　

もしくは、レイヤーの部分を確認するとわかりやすいですよ。
右が青くなってれば選択されているということです。




・肝心の切り抜き方法は、
　「オブジェクト」→「クリッピングマスク」→「作成」です。



できた！




やったねヾ(＠°▽°＠)ﾉ












　


]]> https://ameblo.jp/maribu1313/entry-11917641394.html Sat, 30 Aug 2014 23:36:26 +0900 WEBデザイナー目指しているひろです≧(´▽｀)≦

今日でWEB業に転職して３日めでした。
常に肩に力が入っている状態だったので、
明日は休みで正直、やっと休める～とほっとしているところです。


まだまだ入りたてなのでまともな仕事はさせてもらえてないです。
今日は一日中、テストサイトにアップした文章と原稿があってるかの
確認をひたすらしていました。

目がしょぼぼ～んです(ﾉ_･｡)


でも、こういうときこそ目標があると意気込みが変わってくると思います。
早くまともな仕事をしたいので、振られた仕事を
早く正確に終わらせようという気持ちでやるからです。


早く別の仕事をしたいな～

最近、タグ打ちしてないので忘れるのが恐いので
ポートフォリオサイトを作ろうかと考え中です。

でもまずは仕事になれなきゃ！！

ねむむ...





]]> https://ameblo.jp/maribu1313/entry-11917157978.html Fri, 29 Aug 2014 23:00:59 +0900 WEBデザイナーを目指しているひろです！


今日で仕事2日めでした...！
慣れない環境であまりお腹もすかず、
まだまだ作業が遅いのでプレッシャーで変な汗をかいた日でした。
(変な匂い発してなかったかな....)


ただ、唯一の救いは、
働いている人が優しくて穏やかな人が多いことです！
(こればっかりは入ってみないとわからないですよね)

あ！あと、残業が今のところありません。
これは私が派遣として就職したからだと思います。

募集要項が残業なし！ただし、短期！という内容で
...受けようか少し思い悩みました。

実務経験も問わないということだったので
専門学校で学んだ経験しかない私としては、
ハードルを下げて受けてみようかと思って受けたところ拾われたということです。

現場での仕事は、WEBデザイン業務とは遠いですが、
ただ一番言えることは、めっちゃ勉強になります！！！

長くなりましたが、WEBデザイナーに興味ある方は
とりあえず就職した方が断然いい！ということを大きな声で言いたいです。



今日も眠いひろでした...！



]]> https://ameblo.jp/maribu1313/entry-11916683099.html Thu, 28 Aug 2014 23:34:03 +0900